JavaScript 기초 : 변수, 함수

hosik kim·2021년 7월 3일

JavaScript 변수 코드스테이츠 함수

With CodeStates

목록 보기

23/45

변수(variable)

변수란 상황에 따라 변할 수 있는 값을 말한다.
프로그래밍에서 변수는 이름(Label)이 붙은 값이라고 생각하면
이해하기 쉽다.

a Way to handle data

변수의 선언(declaration)

선언은 let 키워드를 사용한다, 선언은 한 번만 사용한다.

let age; // let을 통해 age를 선언

변수의 할당(assingnment)

등호기호가 같다는 의미로 사용되는 것이 아니라 대입(assing)하는 것이다.

age = 12; // age에 12라는 값을 할당

선언과 할당 동시에 가능

let name = 'kim'; // name에 'kim'이라는 입력값을 할당
선언         할당

변수의 표현식(expression)

변수와 특정 값을 이용해서 연산을 하는 경우

let pi = 3.141592; // pi에 원주율 값을 할당한다.

pi * 5 * 5; // 반지름이 5인 원이 넓이

//위 식에서 변수로 둘 수 있는 것이 하나 더 있다 

let radius = 5;
pi * radius * radius // radius에 5라는 특정 값을 대입하여 연산할 수 있다

//결과물을 다시 변수로 담을 수 있다.

let areaOfCircle = pi * radius * radius;

변수 이름을 붙일때는 공간을 사용하지 못하고 중간중간 단어의
첫글자를 대문자로 써붙인다.
이를 낙타 등모양처럼 생겼다고해서 Camel Case라고 불린다.

변수는 동일한 변수를 이용해 대입할 수 있다.

let sum = 1;
sum = sum + 2;
sum = sum + 3;
sum = sum + 4;

//한 번 선언했던 변수를 다시 사용할 때는 let을 쓰지 않는다.

할당이 없는 변수는 정의되지 않았다는 뜻으로
undefined라는 값으로 출력된다.

변수의 타입

1.숫자(number)
2.문자열(string)
3.불리언(Boolean) // true or false
4.배열 // let fruits = [ 'banana', 'apple', 'pinapple'];
5.객체 // let person = {name : 'steve', age:32, isStudent: true};
6.undefined
7.함수

함수(function)

함수는 어떤 목적을 가진 작업들을 수행하는 코드들이 모인 블록이다.
입력값(input)을 설정할 수 있으며 항상 출력값(return)을 반환한다.

만약 리턴문을 사용하지 않았다면, undefind 즉 정의되지 않았다는 타입을 반환한다.

입력(input) - 함수(function) - 출력(return)의 과정으로 이루어진다.

함수에서 사용하는 input값을 매개변수(parameter)라고 부른다.

자 그러면 삼각형의 넓이를 구하는 함수를 만들어보자

✔ 함수의 선언식을 통해 삼각형의 넓이를 구하는 함수

function getTriangleArea(base, height) { //여기서 괄호안에 base와 height는 입력값
	let triangleArea = (base * heiget) / 2;
    return triangleArea  //return은 출력값이 된다.
}

consloe.log(getTriangleAra(2, 4)) // prints 4

✔ 함수 내부에서 return을 하지않은 경우

function getTriangleArea(base, heigth) {
  	let triangleArea = (base * height) / 2;
}
console.log(getTriangleArea(2, 4)) // prints undefined

함수 선언 방법

함수 선언 방식에는 총 3가지 방법이 있는데

1.함수 선언식
2.함수 표현식
3.화살표 함수

위 삼각형의 넓이를 구하는 함수가 바로 함수 선언식에 해당된다.
그렇다면 삼각형의 넓이를 구하는 함수를 함수표현식과 화살표 함수로 바뀌보자!

함수 표현식

const getTriangleArea = function (base, height) {
	let triangleArea = (base * height) / 2;
    return triangleArea
 } //1.가장먼저 변수를 먼저 선언을해준다 const getTriangleArea가 이에 해당된다.
   //2.이 변수에 익명 함수를 할당하는 방식으로 코드를 작성할 수 있다.
   //3.함수 내부는 앞서 선언식에서 작성했던 내부와 동일하게 작성을 해주면 된다.

화살표 함수

const getTriangleArea = (base, height) => {
	let triangleArea = base * height;
    return triangleArea;
 };
 
 //1.화살표 함수는 함수 표현식을 기반으로한다
 //2.그 변수에 펑션키워드를 화살표로 축약해서 표시한 익명함수를 할당해준다

화살표 함수는 몇 가지 특징이 있는데

만약 함수의 본문(body)에 return문만 있는경우,
:return과 {}중괄호(curly bracket)를 생각할 수있다.

const getTriangleArea = (base, height) => base * height / 2; // O, 정상 작동
const getTriangleArea = (base, height) => { base * height / 2; } // X, undefined 리턴

return 문에서 소괄호를 사용할 수 있다.

const getTrianlgeArea = (base, height) => (base * height / 2) // O, 정상 작동

만약 함수 내의 표현식이 2줄 이상인 경우,
:return과 {}중괄호(curly brace)를 명시적으로 쓰는 것이 좋다.

함수의 호출

선언 매개변수(parameter)

function getTriangleArea(base, height) {
  let triangle = (base * heigth) / 2;
} // 여기서 매개변수는 (base, height)를 의미한다
// 매개변수는 함수를 실행할때 입력에 따라서 바뀔 수 있는 변수