[JavaScript 33가지 지식]식(expression)vs 문(statement)

 

Expression은 무엇인가 ??

value를 리턴하는 무언가를 의미한다.

value를 리턴하는것을 expression이라고 생각하자

varialbe로 저장할 수있는것은 expression이다.

 

Statement는 무엇인가??

명령 혹은 지시이다.

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

Statement는 varialbe로 저장할 수 없다.

 

좀 더 자세히 알아보자

---

Expression

식 (Expression)의 종류는 4가지가 존재한다.

• 값
• 연산식
• 리터럴
• 함수 호출

//값 ===============================
1
3.14
;('expression')
undefined
null

//연산식===============================
1 + 1 // 2
2 >1// true
(1 * 2 * 3) /2 // 3
1 * 2 * 3 > 1 // true
true || 1 // true
5 > 1 ? 5 : 1 // 5

//리터럴===============================
{} // 객체 리터럴
function () {} // 함수 리터럴
[] // 배열 리터럴
/\b/ // 정규식 리터럴

//함수===============================
Math.ceil(3.14) // 4
function add(a,b)return a+b
console.log(add(2,3))//5

---

Statement

자바스크립트의 문(Statement)은 아래와 같다.

1. if
2. if-else
3. while
4. do-while
5. for
6. switch
7. for-in
8. debugger
9. variable declaration

문 (Statement)은 기본적으로 무언가를 수행한다.
자바스크립트에서 문장은 값이 들어가야할 곳에 들어갈 수 없다.
따라서 문 (Statement)은 함수의 인자, 대입 연산의 값, 연산자의 피연산자로 사용할 수 없다.

---

function declaration과 function expression 사이의 차이

 

바로 코드 예시를 보겠다. (백문이 불여일견)

 

function declaration 경우

//함수 선언문(declaration)

const ex2 = add2(1, 5);

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

console.log(ex2); //6

 

function expression 경우

//함수 표현식(expression)
const ex1 = add1(1, 5);

const add1 = (a, b) => a + b;

console.log(ex1); //ReferenceError: Cannot access 'add' before initialization

함수선언문(function declaration)일 때는 문제없이 작동하던것이 왜 함수 표현식(function expression )에서는 문제가 될까?

 

JavaScript에서 함수선언문일경우에는 호이스팅이라는 현상이 발생하여 아래와같이 코드가 작성된것과 같다.

그렇기에 문제가 없이 콘솔값이 나온다. 

//JavaScript의 호이스팅에 의한 현상
function add2(a, b) {
    return a + b;
  }

const ex2 = add2(1, 5);


console.log(ex2); //6


//실제코드============
// const ex2 = add2(1, 5);

// function add2(a, b) {
//     return a + b;
//   }
//console.log(ex2); //6

하지만 함수표현식은 앞서 배운것 처럼 우린 표현식은 값이라고 배웠다.

값은 호이스팅되지 않다. 그렇기에 위와 같은 에러가 발생한것이다.

 

---

정리

Expression은 무엇인가 ??

value를 리턴하는것을 expression이라고 생각하자

varialbe로 저장할 수있는것은 expression이다.

 

Statement는 무엇인가??

명령 혹은 지시이다.

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

Statement는 varialbe로 저장할 수 없다.

 

 

---

목차

[JavaScript 33가지 지식] 시리즈 소개 및 목차

---

참고

식(expression) vs 문(statement)