console에서 undefined가 나오는 이유

var { firstname, age } = {firstname: 'kim', age: 30 };

라고 코드를 작성한 뒤, 콘솔창에

console.log(firstname);
console.log(age);

를 작성하면 변수값이 잘 할당된 것을 확인할 수 있는데,
문제는 아래에 뜨는 undefined이다.

대체 이게 왜 뜨는 걸까...
혼자 머리를 굴려봐도 이유가 떠오르지 않았다.

궁금해서 검색해보았더니 (검색 키워드: console창에 undefined가 연달아)
위 현상을 이해하기 위해서는 자바스크립트에서 문과 표현식에 대해서 이해가 필요하다고 한다.

문이란?

• 문이란 프로그램을 구성하는 기본 단위이자 실행 단위로, 명령문이라고도 부른다.
  조건문, 선언문, 반복문 등등 문을 실행하면 해당 프로그램에서 명령이 실행된다.

표현식(expression)이란?

• 표현식이란 값으로 평가될 수 있는 문을 말한다.
  예를 들어 1+2=3이라는 수식에서
  1+2와 3은 동치이므로 1+2는 3으로 표현될 수 있다는 말과 비슷하다.

//값으로 평가될 수 있는 문들
1+2 //3
a = 1 //1
b = [1,2,3] //[1,2,3]
b[1] //2

표현식이 아닌 문들

표현식 값으로 평가될 수 있는 문이란 뜻이기 때문에
표현식이 아니라는 뜻은 값으로 평가될 수 없다는 뜻이다.

다음과 같은 코드들은 값으로 평가될 수 없다.
그리고 이러한 문들은 변수에 직접 대입해봄으로써 판단할 수 있다.
값으로 평가될 수 없기 떄문에 변수에 할당할 수 없기 때문이다.

//값으로 평가될 수 없는 문들
var a;
var a = 10;

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

그래서 왜 undefined가 나오는 것인가

표현식은 값으로 평가될 수 있는 문이라고 했는데,
크롬의 콘솔창에서는 표현식의 평가된 값을 반환하기 때문에 표현식이 아닌 문을 실행했을 때 undefined를 반환한다.

마지막에 작성한 코드가 아무런 리턴 값이 없을 경우(console, 단순 변수 선언 등)에 undefined가 찍힌다고 보면 될 것 같다.

//아웃풋이 있는 예시
function add(a,b){
  return a + b;
}
add(2,5);

위 코드를 콘솔창에 붙여넣으면 7이라는 아웃풋이 나오면서 undefined가 뜨지 않는다.

하지만 만약

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

이렇게 작성한다면,
console.log로 인해서 7이 출력되고
console.log의 리턴값인 undefined가 콘솔에 찍히게 된다.