자바스크립트 공부하기 - 구조분해할당

 

화이팅 !! 외치며 공부시작 ✨

---

구조 분해 할당 이란 ?

배열이나 객체에서 값을 뽑아서 변수에 쉽게 할당하는 문법 

---

뭐하는거야  ? 왜 쓰는거야 ?

1. 코드가 짧아지고 가독성이 좋아져!

예를 들어, 객체에서 값을 가져올 때 보통 이렇게 해 !

const user = { name: "Jane", age: 25 };

const name = user.name;
const age = user.age;

console.log(name, age); // "Jane" 25

😵 변수 하나씩 할당해야 해서 코드가 길어져...

 

→ 구조분해 할당을 쓰면?

const { name, age } = user;
console.log(name, age); // "Jane" 25

✨ 딱 한 줄로 끝! 깔끔하고 보기 편해!

 

 

2. 배열이나 객체에서 필요한 값만 쉽게 뽑을 수 있어!

예를 들어, 배열에서 특정 값만 가져오고 싶다고 해보자.

const colors = ["red", "blue", "green"];

// 기존 방법
const first = colors[0];
const third = colors[2];

console.log(first, third); // "red" "green"

 

→ 구조분해 할당을 쓰면?

const [first, , third] = colors;
console.log(first, third); // "red" "green"

⚡ 불필요한 코드 없이 바로 원하는 값만 가져올 수 있어!

 

 

 

💬 한 마디로? → 코드가 더 효율적이고 간결해져 ! 

 

---

 

일단 기본 문법에서 > 구조분해 할당이 어떻게 이루어지는지부터 알고가자 !

---

 

 

배열에서 값을 꺼내는 일반적인 방법과 구조분해 할당을 비교해보자 👏🏻

차근차근 어떻게 뭐가 바뀌었는지 이해해보기

 

🍑 기존 방식 (배열) 

const fruits = ["사과", "바나나", "포도"];

// 기존 방식
const first = fruits[0];
const second = fruits[1];

console.log(first, second); // "사과" "바나나"

 

↓ ↓ ↓ ↓

🍑 구조분해 할당 변환

const fruits = ["사과", "바나나", "포도"];

// 구조분해 할당 적용!
const [first, second] = fruits;

console.log(first, second); // "사과" "바나나"

 

💬 무슨 일이 일어난 거야?

1. fruits 배열에서 [0], [1]로 접근하지 않고, const [first, second] = fruits; 한 줄로 값을 꺼냄.

2. 배열 순서대로 first에 "사과", second에 "바나나"가 저장됨.

3. 더 짧고 간결하게 변수에 값을 할당할 수 있음

 

---

🍑 기존 방식 (객체) 

const user = { name: "Jane", age: 25 };

// 기존 방식
const userName = user.name;
const userAge = user.age;

console.log(userName, userAge); // "Jane" 25

↓ ↓ ↓ ↓

🍑 구조분해 할당 변환

const user = { name: "Jane", age: 25 };

// 구조분해 할당 적용!
const { name, age } = user;

console.log(name, age); // "Jane" 25

 

💬 무슨 일이 일어난 거야?

 

1. user.name, user.age를 각각 변수에 저장하는 대신 { name, age } = user; 를 사용.

2. 객체의 속성명과 변수명이 같으면 자동으로 값을 할당해줌.

3. 기존 방식보다 훨씬 짧고 깔끔함.

---

🍑 구조분해 할당에서, 변수명 바꾸기 !

만약 객체의 속성명을 변경하고 싶다면?

🍑 기존 방식 (객체) 

const user = { name: "Alice", age: 22 };

// 기존 방식
const userName = user.name;
const userAge = user.age;

console.log(userName, userAge); // "Alice" 22

↓ ↓ ↓ ↓

🍑 구조분해 할당 변환

const user = { name: "Alice", age: 22 };

// 구조분해 할당 + 변수명 변경
const { name: userName, age: userAge } = user;

console.log(userName, userAge); // "Alice" 22

 

 

💬 무슨 일이 일어난 거야?

 

1. { name: userName, age: userAge } = user;
→ name 값을 userName 변수에 할당, age 값을 userAge 변수에 할당.

 

2. 원래 객체의 속성명은 유지되지만, 우리가 원하는 변수명으로 저장할 수 있음.

---

 

바뀌는 흐름을 보니 조금 이해가 쉬운 것 같으니

세세하게 한번 공부해보자. ! 

---

배열, 객체에서 구조 분해 할당

1. 배열 구조분해 할당

💬 배열에서 값을 순서대로 뽑을 때 사용해!

const fruits = ["사과", "바나나", "포도"];

// 구조분해 할당 사용
const [first, second, third] = fruits;

console.log(first);  // "사과"
console.log(second); // "바나나"
console.log(third);  // "포도"

💡 배열은 순서대로 할당돼!

first에 "사과", second에 "바나나", third에 "포도"가 들어갔어.

 

 

✔ 필요한 값만 가져올 수도 있어!

const [first, , third] = fruits;

console.log(first);  // "사과"
console.log(third);  // "포도"

(두 번째 값(바나나)은 건너뛰었어!)

 

---

2. 객체 구조분해 할당

 

💬 객체에서 키를 기준으로 값을 뽑을 때 사용해!

const user = { name: "Jane", age: 25 };

// 구조분해 할당 사용
const { name, age } = user;

console.log(name); // "Jane"
console.log(age);  // 25

💡 객체는 키 이름을 기준으로 값이 들어가!

 

✔ 변수 이름을 다르게 하고 싶으면?

const { name: userName, age: userAge } = user;

console.log(userName); // "Jane"
console.log(userAge);  // 25

(객체의 name을 userName이라는 변수로, age를 userAge라는 변수로 바꿨어!)

---

 

정리!

🧚‍♀️ 배열 → 순서대로 값을 꺼냄. const [a, b] = 배열;
🧚‍♀️ 객체 → 키 이름으로 값을 꺼냄. const { 키이름 } = 객체;
🧚‍♀️ 기본값 설정 가능
🧚‍♀️ 이름 바꿔서 저장 가능

이제 구조분해 할당 마스터! 💗 

---

 

 공부가 끝났다면, 챗지피티에게 "기존 문법을, 구조분해 할당을 적용하는 연습을 해볼 퀴즈를 줘 !" 요청 해보고 풀어보기 ✨

---

퀴즈를 풀던 중 내가 궁금했던 점, 그리고 알게된 점 👏🏻

 

예를 들어,, 구조분해 할당이 완료된 아래 코드 같은 경우엔,

도대체 자바스크립트 엔진이 뭘 어떻게 알고 first가 빨강이란걸, second가 파랑이란 걸 아는걸까 ? 의문이 들었다.

const colors = ["빨강", "파랑", "초록"];

const [first, second] = colors;

console.log(first, second); // "빨강" "파랑"

 

 

=> 챗지피티가 답변해줬다.

 

먼저 배열 :-)

자바스크립트 엔진이 구조분해 할당을 해석하는 방식을 쉽게 설명해볼게.

 

위의 코드가 실행될 때, 자바스크립트 엔진이 내부적으로 하는 일을 한 단계씩 풀어볼게.

 

1. colors 배열을 메모리에 저장

colors = ["빨강", "파랑", "초록"];

 

이 배열이 메모리에 저장돼.

 

2. 구조분해 할당 실행 (const [first, second] = colors;)

colors 배열의 0번 인덱스 값을 first에 할당

colors 배열의 1번 인덱스 값을 second에 할당

즉, 내부적으로 이런 일이 일어나고 있어:

const first = colors[0];  // "빨강"
const second = colors[1]; // "파랑"

 

 

 

자바스크립트 엔진이 내부적으로 배열의 순서를 그대로 따라가면서 변수를 하나씩 채워넣어!

 

 

 

* 구조분해 할당이 적용되지 않는 경우

자바스크립트 엔진은 배열의 순서를 그대로 따라가기 때문에, 만약 배열의 길이가 부족하면 어떻게 될까?

const colors = ["빨강"];
const [first, second] = colors;

console.log(first, second); // "빨강" undefined

first는 colors[0]이니까 "빨강"을 받음.

second는 colors[1]을 받으려고 했지만, colors[1]이 존재하지 않음 → 그래서 undefined가 됨.

이걸 보면 자바스크립트 엔진은 단순히 배열의 순서대로 값을 가져올 뿐, 그 값이 없으면 undefined를 할당한다는 걸 알 수 있어!

 

이번엔 객체 !

배열은 순서대로 값을 가져오지만, 객체는 속성 이름을 기준으로 값을 찾는 방식이야.

const user = { name: "Jane", age: 25 };
const { name, age } = user;

console.log(name, age); // "Jane" 25

 

💡 자바스크립트 엔진이 이 코드를 해석하는 과정

 

1. { name, age } = user; 실행

- user.name 값을 name 변수에 저장

- user.age 값을 age 변수에 저장

 

내부적으로는 이렇게 처리됨

const name = user["name"]; // "Jane"
const age = user["age"];   // 25

 

즉, 객체는 배열처럼 순서에 의존하지 않고, "키(key)"를 기준으로 값을 찾는다는 차이가 있어!