1. 값
1-1. 값이란?
값은 상태를 구성하는 가장 기본적인 데이터 단위이고, 상태는 값들이 모여서 이루는 프로그램이나 컴포넌트의 현재 상황이다.
상태에 대해서는 다음에 자세히 정리해보도록 하고 지금은 값에 대해서 좀 더 자세하게 알아보자.
자바스크립트에서는 리터럴이란 값의 표기법을 사용해서 변수에 값을 주입한다.
자바스크립트에서 값은 크게 원시 타입과 객체 타입으로 분류되고 그 안에서도 다양한 타입의 값들로 분류된다.
1-2. null과 undefined
코드를 작성하다보면 반드시 접하게 되는 원시타입의 값들이다.
나도 지금까지는 막연하게 둘 다 '없음'이라고 생각해왔지만 둘의 정확한 정의와 차이점, 올바른 사용 시점에 대해서 하나도 모르고 사용해왔다.
그래서 여기서는 null을 사용하고 저기서는 undefined를 사용하는 등 코드의 통일성도 떨어졌는데 이번 기회에 한 번 알아보고자 한다.
우선 이해가 쉽도록 각가의 정의를 내려보자
- undefined : 객체의 속성이 존재하지 않는 등의 경우에 자동으로 할당되는 값
- null : 개발자가 의도적으로 값이 없음을 할당한 경우에 사용되는 값
그렇다면 어떤걸 사용해야하는 걸까?
첫 번째 관점은 효율성이다.
undefined는 정의를 내렸던 것처럼 변수는 존재하지만 값이 존재하지 않는 것이다. 즉 값을 담을 그릇조차 없기 때문에 차지하는 메모리 용량이 매우 작다.
반면에 null은 의미만 '없다'일 뿐이지 변수에 할당 된 값은 존재하기 때문에 undefined에 비해 차지하는 메모리 용량이 크다.
예시로 자바에서 reference 변수 같은 경우 32비트 JVM 기준으로 4바이트가 할당되게 되는데 이는 어디까지나 상대적인 수치일 뿐이고 실제로 체감이 될 정도로 큰 차이라고 보기는 어렵다.
📌 자바스크립트의 경우에는 변수가 컴파일 시점이 아닌 런타임 시점에 동적으로 할당되기 때문에 환경에 따라 변수의 크기가 달라질 수 있어 메모리 용량을 정확히 알 수 없다.
참조 : 효율성의 관점
두 번째 관점은 의미의 관점이다.
개발자가 null이나 undefined를 값으로 작성한다는 말은 없음을 표현하기 위해서 작성할 것이다.
이때 undefined를 사용하게 되면 의미적으로 모순이 발생하게 된다.
let x;
let y = undefined;
console.log(foo); // undefined
console.log(bar); // undefined
let obj1 = {};
let obj2 = {prop: undefined};
console.log(obj1.prop); // undefined
console.log(obj2.prop); // undefined위에 코드 예시를 보면 값과 속성을 할당하지 않은 변수에서도 undefined가 출력되고 undefined를 할당한 값에서도 undefined가 출력된다.
undefiend를 할당한 변수는 분명 개발자가 의도적으로 값이나 속성이 없음이라는 의미로 할당한 것인데 프로그램 상에서 보면 아무런 값이나 속성을 할당하지 않은 것과 의미가 같아진다.
참조 : 의미의 관점
효율성의 관점에서 본다면 조금이나마 이득을 취하기 위해서 undefined를 사용하는게 맞겠지만 나는 의미적으로 봤을 때 undefiend를 사용하면 분명 의도와 다르게 코드가 해석되거나 오류를 찾는데 어려움이 생길 수 있을거라고 생각하기 때문에 null을 사용하는게 더 안전한 방법이라고 생각한다.
null을 원시 타입이라고 소개했지만
typeof null의 결과는object가 나오게 된다.
그 이유는 초기의 설계 실수 즉, 공식적인 언어 버그다.
자바스크립트가 처음 만들어질 때, 값들을 메모리 상에서 관리할 때 null이 객체와 유사하게 취급되었기 때문에 생긴 문제인데 이후 사양이 확정되면서 수정하지 못하고 그대로 유지된 것이다.
하지만 null은 값 자체를 나타내며 참조가 아닌 값 자체가 변수에 할당되기 때문에 ECMAScript에 null은 원시 타입으로 정의되어 있다.
2. 값 VS 참조
자바스크립트의 특징 중에 하나는 값을 할당하거나 전달할 때 값 그 자체를 할당,전달할지 아니면 값의 참조를 할당,전달할지를 개발자가 선택할 수 있는 문제가 아니라는 것이다.
이 방식을 기준으로 원시 타입과 객체 타입이 구분되어있고 원시 타입의 경우에는 값이 복사되어 할당/전달되고 객체 타입의 경우에는 값의 참조(주소)가 할당/전달된다.
예시를 통해서 좀 더 자세하게 알아보자.
// 원시 타입 예시
let name = "홍길동";
let yourName = name;
name = "임꺽정";
console.log(name); // "임꺽정"
console.log(yourName); // "홍길동"
//객체 타입 예시
let address = {
street : "종로구 청와대로 1",
city : "서울특별시",
country : "대한민국"
};
let yourAddress = address;
address.street = "서울특별시 영등포구 의사당대로 1";
console.log(yourAddress.street) // "종로구 서울특별시 영등포구 의사당대로 1"위에 예시를 보면 알겠지만 원시 타입의 경우 기존 변수(name)에 할당 된 값을 변경해도 새로운 변수(yourName)의 값은 변화가 없다.
반면에 객체 타입의 경우 기존 객체의 street 속성을 변경했더니 yourAddress의 street 속성의 값도 변경되었다.
나는 코드를 작성하면서 대부분 let의 사용을 지양하고 const 사용을 지향하다 보니 선언한 변수를 직접적으로 수정하는 일이 거의 없었다.
그래서 위의 내용을 의식하면서 코드를 작성했던적이 없었고 문제도 크게 없었지만 그래도 둘의 차이는 확실히 알아두고 혹시라도 오류가 발생하거나 변수를 직접적으로 변경할 일이 생긴다면 주의해야겠다.
