1.2.2 특수형: 비어있음(null), 정의되지않음(undefined) - 빈 상태를 나타내는 두 가지 특별한 값
📘 1.2.2 특수형: 비어있음(null), 정의되지않음(undefined) - 빈 상태를 나타내는 두 가지 특별한 값
고요한 아침, 우리는 지난 시간에 Number, String, Boolean이라는 세 가지 기본 값을 배웠습니다. 이들은 모두 구체적인 내용을 가지고 있는 값들이었지요.
그런데 오늘은 조금 특별한 이야기를 들려드릴 것입니다. 바로 "아무것도 없는 상태"에 대한 이야기입니다. 여러분, 빈 상태도 사실은 두 가지 종류가 있다는 걸 알고 있었나요? 자바스크립트 세상에는 null과 undefined라는 두 가지 특별한 "빈 상태" 친구들이 있습니다. 둘 다 비어있지만, 그 이유와 의미가 완전히 다릅니다.
🧠 새로운 단어들과 친해지기
null과 undefined를 이해하는 데 도움이 되는 쉬운 단어들을 알아보겠습니다.
| 단어 | 뜻 |
|---|---|
| null | "일부러 비워둔 상태"를 나타내는 특별한 표시입니다. |
| undefined | "아직 정하지 않은 상태"를 나타내는 자동 표시입니다. |
| 특수형 | 일반적인 값이 아닌 특별한 의미를 가진 빈 상태들입니다. |
null은 "일부러 비워뒀습니다"를 뜻하고, undefined는 "아직 뭘 넣을지 정하지 않았습니다"를 뜻합니다. 둘 다 "비어있음"을 나타내지만 그 이유가 완전히 다릅니다.
✨ 두 가지 특별한 빈 상태 알아보기
이 두 특별한 빈 상태는 자바스크립트에서 "아무것도 없는 상태"를 나타내는 서로 다른 방법들입니다. 각각이 언제, 왜 나타나는지 이해하면 프로그래밍이 훨씬 명확해집니다.
null은 프로그래머가 일부러 "이 변수는 비어있습니다"라고 설정한 특별한 표시입니다. 마치 깨끗하게 정리된 교실 사물함에 "현재 사용하지 않음"이라는 푯말을 붙여놓는 것과 같습니다. 개발자가 명확한 의도를 가지고 "여기에는 지금 아무것도 없다"고 표현하고 싶을 때 사용합니다.
undefined는 자바스크립트가 자동으로 "아직 정해지지 않았습니다"라고 표시한 상태입니다. 변수를 만들었지만 아직 무엇을 넣을지 정하지 않았을 때, 또는 존재하지 않는 것에 접근하려고 할 때 나타납니다. 개발자가 직접 설정하는 것이 아니라 자바스크립트가 자동으로 "아직 모르겠습니다"라고 알려주는 신호입니다.
이 둘의 가장 중요한 차이점은 만들어진 의도입니다. null은 개발자의 의도적인 선택이고, undefined는 자바스크립트의 자동적인 표시입니다. 또한 이 두 값은 각각 다른 특성을 가지고 있어서 서로 다른 방식으로 동작합니다.
온화한 비유: 두 가지 종류의 빈 사물함
null과 undefined를 더 쉽게 이해하기 위해 두 가지 종류의 빈 사물함 이야기로 설명해보겠습니다.
여러분의 교실에 두 개의 빈 사물함이 있다고 상상해보세요.
undefined 사물함 📭은 새 학기가 시작되어서 아직 주인이 정해지지 않은 사물함입니다. 사물함은 준비되어 있지만 "아직 누구 것인지 모르겠습니다"라는 상태입니다. 선생님도 학생들도 아직 이 사물함에 누가 물건을 넣을지 정하지 않았습니다. 이는 자바스크립트가 자동으로 "이 변수는 아직 비어있습니다"라고 표시해둔 것과 같습니다. 특별히 누군가가 뭔가를 한 것이 아니라, 그냥 자연스럽게 비어있는 상태인 것입니다.
null 사물함 📪은 조금 다릅니다. 원래는 누군가가 사용하던 사물함이었는데, 그 학생이 전학을 가고 나서 선생님이 모든 물건을 정리하고 "현재 이 사물함은 사용하지 않습니다"라는 명확한 표시를 붙여둔 상태입니다. 이는 프로그래머가 직접 "이 변수는 의도적으로 비워뒀습니다"라고 설정한 것입니다. 명확한 의도를 가지고 비운 상태인 것입니다.
둘 다 빈 사물함이지만, undefined 사물함은 "아직 준비 중입니다"라는 의미이고, null 사물함은 "의도적으로 비워두었습니다"라는 의미입니다!
🎯 왜 두 가지 빈 상태를 알아야 할까요?
여러분이 궁금해할 것입니다. "왜 빈 상태가 두 종류나 있어야 하나요?"
첫 번째 이유는 빈 상태의 이유를 명확히 구분하기 위해서입니다. "아직 정하지 않았습니다"와 "일부러 비워뒀습니다"는 완전히 다른 상황이거든요. 예를 들어, 사용자가 아직 프로필 사진을 설정하지 않았을 때와 의도적으로 프로필 사진을 삭제했을 때를 구분할 수 있습니다.
두 번째로는 프로그램의 상태를 정확히 파악하기 위해서입니다. undefined가 나타나면 "아, 여기서 값을 설정하는 걸 깜빡했구나" 또는 "아직 준비가 안 됐구나"를 알 수 있고, null이 나타나면 "여기는 의도적으로 비워둔 것이구나"를 알 수 있습니다.
세 번째는 문제를 쉽게 찾고 해결하기 위해서입니다. 예상하지 못한 undefined가 나타나면 개발자가 실수로 값을 설정하지 않았다는 신호가 될 수 있습니다.
마지막으로 빈 상태 확인하기가 정말 유용합니다. 값이 있는지 없는지를 판단하여 프로그램이 다르게 동작하도록 만들 수 있거든요.
⚙️ 두 가지 빈 상태 사용법 배우기
null과 undefined의 기본적인 사용법과 확인 방법을 알아보겠습니다.
null 사용법:
let emptyValue = null; // 일부러 비운 변수를 만들어요undefined가 나타나는 상황들:
let notSetYet; // undefined (아직 값을 정하지 않았을 때)값 자체로 구별하는 방법:
console.log(emptyValue); // null이 출력돼요
console.log(notSetYet); // undefined가 출력돼요🧪 직접 해보면서 배우기
이제 실제 예시를 통해서 null과 undefined가 어떻게 동작하는지 자세히 살펴보겠습니다.
🔹 첫 번째 예시: null과 undefined의 기본 사용법 경험해보자
첫 번째로는 null과 undefined가 어떻게 생성되고 사용되는지 기본적인 과정을 알아보겠습니다.
// undefined - 아직 값을 정하지 않은 변수예요
let studentScore; // 아직 시험 점수를 정하지 않았어요
console.log(studentScore); // undefined가 나타나요
// null - 일부러 비운 변수예요
let bestFriend = null; // 지금은 가장 친한 친구가 없다고 설정했어요
console.log(bestFriend); // null이 나타나요
// 나중에 값을 정해줄 수 있어요
studentScore = 95; // 드디어 시험 점수가 나왔어요!
bestFriend = "수민"; // 새로운 가장 친한 친구가 생겼어요!
// 변경된 값들을 확인해봐요
console.log(studentScore); // 95가 나타나요
console.log(bestFriend); // "수민"이 나타나요이 과정을 차근차근 설명해드리겠습니다. 먼저 undefined 변수를 만들 때는 값을 설정하지 않습니다. 그러면 자바스크립트가 자동으로 "아직 정하지 않았습니다"라는 의미로 undefined를 넣어줍니다. 그다음 null 변수를 만들 때는 우리가 직접 "지금은 비워둘 것입니다"라는 의미로 null 값을 설정합니다. 각각의 빈 상태를 확인한 후, 나중에 실제 값을 넣어서 변경된 상태를 확인해봅니다. 이를 통해 두 특수값이 모두 임시적인 상태이며, 나중에 구체적인 값으로 변경될 수 있다는 것을 알 수 있습니다.
🔹 두 번째 예시: 두 빈 상태의 차이점 명확히 하기
두 번째로는 null과 undefined의 근본적인 차이점을 명확히 확인해보겠습니다.
// 다양한 빈 변수들을 만들어봐요
let a; // undefined (자동으로 생긴 빈 상태)
let b = undefined; // undefined (직접 만든 빈 상태)
let c = null; // null (일부러 비운 상태)
// 실제 값들을 하나씩 확인해봐요
console.log("변수 a:", a); // 변수 a: undefined
console.log("변수 b:", b); // 변수 b: undefined
console.log("변수 c:", c); // 변수 c: null
// 각 변수가 어떻게 만들어졌는지 설명해봐요
console.log("a는 자바스크립트가 자동으로 undefined를 설정했어요");
console.log("b는 우리가 직접 undefined를 설정했어요");
console.log("c는 우리가 의도적으로 null을 설정했어요");이 예시에서 중요한 점은 각 변수가 어떻게 빈 상태가 되었는지의 차이입니다. 세 가지 방식으로 빈 변수를 만든 후, 각각의 값을 확인해봅니다. 비록 a와 b 모두 undefined이지만, a는 자바스크립트가 자동으로 설정한 것이고 b는 우리가 직접 설정한 것입니다. c는 우리가 명확한 의도를 가지고 null로 설정한 것입니다. 이런 차이를 이해하면 코드의 의도를 더 명확하게 파악할 수 있습니다.
🔹 세 번째 예시: 빈 상태인지 확인하는 간단한 방법
세 번째로는 변수가 빈 상태인지 아닌지를 확인하는 방법을 알아보겠습니다.
// 다양한 상태의 변수들을 만들어봐요
let emptyBox1 = undefined; // 아직 모르는 상태
let emptyBox2 = null; // 일부러 비운 상태
let fullBox = "내용물"; // 실제 값이 있는 상태
// 각 변수의 상태를 출력해서 확인해봐요
console.log("emptyBox1:", emptyBox1); // emptyBox1: undefined
console.log("emptyBox2:", emptyBox2); // emptyBox2: null
console.log("fullBox:", fullBox); // fullBox: 내용물
// 각 변수가 어떤 상태인지 설명해봐요
console.log("emptyBox1은 아직 정해지지 않은 상태입니다");
console.log("emptyBox2는 의도적으로 비운 상태입니다");
console.log("fullBox는 실제 값이 들어있는 상태입니다");이 예시는 세 가지 다른 상태의 변수를 비교해서 보여줍니다. undefined와 null 변수, 그리고 실제 값이 있는 변수를 만든 후, 각각의 값을 직접 출력해서 차이점을 확인합니다. 이를 통해 빈 상태와 실제 값이 있는 상태의 차이를 명확히 구별할 수 있고, 각 상태가 가지는 의미도 이해할 수 있습니다.
🔄 두 빈 상태 사용하는 순서 정리하기
지금까지 학습한 내용을 바탕으로 null과 undefined의 사용 과정을 정리해보겠습니다.
첫 번째 단계는 변수 만들기 과정입니다. 변수를 만들 때 값을 주지 않으면 자바스크립트가 자동으로 undefined를 넣어줍니다. 이는 우리의 의도와 관계없이 일어나는 자연스러운 과정입니다.
두 번째 단계는 의도적으로 비우기 과정입니다. 명확히 비우고 싶을 때는 null을 사용합니다. 이는 우리의 명확한 의도를 표현하는 방법입니다.
세 번째 단계는 상태 확인하기 과정입니다. console.log로 실제 값을 출력해서 null인지 undefined인지 직접 확인할 수 있습니다.
마지막으로 가장 중요한 것은 의미 이해하기 과정입니다. 같은 빈 상태라도 undefined는 "아직 정하지 않음"이고 null은 "의도적으로 비움"이라는 서로 다른 의미를 가진다는 것을 기억해야 합니다.
🧠 자주 하는 실수와 주의할 점
null과 undefined를 사용할 때 친구들이 자주 하는 실수들을 알아보고, 어떻게 피할 수 있는지 함께 배워보겠습니다.
❌ 실수 1: null과 undefined를 글자로 만들어버리기
let empty1 = "null"; // 이건 글자 "null"이에요!
let empty2 = "undefined"; // 이건 글자 "undefined"예요!
let empty3 = null; // 이게 진짜 null이에요
let empty4 = undefined; // 이게 진짜 undefined예요이런 실수가 생기는 이유는 따옴표를 붙이면 모든 것이 글자가 되어버리기 때문입니다. "null"과 "undefined"는 그냥 글자일 뿐, 특별한 의미를 가진 빈 상태가 아닙니다. 진짜 null과 undefined는 따옴표 없이 써야 합니다.
❌ 실수 2: undefined를 일부러 값으로 설정하기
let value = undefined; // 가능하지만 권장하지 않아요
let value = null; // 일부러 비울 때는 이렇게 하는 게 좋아요undefined는 자바스크립트가 자동으로 설정하는 값입니다. 일부러 빈 상태로 만들고 싶다면 null을 사용하는 것이 더 명확합니다.
❌ 실수 3: 빈 상태의 의미를 구분하지 않기
// 이 두 상황은 의미가 달라요
let userName1; // 아직 사용자가 이름을 입력하지 않음
let userName2 = null; // 사용자가 의도적으로 이름을 비움같은 빈 상태라도 그 이유와 의미가 다르다는 것을 이해하고 적절히 구분해서 사용해야 합니다.
📦 기본 연습문제
이제 배운 내용을 연습 문제를 통해서 확실히 익혀보겠습니다. 손으로 직접 써보고 실행해보는 시간입니다. 마치 새로운 악기를 배울 때 계속 연주해봐야 손에 익는 것처럼, 코딩도 직접 써보고 실행해봐야 우리 것이 됩니다. 천천히, 하나씩 해보겠습니다.
연습문제 1: undefined와 null을 각각 가진 변수를 만들어보자
// undefined - 아직 값을 정하지 않은 변수를 만들어요
let notDecided;
// null - 일부러 비운 변수를 만들어요
let intentionallyEmpty = null;
// 각 변수의 상태를 확인해봐요
console.log(notDecided); // undefined가 나타나요
console.log(intentionallyEmpty); // null이 나타나요이 연습을 통해 두 특수값을 만드는 기본 방법을 익힐 수 있습니다.
연습문제 2: 두 빈 상태의 차이점을 직접 확인해보자
// 두 가지 빈 변수를 만들어요
let a = undefined;
let b = null;
// 각각의 값을 출력해봐요
console.log("undefined 변수:", a); // undefined 변수: undefined
console.log("null 변수:", b); // null 변수: null
// 차이점을 설명해봐요
console.log("undefined는 아직 정하지 않은 상태입니다");
console.log("null은 의도적으로 비운 상태입니다");이 문제는 두 특수값의 차이점을 직접 경험하는 데 도움이 됩니다.
연습문제 3: 다양한 상태의 변수들을 비교해보자
// 서로 다른 상태의 변수들을 만들어요
let test1 = null; // 일부러 비운 변수
let test2 = undefined; // 아직 정하지 않은 변수
let test3 = "안녕"; // 실제 값이 있는 변수
// 각각의 값을 출력해서 차이점을 확인해봐요
console.log("test1:", test1); // test1: null
console.log("test2:", test2); // test2: undefined
console.log("test3:", test3); // test3: 안녕이 연습문제를 통해 빈 상태와 실제 값의 차이를 직접 확인할 수 있습니다.
🤔 연습문제
기본 연습을 마쳤다면, 이제 조금 더 깊이 있는 문제들을 통해 null과 undefined에 대한 이해를 확인해보겠습니다. 답을 바로 찾으려 하지 마시고, 천천히 생각해보는 시간을 가져보세요. 때로는 틀려도 괜찮습니다. 그것도 배움의 한 과정이니까요.
문제 1: undefined가 나오는 경우 찾기
다음 중 undefined가 나오는 경우는?
A) let x = null;
B) let y;
C) let z = "undefined";
D) let w = 0;
정답: B
해설: 값을 정하지 않고 변수만 만들면 자바스크립트가 자동으로 undefined를 넣어줍니다. A는 일부러 null을 넣은 것이고, C는 글자 "undefined"이며, D는 숫자 0입니다.
문제 2: 올바른 빈 상태 만들기
다음 코드에서 어떤 값들이 출력될까요?
let a;
let b = null;
console.log(a);
console.log(b);정답: 첫 번째는 undefined, 두 번째는 null
해설: 값을 정하지 않은 변수는 자동으로 undefined가 되고, 명시적으로 null을 설정한 변수는 null이 출력됩니다.
🔄 이전 단원 복습하기
null과 undefined를 잘 이해했다면, 이제 저번에 배운 기본 데이터 타입에 대해서도 기억하고 있는지 확인해볼까요?
복습문제 1: 기본 데이터 타입 기억하기
자바스크립트의 세 가지 기본 데이터 타입은 무엇인가요?
정답: Number(숫자), String(글자), Boolean(참/거짓)
해설: 이 세 가지가 가장 기본적인 데이터 타입이고, 오늘 배운 null과 undefined는 특수한 빈 상태를 나타내는 값들입니다.
복습문제 2: 값의 종류 구별하기
다음 중 문자열인 것은?
A) "123" B) 123 C) true D) null
정답: A
해설: 따옴표로 감싼 "123"은 문자열입니다. 123은 숫자, true는 불린, null은 특수한 빈 값입니다.
💡 심화 복습 문제
이제 정말 깊이 있게 null과 undefined를 이해했는지 확인해보는 문제들입니다.
심화문제 1: null과 undefined의 차이점 설명하기
null과 undefined의 차이점을 초등학생에게 설명한다면?
정답: undefined는 "아직 정하지 않은 빈 상태", null은 "의도적으로 비운 상태"입니다. 둘 다 비어있지만 비게 된 이유가 다릅니다.
해설: 이 차이를 이해하면 빈 상태의 의미를 더 명확하게 파악할 수 있습니다.
심화문제 2: 올바른 빈 값 사용법
다음 중 올바른 사용법은?
A) let name = "undefined";
B) let name = undefined;
C) let name = null;
D) let name;
정답: C와 D가 적절합니다.
해설: 일부러 비우고 싶을 때는 null(C)을, 아직 정하지 않았을 때는 값을 주지 않아서 자동으로 undefined가 되도록 하는 것(D)이 좋습니다. A는 문자열이고, B는 가능하지만 권장하지 않습니다.
심화문제 3: 빈 값 확인하는 방법
변수가 빈 상태인지 확인하는 방법을 써보세요.
정답: console.log로 값을 직접 출력해서 null 또는 undefined인지 확인하기
해설: 직접 값을 확인하는 것이 가장 확실한 방법입니다.
심화문제 4: 적절한 값 선택하기
다음 상황에서 어떤 값을 사용하는 게 좋을까요?
"사용자가 아직 프로필 사진을 설정하지 않았을 때"
정답: null이 더 좋습니다. "의도적으로 설정하지 않았다"는 의미를 명확히 할 수 있습니다.
해설: 사용자의 명확한 의도나 상태를 나타낼 때는 null이 더 적절합니다.
심화문제 5: 변수의 자동 할당 이해하기
다음 코드의 결과는?
let missingValue;
console.log(missingValue);정답: undefined
해설: 값을 정하지 않은 변수는 자동으로 undefined가 됩니다.
✅ 소단원 검토 체크리스트
이 단원에서 배운 내용들을 모두 이해했는지 확인해보겠습니다!
| 체크 항목 | 확인 |
|---|---|
| null과 undefined가 무엇인지 쉬운 말로 설명할 수 있습니다 | ☐ |
| 두 값의 차이점을 명확히 알고 있습니다 | ☐ |
| 언제 null을, 언제 undefined를 사용해야 하는지 압니다 | ☐ |
| 빈 값을 확인하는 기본 방법을 알고 있습니다 | ☐ |
| 자주하는 실수들을 피할 수 있습니다 | ☐ |
| 두 빈 상태의 의미를 구분할 수 있습니다 | ☐ |
| 적절한 상황에서 올바른 빈 값을 선택할 수 있습니다 | ☐ |
지금까지 자바스크립트의 두 가지 특별한 빈 상태, null과 undefined에 대해 자세히 알아보았습니다. 이 둘의 차이점과 올바른 사용법을 이해하면, 프로그램에서 "빈 상태"를 더 명확하고 의도적으로 표현할 수 있게 됩니다. 다음 시간에는 더 복잡한 데이터를 담을 수 있는 참조형 데이터에 대해 배워볼 예정입니다!
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.