10/16 TIL | 왜 콘솔창에서 undefined를 반환할까?

브라우저 개발자 도구 콘솔 창에서 변수를 선언하고 엔터를 치면 undefined를 반환한다.

값에 문제가 있는 것인가 하고 console.log(name);을 입력하면 아래와 같이 Boni를 반환하고, 또다시 undefined를 반환한다. 왜일까?

---

우선 이를 이해하기 위해서는 자바스크립트의 문(statement)과 식(expression)을 이해해야 한다.

문(statement)

먼저, 문(statement)은 어떤 작업을 수행하는 문법 구조(syntax structure)와 명령어(command)를 의미한다. 예를 들면 앞서 사용했던 console.log(name);과 같은 문장을 말한다.

식(expression)

식(expression)은 값으로 평가될 수 있는 문(statement)을 의미한다. 예를 들면 아래와 같다.

// 값으로 평가될 수 있는 문(statement)

1 + 1 // 2
a = 1 // 1
b = [1,2,3] // [1,2,3]
b[1] // 1

이때, 식이 값으로 평가될 수 있는 문이므로, 식이 아니라는 건 값으로 평가될 수 없다는 의미도 된다. 아래와 같은 코드들은 값으로 평가될 수 없다. 이때 변수에 직접 대입해 봄으로써 판단할 수 있다. 다시 말해 값으로 평가될 수 없기 때문에 변수에 할당할 수 없는 것이다.

// 값으로 평가될 수 없는 문(statement)
var a;
var a = 30;


// 표현식이 아닌 문들은 할당할 수 없다.
var b = var a; // Unexpected token 'var'

그래서 브라우저 콘솔창에서 undefined를 반환하는 이유가 뭐라고?

그러니까 식(expression)은 값으로 평가될 수 있는 문(statement)이라는 것이다. 브라우저 개발자 도구의 콘솔 창에서는 표현식의 평가된 값을 반환하기 때문에 표현식이 아닌 문을 실행하였을 때 undefined를 반환한 것이다.

값으로 평가될 수 있는 문(statement) 1 + 2를 입력하니 아까와 달리 undefined가 아닌 3이라는 숫자를 반환한다!