알고리즘 문제를 풀다가 내가 알던 구조분해할당과 조금 달라서 이해하는데 (약간의) 시간이 걸렸다.
알고리즘 문제 풀이와 함께 배열, 객체의 구조분해할당과 새롭게 알게된 선언분리할당에 대해 정리해보았다.
📝 배열과 객체의 구조분해할당
구조분해할당은 배열이나 객체의 요소 및 프로퍼티들을 분해해서 그 값들을 각각의 변수에 할당하는 것을 말한다.
1. 배열 구조분해할당
1-1. 기본 변수 할당하기
let colors = ["green", "blue", "purple"];
let c1 = colors[0]; // "green"
let c2 = colors[1]; // "blue"
let c3 = colors[2]; // "purple"
console.log(c1); // "green"
console.log(c2); // "blue"
console.log(c3); // "purple"이 코드를 구조분해할당으로 간결하게 바꿔보면 아래와 같다.
1-2. 구조분해할당 적용하기
let colors = ["green", "blue", "purple"];
let [c1, c2, c3] = colors;
console.log(c1); // "green"
console.log(c2); // "blue"
console.log(c3); // "purple"1-3. 선언분리할당 적용하기
: 선언분리할당은 변수의 선언을 분리해서 배열의 값을 할당하는 방법이다.
let c1, c2, c3; // ⭐️ 선언 먼저 해주고
[c1, c2, c3] = ["green", "blue", "purple"]; // ⭐️ 값 넣어주기
console.log(c1); // "green"
console.log(c2); // "blue"
console.log(c3); // "purple"2. 배열의 길이보다 변수가 더 많거나 적을 경우
2-1. 변수의 수가 더 적은 경우
let c1, c2;
[c1, c2] = ["green", "blue", "purple"];
console.log(c1); // "green"
console.log(c2); // "blue"2-2. 변수의 수가 더 많은 경우
let c1, c2, c3, c4;
[c1, c2, c3, c4] = ["green", "blue", "purple"];
console.log(c1); // "green"
console.log(c2); // "blue"
console.log(c3); // "purple"
console.log(c4); // undefined -> 변수에 할당될 값이 없기 때문!여기서 c4 값으로 undefined를 할당하고 싶지 않다면 직접 해당 변수에 기본값을 지정해주면 된다.
// 직접 값 할당하기
[c1, c2, c3, c4 = "yellow"] = ["green", "blue", "purple"];
console.log(c4); // "yellow"3. 변수 값 교환하기
3-1. 구조분해 ❌, 직접 변수 값을 바꾸는 방법
let a = 10;
let b = 5;
let temp; // ✅ 임시 변수
console.log(a, b);
temp = a;
a = b;
b = temp;
console.log(a, b);3-2. 구조분해 ⭕️, 직접 변수 값을 바꾸는 방법
let a = 10;
let b = 5;
[a, b] = [b, a];
console.log(a); // 5
console.log(b); // 10+ 🤚🏻 알고리즘 문제에 적용해서 풀어보기
문제
정수 배열 arr와 2차원 정수 배열 queries이 주어집니다. queries의 원소는 각각 하나의 query를 나타내며, [i, j] 꼴입니다.
각 query마다 순서대로 arr[i]의 값과 arr[j]의 값을 서로 바꿉니다.
위 규칙에 따라 queries를 처리한 이후의 arr를 return 하는 solution 함수를 완성해 주세요.
입출력 예
| arr | queries | result |
|---|---|---|
| [0, 1, 2, 3, 4] | [[0, 3],[1, 2],[1, 4]] | [3, 4, 1, 0, 2] |
접근방법
-
queries 순회하기
-
arr[i]와arr[j]의 값을 서로 교환시키기→ 💡 임시 변수(
temp)에 저장한 뒤 교환하는 방식으로 구현할 예정! -
최종 결과 반환
코드 작성
function solution(arr, queries) {
for (const [i, j] of queries) {
// arr[i]와 arr[j]를 교환
const temp = arr[i]; // ✅ 임시 변수로 값 변경!
arr[i] = arr[j];
arr[j] = temp;
}
return arr;
}구조분해할당으로 개선한 코드
function solution(arr, queries) {
for (const [i, j] of queries) {
[arr[i], arr[j]] = [arr[j], arr[i]];
// ✅ 임시 변수 temp 사용하지 않고 구조 분해 할당으로 교환!
}
return arr;
}
다시 정리로 돌아가서 이번에는 "객체 구조분해할당"을 정리해보자.
4. 객체 구조분해할당
4-1. 기본 변수 할당하기
let colors = {
c1: "green",
c2: "blue",
c3: "purple",
};
let c1 = colors.c1;
let c2 = colors.c2;
let c3 = colors.c3;
console.log(c1); // green
console.log(c2); // blue
console.log(c3); // purple배열은 대괄호 [ ] , 객체는 중괄호 { } !
4-2. 구조분해할당 적용하기
key 값을 기준으로 객체를 분해해 변수에 할당한다.
let colors = ["green", "blue", "purple"];
let { c1, c2, c3 } = colors;
console.log(c1); // "green"
console.log(c2); // "blue"
console.log(c3); // "purple"🔍 잠깐! 배열은 어떻게 했더라? -> "인덱스 순서대로" 변수에 할당
5. 새로운 변수 이름으로 할당하기
5-1. 구조분해 ❌, 새로운 변수에 할당하기
let colors = {
c1: "green",
c2: "blue",
c3: "purple",
};
// ✨ 새로운 변수에 할당
let color1 = colors.c1;
let color2 = colors.c2;
let color3 = colors.c3;
console.log(color1); //green
console.log(color2); //blue
console.log(color3); //purple5-2. 구조분해 ⭕️, 새로운 변수에 할당하기
let { c1: color1, c2: color2, c3: color3 } = colors;colors 객체의 c1, c2, c3 각각 color1, color2, color3 로 변경하겠다! 라는 의미
6. 기본값 설정하기
6-1. 객체의 길이보다 변수가 더 많거나 적을 경우
let colors = {
c1: "green",
c2: "blue",
c3: "purple",
};
let { c1, c2, c3, c4 } = colors;
console.log(c1); // green
console.log(c2); // blue
console.log(c3); // purple
console.log(c4); //undefined6-2. 직접 값 할당하기
let colors = {
c1: "green",
c2: "blue",
c3: "purple",
};
let { c1, c2, c3, c4 = "yellow" } = colors;
console.log(c1); // green
console.log(c2); // blue
console.log(c3); // purple
console.log(c4); //yellow구조분해할당을 잘 알고있다고 생각했는데 배열, 객체를 왔다갔다 하면서 정리해보려니까 완벽하게 정리가 되지 않았구나 하는 생각이 들었다. 그리고 선언분리할당도 나도 모르는 사이에 써봤을지 모르지만 명칭을 알아가는 시간이었다.
알고리즘 문제를 풀면서 바로 적용해보고 구조분해할당으로 코드 수정도 해보니 복습하기 좋았던 것 같다. 아직 배울게 많은 자바스크립트... 빨리 복습 끝내고 간단 프로젝트 하고 끝내좌~! 🔥
참고자료
