Expression & Statement

JavaScript에는 대표적인 2가지 문법 카테고리가 존재합니다.

그것이 오늘 공부할, Expression과 Statement입니다.

Expression(표현식)

Expression은 JavaScript에 의해 value를 return하는 코드를 의미합니다.
값을 도출할 수 있는 모든 코드가 Expression이 될 수 있습니다.

// programmer가 아래처럼 1+1을 출력하는 코드를 작성함
console.log(1+1);

// JavaScript는 1+1이라는 Expression을 2라는 value로 대체함
// value 대체 후, console.log()를 아래처럼 변환하여 수행함
console.log(2);

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

function sub(a,b){
	a-b;
}

// func add는 전달한 두 인자값을 더하여 return
// 따라서, add(5,6)은 Expression
console.log(add(5,6));

// func sub는 따로 return하는 구문이 없음
// 하지만, undefined를 return
console.log(sub(5,6));

Statement(문장)

Statement는 특정 Action을 수행하는 코드를 의미합니다.
- ex) if, else, else if, while, for와 같은 Action을 수행하는 코드
Statement는 Expression처럼 값을 도출할 수도 있으며, 값을 도출하지 않을 수도 있습니다.
- 모든 Expression은 Statement에 포함됩니다.
- Statement는 값을 도출하지 않을 수도 있기 때문에 모든 Statement는 Expression이 아닙니다.
```
// 조건을 파악하는 if문 자체는 value를 return하지 않음
const what = if(true) {}; // Error
console.log(if(true) {}); // Error
```

Function Declaration(함수 선언문)

Function Declaration은 아래 예제처럼 호이스팅이 발생합니다.
- 호이스팅은 JavaScript Engine에 의해, 모든 선언문이 코드 유효범위 상단으로 끌어올려지는 현상입니다.
- 이는, 함수의 선언 자체가 코드의 최상단으로 끌어올려진다는 뜻입니다.
- 이러한 Function Declaration은 선언과 동시에 함수가 생성된다는 특징을 가지기 때문에 에러없이 실행됩니다.

// Line 1 : 존재하지 않는 add()를 사용하려 함
// JS엔진은 코드 실행 전, 모든 Declaration을 호이스팅함
// 이는 실행 가능한 코드를 형상화하고 구분하는 과정을 거치는 것임
const sum = add(1,2);

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

// Error 없이 정상적으로, add한 결과를 출력함
console.log(sum);

Function Expression(함수 표현식)

Function Expression은 반면, 호이스팅이 발생하지 않습니다.
- 함수를 변수에 담고 있기 때문에, 변수 호이스팅과 똑같이 동작합니다.
- var 키워드로 선언한 경우에는 선언문 이전에 함수를 실행하려 하면, undefined가 저장되어 있기 때문에, undefined 데이터 타입을 호출하려 하기 때문에, Type Error가 발생합니다.
- let, const 키워드로 선언한 경우에는, 선언문 이전에 함수를 실행하려 하면, 초기화 단계를 거치지 않았기 때문에, Reference Error가 발생합니다.

// Line 1 : 존재하지 않는 add()를 사용하려 함
// add(1,2)는 아직 초기화되지 않았음. 
// Error 발생 : Reference Error(선언만 되어있을 때 발생하는 Error)
const sum = add(1,2);

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

만약 Hoisting에 대한 자료가 필요하다면?

FrontendWeb