javascript 33가지 기본 컨셉: 7. Expression vs. Statement

Expression vs. Statement

Expression

js에서 Expression은 value를 return 하는 것을 의미한다. 그냥 단순히 value도 될 수 있고 function을 통해서 반환하는 value일 수도 있습니다. 

 

예를 들어 

1 + 1 // expression

function add(a, b){
	return a + b;
}

const ab = add(1, 2); // expression


function add(a, b){
	 a + b;
}

const ab = add(1, 2); // undefined가 출력되지만 
// undefined를 반환하기 때문에 expression이다. 

 

Statment

js에서 지시 및 명령을 의미한다. 아래의 예를 보면 바로 이해가된다. 

for(var i = 0; i < 10; i++){
	
} // statment

while(true){


} // statment

if(true){

} // statment

위의 예시와 같이 특별히 반환해주는 value와는 상관 없는 if, for, while 등등을 Statment라고 한다. statment의 경우 특별히 반환 해주는 value가 없기 때문에 아래의 경우에 오류가 발생한다. 

console.log(if(true) {});

또한 변수에 저장하려고 해도 오류가 발생한다. 

 

const thing = if (true){}

따라서 변수에 저장될 수 있는 것은 expression인 경우에만 가능하다.

 

function declaration

js에서 아래와 같이 선언해줄 때 이를 declaration이라고 해준다. 

function add (a, b){
	return a + b;
 }// declaration

Expression과의 가장 큰 차이점은 코드를 실행할 때 호이스팅이(hoisting)라는 현상이 발생한다. 

 

const now = add(1,2);

function add(a, b){
return a + b
};

console.log(now);

 

정상적으로 3이 출력된다. 다른 언어에서는 add 호출을 해준 후 add 함수가 선언되었기 때문에 에러가 발생한다.

하지만 js에서는 declaration 코드를 실행할 때 제일 최상단에 이동 시켜서 위와 같은 경우에 정상적으로 작동하게 만들어준다.

 

하지만 arrow function의 경우 hoisting이 되지 않는다.

const now = add(1, 2);

const add = (a, b) => return a + b;

console.log(now);

위 코드에서는 error가 발생한다. arrow function의 경우에는 일반 function과는 다르게 변수에 익명 함수를 담아 놓기 때문에 선언 문이 아닌 표현식이 되는 것이다.