📘 8.3.3 예비값과 별명 사용하기 - 안전한 선물 받기와 예쁜 이름 짓기
어떤 날은 선물을 받을 때 상자가 비어있을 수도 있고, 어떤 날은 선물의 이름이 너무 길거나 어려워서 부르기 힘들 수도 있어요.
그런 순간들을 생각해보세요. 생일날 친구가 준 선물 상자를 열었는데 비어있다면 얼마나 당황스러울까요? 아니면 "초고급멀티컬러워터프루프마카펜세트"라는 긴 이름을 매번 불러야 한다면 얼마나 번거로울까요?
자바스크립트에서도 마찬가지예요. 때로는 객체나 배열에서 우리가 원하는 값이 없을 수도 있고, 속성의 이름이 너무 복잡할 수도 있죠. 오늘은 그런 상황들을 현명하게 대처하는 두 가지 방법을 배워볼 거예요.
🧠 먼저 용어를 알아볼까요?
사람들과 이야기할 때 서로 같은 말을 하고 있는지 확인하는 것이 중요하듯, 프로그래밍에서도 용어를 명확히 하는 게 필요해요.
| 용어 | 의미 |
|---|---|
| 기본값 | 값이 없을 때 대신 사용하는 미리 정한 값 |
| 별칭 | 원래 이름 대신 다른 이름으로 부르는 것 |
| 기본값 설정 | = 기호로 기본값을 정해주는 방법 |
| 이름 바꾸기 | : 기호로 다른 변수명을 정하는 방법 |
| 안전한 분해 | 값이 없어도 오류가 나지 않는 방법 |
이런 용어들을 알아두면 다른 개발자들과 소통할 때도 훨씬 수월해져요.
✨ 기본값과 별칭의 핵심 개념
기본값이란 분해할 때 값이 없으면 자동으로 사용되는 미리 준비한 값을 의미해요. 마치 약속 시간에 친구가 오지 않았을 때를 대비해서 혼자서도 할 수 있는 계획을 미리 세워두는 것과 같아요.
별칭은 원래 속성 이름 대신 다른 이름으로 변수를 만드는 것을 의미해요. 긴 이름을 짧게 줄이거나, 영어 이름을 한국어로 바꾸거나, 약어를 풀어서 이해하기 쉽게 만들 수 있어요.
이 두 기능을 함께 사용하면 안전하면서도 이해하기 쉬운 코드를 만들 수 있어요. 값이 없어서 프로그램이 멈추는 일도 없고, 복잡한 이름 때문에 코드를 읽기 어려워지는 일도 없죠.
비유로 이해하기: 학교 준비물 받기 시스템
기본값과 별칭을 더 쉽게 이해하기 위해 학교 준비물 받기 시스템에 비유해볼까요?
새 학기가 되어서 준비물을 나누어 받는 시간이 있다고 생각해보세요. 선생님이 각자에게 준비물 상자를 나누어 주는데, 이 상자에는 특별한 규칙들이 있어요.
기본값 규칙: 만약 상자 안에 여러분이 원하는 준비물이 없다면, 미리 정해둔 대체 준비물을 받을 수 있어요. 예를 들어, "색연필이 없으면 크레파스를 대신 받을게요"라고 미리 정해두는 거죠. 이렇게 하면 빈손으로 돌아가는 일이 절대 없어요.
별칭 규칙: 준비물의 이름이 너무 길거나 어려우면, 여러분이 부르기 쉬운 별명을 지어서 받을 수 있어요. "멀티컬러 워터컬러 페인팅 도구 세트"라는 긴 이름 대신 "물감"이라고 간단히 부르거나, "HB"라는 연필 기호를 "보통연필"이라고 친근하게 부를 수 있죠.
두 규칙을 함께 사용하기: "물감이 없으면 크레파스를 받고, 이름은 '멀티컬러세트' 대신 '그림도구'라고 부를게요"처럼 두 규칙을 동시에 적용할 수도 있어요.
프로그래밍에서도 let {멀티컬러세트: 그림도구 = "크레파스"} = 준비물상자; 이런 식으로 안전하고 이해하기 쉬운 코드를 만들 수 있답니다.
🎯 기본값과 별칭을 사용하는 이유
왜 이런 기능들을 배워야 할까요?
첫째, 프로그램이 멈추지 않아요. 값이 없을 때 undefined 때문에 오류가 나는 대신, 미리 정해둔 기본값을 사용해서 프로그램이 계속 실행될 수 있어요.
둘째, 코드를 읽기 쉬워져요. bgmVol이라는 약어 대신 배경음악음량이라는 명확한 이름을 사용하거나, 반대로 긴 이름을 짧은 별명으로 바꿔서 코드를 깔끔하게 만들 수 있어요.
셋째, 다른 사람이 만든 코드를 쉽게 사용할 수 있어요. 외부 라이브러리나 API에서 온 데이터의 속성 이름이 우리 프로젝트의 규칙과 다를 때, 별칭을 사용해서 일관성 있게 만들 수 있어요.
넷째, 방어적 프로그래밍을 할 수 있어요. "혹시 이 값이 없을 수도 있을까?"를 미리 생각해서 기본값을 준비해두면, 예상치 못한 상황에서도 안전하게 동작해요.
⚙️ 기본 문법 살펴보기
기본값과 별칭을 사용하는 기본적인 방법을 알아보겠어요.
기본값만 사용하기:
let {속성이름 = 기본값} = 객체;
let [변수 = 기본값] = 배열;별칭만 사용하기:
let {속성이름: 새로운이름} = 객체;기본값과 별칭 함께 사용하기:
let {속성이름: 새로운이름 = 기본값} = 객체;구체적인 예시:
let {name = "무명", age: userAge = 0} = person;
// name이 없으면 "무명", age를 userAge로 받되 없으면 0🧪 예제로 익혀보기
이제 실제 예제를 통해 기본값과 별칭을 어떻게 사용하는지 자세히 알아보겠어요.
🔹 예제 1: 기본값으로 안전하게 분해하기 - 친구 정보 안전 처리
첫 번째 예제에서는 기본값을 사용해서 정보가 부족한 상황을 안전하게 처리하는 방법을 배워보겠어요.
// 우리 반 친구들 정보 - 각자 가진 정보가 다름
let friend1 = {name: "철수", age: 12, hobby: "축구"};
let friend2 = {name: "영희", age: 11};
let friend3 = {name: "민수"};
let friend4 = {};
console.log("친구들 안전하게 소개하기!");
// 위험한 방법: 기본값 없이 분해하기
console.log("=== 위험한 방법 (기본값 없음) ===");
let {name, age, hobby} = friend2;
console.log("이름:", name, "나이:", age, "취미:", hobby);
// 안전한 방법: 기본값으로 분해하기
console.log("=== 안전한 방법 (기본값 있음) ===");
// 친구1 - 모든 정보 있음
let {name: name1 = "무명", age: age1 = 0, hobby: hobby1 = "독서"} = friend1;
console.log("친구1 -", "이름:", name1, "나이:", age1, "취미:", hobby1);
// 친구2 - 취미 없음 → 기본값 사용
let {name: name2 = "무명", age: age2 = 0, hobby: hobby2 = "독서"} = friend2;
console.log("친구2 -", "이름:", name2, "나이:", age2, "취미:", hobby2);
// 친구3 - 나이, 취미 없음 → 기본값들 사용
let {name: name3 = "무명", age: age3 = 0, hobby: hobby3 = "독서"} = friend3;
console.log("친구3 -", "이름:", name3, "나이:", age3, "취미:", hobby3);
// 친구4 - 모든 정보 없음 → 모든 기본값 사용
let {name: name4 = "무명", age: age4 = 0, hobby: hobby4 = "독서"} = friend4;
console.log("친구4 -", "이름:", name4, "나이:", age4, "취미:", hobby4);
console.log("모든 친구를 안전하게 소개했어요!");이 과정을 단계별로 살펴보면, 먼저 정보가 각기 다른 여러 친구 정보 객체를 만들어요. 그다음 기본값 없이 분해할 때의 위험성을 보고, 기본값을 사용해서 어떤 상황에서도 안전하게 정보를 처리하는 방법을 확인하죠.
기본값 덕분에 정보가 없어도 프로그램이 멈추지 않고 의미 있는 값으로 처리할 수 있어요.
🔹 예제 2: 별칭으로 이름 예쁘게 바꾸기 - 게임 설정 이해하기 쉽게
두 번째 예제에서는 별칭을 사용해서 복잡하거나 약어로 된 이름을 이해하기 쉽게 바꾸는 방법을 알아보겠어요.
// 게임 설정 정보 객체 - 개발자들이 약어로 만들어놨어요
let gameSettings = {
bgm: true,
sfx: false,
res: "1920x1080",
vol: 80,
lang: "ko",
fps: 60
};
console.log("게임 설정 확인하기!");
console.log("원래 설정 (약어):", gameSettings);
// 별칭으로 이해하기 쉬운 이름으로 받기
let {
bgm: 배경음악 = true,
sfx: 효과음 = true,
res: 해상도 = "1280x720",
vol: 음량 = 50,
lang: 언어 = "en",
fps: 프레임 = 30
} = gameSettings;
console.log("=== 이해하기 쉬운 설정 ===");
console.log("배경음악:", 배경음악 ? "켜짐" : "꺼짐");
console.log("효과음:", 효과음 ? "켜짐" : "꺼짐");
console.log("화면 해상도:", 해상도);
console.log("음량 크기:", 음량 + "%");
console.log("게임 언어:", 언어 === "ko" ? "한국어" : "영어");
console.log("초당 프레임:", 프레임 + "fps");
// 설정에 따른 게임 상태 메시지
if (배경음악 && 효과음) {
console.log("🎵 모든 소리가 켜져 있어요!");
} else if (!배경음악 && !효과음) {
console.log("🔇 조용한 게임 모드예요!");
}이 예제를 통해 우리는 개발자들이 사용하는 약어들을 일반 사용자가 이해하기 쉬운 한국어로 바꿀 수 있다는 걸 배워요. 또한 각 설정에 기본값을 지정해서, 설정이 없어도 게임이 정상적으로 동작하도록 만들 수 있답니다.
🔹 예제 3: 배열에서 기본값으로 안전한 시상식 - 참가자가 적어도 OK
세 번째 예제에서는 배열 분해에서 기본값을 사용해서 참가자 수에 관계없이 안전하게 시상식을 진행하는 방법을 알아보겠어요.
// 여러 대회의 참가자 현황 - 각 대회마다 참가자 수가 달라요
let contest1 = ["철수", "영희", "민수", "지수"];
let contest2 = ["하늘", "별이"];
let contest3 = ["바다"];
let contest4 = [];
console.log("🏆 안전한 대회 시상식 시스템!");
// 시상식 진행 함수
function 시상식진행(참가자목록, 대회이름) {
console.log(`\n=== ${대회이름} 시상식 ===`);
// 기본값으로 안전하게 순위 분해하기
let [
금메달 = "수상자 없음",
은메달 = "수상자 없음",
동메달 = "수상자 없음",
참가상 = "수상자 없음"
] = 참가자목록;
console.log("🥇 금메달:", 금메달);
console.log("🥈 은메달:", 은메달);
console.log("🥉 동메달:", 동메달);
console.log("🎖️ 참가상:", 참가상);
// 참가자 수에 따른 특별 메시지
let 실제참가자 = 참가자목록.length;
if (실제참가자 >= 4) {
console.log("✨ 많은 참가자가 있어서 열띤 경쟁이었어요!");
} else if (실제참가자 >= 2) {
console.log("👥 적당한 경쟁으로 즐거운 대회였어요!");
} else if (실제참가자 === 1) {
console.log("👤 혼자 참가했지만 최선을 다했어요!");
} else {
console.log("😅 아쉽게도 참가자가 없었어요...");
}
}
// 모든 대회 시상식 진행
시상식진행(contest1, "축구 대회");
시상식진행(contest2, "그림 대회");
시상식진행(contest3, "글쓰기 대회");
시상식진행(contest4, "취소된 대회");
console.log("\n🎉 모든 대회 시상식을 안전하게 마쳤습니다!");이 예제는 배열 분해에서 기본값의 진정한 힘을 보여줘요. 참가자가 몇 명이든 상관없이 시상식을 진행할 수 있고, 참가자가 없어도 프로그램이 멈추지 않아요.
기본값 덕분에 어떤 상황에서도 안전하게 처리할 수 있답니다.
🧚♀️ 이야기로 다시 배우기: 학교 용품 대여소의 현명한 시스템
지금까지 배운 내용을 재미있는 이야기로 다시 정리해볼까요?
우리 학교에는 현명한 용품 대여소가 있었어요. 이 대여소의 관리자는 정말 배려심이 깊어서 학생들이 편리하게 용품을 빌릴 수 있도록 특별한 서비스를 제공했답니다.
첫 번째 서비스: 대체 용품 시스템
학생이 원하는 용품이 떨어졌을 때, 관리자는 미리 준비해둔 대체 용품을 제공했어요.
"아, 빨간 색연필이 떨어졌네요. 대신 파란 색연필을 드릴게요! 미리 정해둔 대체 용품이에요!"
이렇게 하면 학생이 빈손으로 가는 일이 없었죠. 프로그래밍에서도 {빨간색연필 = "파란색연필"} = 용품대여소; 이런 식으로 기본값을 준비해둘 수 있어요.
두 번째 서비스: 이름표 바꾸기 시스템
대여소에는 정말 복잡한 이름의 용품들이 많았어요. "A4사이즈멀티컬러마카펜세트"같은 이름이었죠.
하지만 현명한 관리자는 학생이 이해하기 쉽도록 간단한 별명을 붙여줬어요: "이 용품은 '마카펜'이라고 부르시면 돼요!"
반대로 "2B"같은 연필 기호는 "진한연필"이라고 친근하게 설명해줬죠.
두 서비스를 함께 사용하기
가장 멋진 건, 두 서비스를 동시에 사용하는 거였어요!
"원하시는 'A4사이즈멀티컬러마카펜세트'가 떨어졌네요. 대신 '기본마카펜'을 드리고, 이름은 간단히 '마카펜'이라고 부르시면 돼요!"
프로그래밍에서도 {A4사이즈멀티컬러마카펜세트: 마카펜 = "기본마카펜"} = 용품대여소; 이런 식으로 안전하고 이해하기 쉬운 코드를 만들 수 있어요!
이 현명한 관리 시스템 덕분에 학교 용품 대여소는 항상 학생들로 붐볐답니다. 우리 코드도 이런 배려 깊은 시스템처럼 만들 수 있어요!
✏️ 연습문제로 개념 다지기
연습문제를 시작하기 전에 잠시 생각해볼까요. 여러분이 새로운 학교에 전학을 왔을 때를 떠올려보세요. 새로운 환경에서는 모든 것이 낯설고, 때로는 필요한 정보가 없을 수도 있어요. 그럴 때 미리 준비해둔 계획이나 이해하기 쉽게 설명해주는 친구가 있다면 얼마나 도움이 될까요? 프로그래밍에서도 이런 준비와 배려가 중요해요.
Ex1) 과일 정보에서 기본값을 사용해서 안전하게 분해해보자
// 과일 정보 (가격 정보가 없어요)
let fruit = {name: "사과", color: "빨강"};
// 기본값을 사용해서 안전하게 분해해보세요
let {name, color, price = 1000} = fruit;
console.log("과일:", name);
console.log("색깔:", color);
console.log("가격:", price); Ex2) 게임 설정을 별칭으로 이해하기 쉽게 받아보자
// 게임 설정 (약어로 되어 있어요)
let config = {vol: 80, bright: 70};
// 별칭을 사용해서 이해하기 쉬운 이름으로 받아보세요
let {vol: 음량, bright: 밝기} = config;
console.log("음량:", 음량);
console.log("밝기:", 밝기); Ex3) 대회 순위를 기본값으로 안전하게 처리해보자
// 대회 참가자 (2등까지만 있어요)
let winners = ["금메달", "은메달"];
// 기본값을 사용해서 안전하게 순위 분해하기
let [gold = "없음", silver = "없음", bronze = "없음"] = winners;
console.log("1등:", gold);
console.log("2등:", silver);
console.log("3등:", bronze); 🤔 심화 문제로 실력 확인하기
기본 연습을 마쳤다면, 이제 조금 더 깊이 있는 문제들을 통해 이해도를 확인해보겠어요.
Q1. 다음 코드의 실행 결과를 예상해보세요
let student = {name: "철수", age: undefined};
let {name, age = 12, grade: studentGrade = 6} = student;
console.log(name);
console.log(age);
console.log(studentGrade);정답:
- "철수"
- 12
- 6
해설: name은 "철수", age는 undefined여서 기본값 12 사용, grade 속성은 없어서 studentGrade에 기본값 6이 할당돼요!
Q2. 다음 중 올바른 별칭과 기본값 문법은?
let person = {name: "영희"};
// A) let {name, age: userAge = 20} = person;
// B) let {name, age = 20: userAge} = person;
// C) let {name, userAge: age = 20} = person;
// D) let {name, age(userAge = 20)} = person;정답: A) let {name, age: userAge = 20} = person;
해설: 별칭은 콜론(:) 앞에, 기본값은 등호(=) 뒤에 써야 해요. age를 userAge라는 이름으로 받되, 값이 없으면 20을 기본값으로 사용한다는 뜻이에요!
🧠 자주 하는 실수와 주의할 점
기본값과 별칭을 사용할 때 초보자들이 자주 하는 실수들을 미리 알아두면 더 안전한 코딩을 할 수 있어요.
❌ 실수 1: 기본값 설정 문법 헷갈리기
// 학생 정보 객체 (나이 정보가 없음)
let student = {name: "철수"};
// ❌ 틀린 방법: 등호 위치나 방법이 틀림
// let {name, age: 12} = student; // 문법 오류!
// let {name, age = undefined} = student; // 의미 없음
// ✅ 올바른 방법: = 기호로 기본값 설정
let {name, age = 12} = student;
console.log("이름:", name);
console.log("나이:", age);
// 기본값이 정말 필요한지 확인
if (age === 12) {
console.log("나이 정보가 없어서 기본값을 사용했어요.");
}기본값을 설정할 때는 = 기호를 사용하고, 의미 있는 기본값을 정해주세요!
❌ 실수 2: 별칭과 기본값 순서 바꾸기
// 책 정보 객체 (페이지 수 정보가 없음)
let book = {title: "해리포터"};
// ❌ 틀린 순서: 기본값을 별칭 앞에 쓰려고 시도
// let {title, pages = 300: pageCount} = book; // 문법 오류!
// ✅ 올바른 순서: 별칭(:) 먼저, 기본값(=) 나중에
let {title, pages: pageCount = 300} = book;
console.log("책 제목:", title);
console.log("페이지 수:", pageCount);
// 다른 예시들
let {author: bookAuthor = "미상"} = book;
console.log("저자:", bookAuthor); 별칭과 기본값을 함께 쓸 때는 별칭이 먼저, 기본값이 나중이라는 순서를 기억하세요!
❌ 실수 3: null과 undefined에 대한 기본값 이해 부족
// 다양한 상태의 데이터들
let data1 = {value: undefined};
let data2 = {value: null};
let data3 = {value: ""};
let data4 = {};
console.log("기본값 작동 테스트:");
// 기본값은 undefined와 속성이 없을 때만 사용됨
let {value: val1 = "기본값"} = data1;
let {value: val2 = "기본값"} = data2;
let {value: val3 = "기본값"} = data3;
let {value: val4 = "기본값"} = data4;
console.log("값1 (undefined였음):", val1); // "기본값"
console.log("값2 (null이었음):", val2); // null
console.log("값3 (빈 문자열이었음):", val3); // ""
console.log("값4 (속성 없었음):", val4); // "기본값"
// ✅ 올바른 이해: 기본값은 undefined와 속성 없음에만 작동
console.log("기본값이 사용된 경우:", val1 === "기본값" && val4 === "기본값");기본값은 undefined이거나 속성이 아예 없을 때만 사용돼요. null이나 빈 문자열("")일 때는 사용되지 않는다는 점을 기억하세요!
📝 7단원 복습 문제 - 배열을 잊지 말아요!
8단원을 배우는 여러분이 7단원 내용을 잊지 않도록 복습 문제를 준비했어요!
복습 문제 1: 배열에서 특정 부분 잘라내기
// 우리 반 학생들 이름
let students = ["철수", "영희", "민수", "지수", "하늘"];
// slice를 사용해서 2번째부터 4번째까지 잘라내보세요
let middleStudents = students.slice(1, 4);
console.log("가운데 학생들:", middleStudents);
console.log("원본 배열:", students);
// 마지막 2명만 잘라내기
let lastTwo = students.slice(-2);
console.log("마지막 2명:", lastTwo); 해설: slice()는 배열의 일부분을 새로운 배열로 복사해요. 원본 배열은 변하지 않고, 시작 인덱스부터 끝 인덱스 직전까지 복사해요!
복습 문제 2: 특정 위치에 요소 추가하고 제거하기
// 과일 목록
let fruits = ["사과", "바나나", "오렌지"];
console.log("초기 과일:", fruits);
// splice로 인덱스 1에 "포도" 추가하기
fruits.splice(1, 0, "포도");
console.log("포도 추가 후:", fruits);
// splice로 인덱스 2의 요소 1개 제거하기
let removed = fruits.splice(2, 1);
console.log("제거된 과일:", removed);
console.log("제거 후:", fruits); 해설: splice()는 배열의 특정 위치에 요소를 추가하거나 제거할 수 있어요. 원본 배열을 직접 변경하고, 제거된 요소들을 새 배열로 반환해요!
지금까지 기본값과 별칭 사용하기를 자세히 배워보았어요. 이제 여러분도 어떤 상황에서도 안전하고 읽기 쉬운 코드를 만들 수 있게 되었어요!
✅ 학습 완료 체크리스트
이번 시간에 배운 내용들을 모두 이해했는지 확인해보세요!
| 학습 내용 | 이해했나요? |
|---|---|
| 기본값과 별칭의 기본 개념 | ✅ |
| 기본 사용법과 문법 | ✅ |
| 순서와 문법 규칙 | ✅ |
| 자주 하는 실수들 | ✅ |
| 실전 예제 이해 | ✅ |
| 7단원 배열 복습 | ✅ |
🔄 기본값과 별칭 사용 과정 정리
지금까지 배운 내용을 단계별로 정리해보겠어요.
첫 번째 단계는 위험 요소 파악입니다. 어떤 값이 없을 수 있는지, 어떤 이름이 이해하기 어려운지 미리 확인해보세요.
두 번째는 기본값 설정 단계입니다. = 기호를 사용해서 값이 없을 때 사용할 안전한 기본값을 정해요.
세 번째는 별칭 결정 단계입니다. : 기호를 사용해서 더 이해하기 쉽거나 프로젝트 규칙에 맞는 변수 이름을 정해요.
네 번째는 안전한 분해하기 단계입니다. 기본값과 별칭을 함께 사용해서 어떤 상황에서도 안전하게 값을 받아요.
마지막으로 방어적 활용 단계입니다. 분해된 변수들을 사용할 때도 안전성을 고려해서 코드를 작성해요.
📂 마무리 정보
오늘 배운 8.3.3 내용이 여러분의 자바스크립트 지식 상자에 잘 저장되었나요? 다음 시간에는 더 재미있는 내용으로 만나요!
기억할 점: 오늘 배운 내용을 꼭 연습해보시고, 궁금한 점이 있으면 언제든 다시 돌아와서 읽어보세요.
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.
'8. 정보 꾸러미 만들기 (객체) > 8.3 구조 분해 할당' 카테고리의 다른 글
| 8.3.2 목록 한 번에 정리하기 - 줄 서 있는 친구들 순서대로 부르기 (0) | 2025.07.11 |
|---|---|
| 8.3.1 정보 상자 한 번에 정리하기 - 물건들을 한 번에 정리하는 방법 (0) | 2025.07.11 |