[프론트엔드 면접 질문] 자바스크립트 null과 undefined 차이점은?

/* 잡솔 시작

국비 교육이 점점 끝나간다. 6개월 도대체 어떻게 버티나, 뭔 6개월이나 배우나 하는데 막상 끝날 시간이 코앞으로 다가오니깐 와...... 도대체 뭘 배웠나 싶고 포폴은 왤케 끝나질 않는건지..... 하루종일 VScode 붙잡고 낑낑대고 있다...ㅠ0ㅠ 나 일할 수 있는거 맞니.... 이력서도 다시 써야하고 웹 포트폴리오도 빨리 완성해야 하는데 아직 할 작업이 많이 남아서 ㅠㅠ 큰일이다. 담주면 바로 수료인데 흑흑. 

이력서도 아직 제대로 안썼지만 일단 모의 면접이라도 먼저 준비해볼까 싶어서 구글링을 하는데, 프론트엔드 면접질문 웹사이트가 있었다. 프론트엔드 준비하시거나 이직하시는 분들에게 완전 짱짱인 웹사같다. 좀 오래된거 같긴한데 뭐 질문이야 거기서 거기겠찌. 사이트는 아래 참고.

출처 : https://h5bp.org/Front-end-Developer-Interview-Questions/questions/javascript-questions/

[ front-end-Developer Interview Question ]

h5bp.org/Front-end-Developer-Interview-Questions/questions/javascript-questions/

그래서 하루에 몇 번씩 들여다보고 모르는 건 구글링해서 면접 시뮬레이션 해보는데 아예 다른 직종이다보니 질문이 너무 생소하기도 하고 기술적인 부분이 많아서 말로 하기가 넘 힘들었다 ㅠ.ㅠ 그래서 기술 study 카테고리 만들면서 정리하려고 한건데 학원에 치여 제대로 하지도 못하넴;;; 암튼 최근에 자바스크립트 책도 샀겠다, 면접질문에도 있던 자바스크립트의 null과 undefined 차이를 알아보자. 

잡솔 끝 */

코딩을 하다보면 두근거리는 마음으로 console창을 찍어보지만, null이 뜨거나 undefined라고 빨갛게 뜨는 문자를 볼 수 있다. 일단 짜증이난다. 뭐가 또 없다는거얏!!!!!!!!! 

 

 

Null 사랑 하지 않아.................

일단 null과 undefined를 그대로 해석하자면 빈값, 없는 값이라고 볼 수 있다. 그러나 두 가지는 아주 큰 차이를 가지고 있다. null의 경우 비어있는, 존재하지 않는 값이다. 즉 값이 없다는 것이고 보통 변수를 지정하지 않았을 때 나타난다. 다만 typeof 로 자료형을 확인하면 object를 반환하는데 자바스크립트 기존이슈라서 나타나는 것이지, null이 객체형은 아니다. 존재하지만 값이나 자료형이 존재하지 않기 때문에 해당 변수가 어떠한 객체도 가리키고 있지 않을 때 표시가 된다. 

크롬 콘솔창에 찍어봄. undefined과 null값이 나오는 차이

그렇다면 undefined의 경우 변수가 정의 되었으나(var value;) 아무런 값도 할당 받지 않은 상태를 말한다. 함수에서 값을 반환하지 않았거나 또는 변수에 어떠한 값도 넣지 않았을 때 반환이 된다. 둘다 타입이 object로 반환이 되기 때문에 ==동등연산자 (null==undefined)는 true라고 나오지만, 일치연산자의 경우(null===undefined) 서로 자료형이 다르기 때문에 false로 반환이 된다. 

간단하게 말하면, "둘다 값이 없는 건 맞지만 자료형 자체가 달라서 완전히 일치하지는 않는다."

여기서 자료형은 원시타입 자료형으로 숫자형, 문자열, 불린, 기호, null, undefined로 나누어 볼 수 있다. 변수에 할당된 값의 유형을 말하는데, 자바스크립트에서는 이러한 원시타입 자료형과 참조타입으로 변수에 할당된 값 유형을 나누고 있다. 나머지는 다시 정리해야지. 

무튼 null과 undefined 차이점을 알듯 모를듯 알거같다. 안나오는게 젤 좋다는게 결론이다.