우리 기억은 undefined보다는 null하기를 바라

Notice

Recent Posts

Recent Comments

Link

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

LittleDeveloper

우리 기억은 undefined보다는 null하기를 바라 본문

javascript

우리 기억은 undefined보다는 null하기를 바라

lemonjelly 2023. 3. 6. 16:53

undefined는 지양해주세요.

우테코 로또 미션을 수행하면서 1단계, 2단계 모두 변수에 undefined를 할당하는 코드에 지적을 받았었다.
undefined는 지양하고, 필요하다면 null을 사용하라는 리뷰 코멘트가 있었는데..
undefined는 대체 무엇이며, 왜 지양해야 하고, 또 null과는 어떤 차이가 있는지 궁금했다.
아래의 포스팅에서 자세히 알아보자!

이 포스트를 읽기 전, undefined과 null의 차이에 대해 명확하게 말할 수 있는지 확인해볼까요?

undefined란?
undefined를 지양해야 하는 이유는?
null 이란?
null이 undefined과 다른 점은?

이번 포스트에서는 각 질문에 대해 해답을 하나씩 알아볼게요!

이미지 출처: https://yahma25.github.io/WIL/undefined-and-null/

먼저 null과 undefined의 차이를 쉽게 알려주는 짤 하나를 볼게요. 어떤 차이인지 대충 감이 오시나요?

Non-zero value는 휴지 걸이에 휴지가 꽂혀있고,
zero는 휴지 걸이에 빈 휴지가 꽂혀있고,
null은 휴지 걸이만 덩그러니 있네요.
마지막으로 undefined는.. 휴지도 휴지걸이도… 아무것도 없는 ‘백지 상태’네요. ~~(텅~)~~

✔undefined

undefined는 변수를 선언했지만 ‘값이 할당되지 않은 상태’를 나타내는, JavaScript의 원시 값입니다.

🧐원시 값(원시 자료형)이란? → 객체가 아니면서 메서드도 가지지 않는 데이터입니다. (원시 값에는 7종류(string, number, bigint, boolean, undefined, symbol 그리고 null)가 존재합니다)

아래의 예시 코드로 undefined가 정의되는 경우를 알아볼까요?

let paper;
console.log(paper); // undefined

Array나 Object에서 어떤 값을 할당하지 않은 경우에도 undefined가 할당됩니다.

let numArray = [1, 2, 3];
console.log(numArray[3]); // undefined

// 존재하지 않는 property에 접근하는 경우
const name = {
  first: 'jero',
  last: 'kang'
};
console.log(name.full); // undefined

또 함수에서 반환하는 값이 없는데, 어떤 값을 할당하기 위해 그 함수가 호출된 경우에도 undefined가 할당됩니다.

let add = (a,b) => {
  let c = a+b;
// no return statement
}let sum = add(2,3);
console.log(sum); 
// Output: undefined

그렇다면, 혹시 개발자가 undefined를 직접 변수에 할당하는 경우가 있을까요?

⁉undefined를 지양해야 하는 이유?

개발자가 변수에 undefined를 명시적으로 할당하는 것은 가능합니다.

let paper = 1;
paper = undefined;

console.log(paper); // undefined

그러나.. 위와 같이 undefined를 변수에 직접 할당하는 것은 권장하지 않습니다.
undefined는, ‘값이 할당되지 않은 변수의 초기값’라는 의미의 예약어로 남겨둡시다.
- function이라는, 함수를 뜻하는 예약어가 있지만, 이것을 변수명으로 잘 쓰진 않죠..
  - function을 변수명으로 쓴다면, 본디 JS에서 정의하는 function의 의미(함수로서의 의미)와 개발자가 별도로 정해준 function의 의미(변수명으로서의 의미)가 충돌하여 치명적인 에러가 발생할 수 있습니다.
- 이렇게 가능할 수는 있지만, 본래의 의미(예약어의 의미)를 위해 undefined를 사용하는 것을 지양합시다!
undefined를 부적절하게 사용한 또 하나의 예시를 살펴볼까요?

class exampleModel {
	#model = undefined;
	#view = undefined;
}

위 코드에서 model이라는 필드 인스턴스에 undefined를 할당하려는 의도는 무엇이었을까요?

아마 model이라는 필드를 ‘비어있는’ 또는 ‘알 수 없는’ 값으로 바꾸려는 의도일 거예요.
따라서 undefined 대신, null을 변수에 할당하여 의도에 맞는 원시값을 지정해주어야 해요.

✔null

null 이라는 단어를 처음 들었을 때 드는 생각은, '아무것도 없는 상태' 일 거예요.

맞습니다! 정확히는, null은 JS의 원시값 중 하나로, '어떤 값이 의도적으로 비어있음'을 뜻해요. (휴지 걸이에 휴지가 비어 있는 상태, 아무것도 꽂혀 있지 않은 상태죠.)

null은 아래의 경우에 쓰이는 원시값입니다.
1. 존재하지 않는 값
2. 비어 있는 값
3. 알 수 없는 값
즉, null은 어떤 값을 담기 전 변수를 초기화하기 위해 주로 사용됩니다.
- 개발자의 입장에서, 명시적으로 값의 부재를 나타내고 싶다면 항상 null 을 사용하는 것이 바람직합니다!

let paper = null;

console.log(typeof paper === null); // false

console.log(paper === null); // true

아직 null 과 undefined 차이가 딱 와닿지 않으신가요? 이어서 둘의 차이점을 좀 더 비교해볼게요.

🧐undefined vs null

undefined와 null은 등록, 저장 여부의 차이입니다.
- null은 값은 값인데 ‘비어있는 값’이 등록하는데 쓰이고,
- undefined는 등록도 되어 있지 않고 초기화도 되지 않은 것입니다.

undefined는 미리 선언된 전역변수(전역 객체의 프로퍼티)이며, null은 선언 및 등록을 위한 키워드입니다.

또 null 값은 대체로 Object 변수를 초기화하는데 많이 사용된답니다.

// Number 변수 초기화
let data1 = 0;

// String 변수 초기화
let data2 = "";

// Boolean 변수 초기화
let data3 = false;

// Object 변수 초기화
let data4 = null;

여기서 잠깐!

아래의 2개 코드는 각각 출력이 어떻게 될까요?

console.log(undefined == null);
console.log(undefined === null);

정답은 true, false 입니다.
프로그래밍 요구사항 중에 ‘===만을 사용할 것’ 이라는 요구사항 기억나시나요?
- x == undefined 는, x가 null인지도 체크합니다. 그런데 x가 오직 undefined 와 같은지를 알고 싶었다면, 우리 의도와는 다른 결과가 나오게 되는 것이죠. (x == undefined 일 때, x가 null이라면 undefined와 같다는 결과가 나오기 때문)
- 따라서 보통의 균등 연산자(==)보다는 엄격한 균등 연산자(===)를 사용해야 합니다.

우리 기억은 undefined보다 null하길 바라

맨 처음에 언급했던 짤을 기억하시나요?
이번 포스트를 정리하면서, 우리 뇌가 기억하는 방식과 JS의 데이터 할당 방식이 비슷하다는 생각이 들더군요.
학생 때 어디서 들었던 얘기로는, 인간은 매일 아침에 일어나면 어제 배운 지식의 30퍼센트 정도밖에 기억을 하지 못한다고 하더라구요. ~~(카더라 라서 정확하지 않음)~~
우리가 공부하는 것이 내일 아침에 일어났을 때 일부분이라도 살아있기를..
- 휴지의 의미와 용도(지식의 전체)는 것에 대해 공부했으면, 적어도 지식의 일부(휴지걸이)에 대해서 떠올리는 아침이 되었으면 좋겠네요.
- 그러려면 무한 복습만이 답이겠죠..?
- 우테코 5기 여러분들은 모두 지식을 자신의 것으로 만드는 하루하루가 되었으면 좋겠네요! 오늘도 화이팅😄👍