JavaScript 개발자가 알아야할 33개 컨셉 07.Expression vs. Statement

07.Expression vs. Statement

 

- Expression

Expression returns a value

무언가 결과(Value)를 return하는 문장

 

ex1) 5 + 11  > 16이라는 결과를 return하므로 Expression

ex2) 

function add(a, b) {

 return a+b;

}

console.log(add(5,6)); 

 > add(5,6) 도 11이라는 결과를 return하므로 Expression

 

자바스크립트는 Expression을 value로 대체하고, 작업을 계속 진행한다.

 

---

- Statement

 

Statement는 명령. 혹은 지시이다. 

ex1) 예를 들어 아래와 같은 코드블럭은 아무것도 리턴하지 않는다. 지시. 명령이다.

if(true) {

}

ex2) 아래와 같은 문장은 에러를 발생시킨다. return되는 Value가 없는 Statement를 Variable로 저장할 수 가 없기 때문이다.

const thing = if(true) {
}

 

 

결론. Variable로 저장할 수 있는 건 Expression이다.

Expression은 Value를 리턴한다. 

Statement는 그냥 명령이다. 

if, else, for, while...  등등

 

---

function Expression vs. function declaration

 

 

const awesome = add(1,5);


function add(a,b) {	// << 함수의 선언식(function declaration)
	return a+b;
}

console.log(awesome)

위 문장은 에러를 발생시키지 않는다. 

라인 1에서는 존재하지 않던 함수를 사용했고, 결과는 6이 반환된다.

이것이 가능한 이유는

자바스크립트가 코드를 보면, 모든 declaration(함수의 선언식)을 상단으로 가져온다. 

이것이 자바스크립트에서 존재하는 hoisting이라는 프로세스이다.

때문에 위와 같은 코드가 에러를 발생시키지 않는 것이다. 

 

 

반면에, 아래와 같은 코드는 에러를 발생시킨다.

const awesome = add(1,5);

const add = (a, b) => a + b;	// << 함수의 표현식(function expression)

console.log(awesome)

이유는 함수의 표현식은 hoisting이 되지 않기 때문에, 1번 라인에서 add는 존재하지 않는 것이 되기 때문이다. 

 

이것이 함수의 선언문과 표현식의 가장 중요한 차이점이다.