null과 undefined는 원시타입값이고 js에서 false로 여겨져 구현 버그로 간주되는 공통점이 있다.
null == undefined하면 true이지만 엄격한 타입비교(===)를하면 false이다.
이제 차이를 정리해보고자 한다.
⛰ null
- 어떤 값이 의도적으로 비어있음을 표현하는 경우
- 해당 변수가 어떤 객체도 가리키지 않음을 의미
typeof를 해보면object로 뜬다
⬜ undefined
- 선언한 후에 값을 할당받지 않은 변수의 경우 자동으로 undefined가 할당이 된다.
- 함수가 값을 return하지 않았을 경우
typeof를 해보면undefined로 뜬다
🍖 원시타입이란?
null과 undefined는 원시타입이라고 하는데 원시타입은 무엇일까?
- 원시 값이
불변하다라고 이해할 수 있다 - string, number, boolean, undefined, null, symbol
- 메모리의 고정 크기로 원시값을 저장하고 해당 저장된 값을 변수가 직접적으로 가리키는 형태
- 재할당시 기존값이 변하는 것처럼 보여도 실제로는 새로운 메모리에 재할당한 값을 저장하고 변수가 가리키는 메모리가 달라진 것
// 문자열 메서드는 문자열을 변형하지 않음
var bar = "baz";
console.log(bar); // baz
bar.toUpperCase();
console.log(bar); // baz
// 배열 메소드는 배열을 변형함
var foo = [];
console.log(foo); // []
foo.push("plugh");
console.log(foo); // ["plugh"]
// 할당은 원시 값에 새로운 값을 부여 (변형이 아님)
bar = bar.toUpperCase(); // BAZ원시값을 직접 바꿀 수는 없지만 교체할 수는 있다
// 원시 값
let foo = 5;
// 원시 값을 변경해야 하는 함수 정의
function addTwo(num) {
num += 2;
}
// 같은 작업을 시도하는 다른 함수
function addTwo_v2(foo) {
foo += 2;
}
// 원시 값을 인수로 전달해 첫 번째 함수를 호출
addTwo(foo);
// 현재 원시 값 반환
console.log(foo); // 5
// 두 번째 함수로 다시 시도
addTwo_v2(foo);
console.log(foo); // 5위의 예시에서 addTwo()함수에 foo를 넣으면 foo값이 7로 변할 줄 알았지만 아니다. 그 이유는 아래와 같다
- Call by Value
- 인수(argument) 값을 넘길 때복사된 값을 넘긴다(원시타입이기에)
-복사된 값을 넘겨줬기에 원래의 foo값은 변동이 되지 않는다
// 객체
let foo = {a:5};
//객체 a로 접근한다
function addTwo(num) {
num.a += 2
}
function addTwo_v2(foo) {
foo += 2;
}
addTwo(foo);
console.log(foo); // 5
// 두 번째 함수로 다시 시도
addTwo_v2(foo);
console.log(foo); // 5- Call by reference
- 인수(argument)로 reference(값에 대한 참조 주소, 메모리 주소를 담고있는 변수)를 넘겨준다
- reference로 넘기면 값을 복사하지 않는다
- 복사해서 넘긴 것이 아니기에 객체 안의 값이 변한다
Thank you 알고리즘 멤버들 :)
출처: https://2ssue.github.io/common_questions_for_Web_Developer/docs/Javascript/13_undefined&null.html#undefined
https://99geo.tistory.com/69
https://velog.io/@nomadhash/Java-Script-%EA%B9%8A%EC%9D%80-%EB%B3%B5%EC%82%AC%EC%99%80-%EC%96%95%EC%9D%80-%EB%B3%B5%EC%82%AC
https://developer.mozilla.org/ko/docs/Glossary/Primitive
https://perfectacle.github.io/2017/10/30/js-014-call-by-value-vs-call-by-reference/
winwin