자바스크립트 - 배열 해체: 배열의 마법을 풀어보자

안녕하세요, 미래의 자바스크립트 마법사 여러분! 오늘 우리는 배열 해체의 세상으로 흥미로운 여정을 떠납니다. 이 이름이 입이 터질 것 같지만, 이 수업이 끝나면 당신은 프로처럼 배열을 해체할 수 있을 것입니다! 그러니 보이지 않는 지팡이(키보드)를 손에 쥐고, 함께 빠져보겠습니다!

배열 해체는 무엇인가요?

아름답게 포장된 선물 상자(그것은 우리의 배열)를 상상해보세요. 그 안에는 다양한 좋은 것들이 가득 차 있습니다(우리의 배열 요소). 배열 해체는 마법처럼 그 상자를 열고, 모든 좋은 것들을 테이블에 정리하는 것과 같습니다. 여기서 각 요소를 별도의 변수로 나누는 방법입니다. 멋지죠?

간단한 예제로 시작해보겠습니다:

const fruits = ['apple', 'banana', 'cherry'];
const [firstFruit, secondFruit, thirdFruit] = fruits;

console.log(firstFruit);  // 출력: 'apple'
console.log(secondFruit); // 출력: 'banana'
console.log(thirdFruit);  // 출력: 'cherry'

이 예제에서 우리는 fruits 배열을 가져와서 그 값을 세 가지 별도의 변수로 나눕니다. 마치 "자바스크립트야, 이 과일들을 가져다가 첫 번째, 두 번째, 세 번째 것을 각각 따로 주세요!"라고 말하는 것과 같습니다.

배열 해체 중 요소 건너뜀

이제 다이어트 중이고 바나나를 건너뛰고 싶다면 어떻게 할까요? 문제ありません! 배열 해체는 원치 않는 요소를 건너뛰는 데 도움을 줍니다. 다음과 같이 합니다:

const [firstFruit, , thirdFruit] = ['apple', 'banana', 'cherry'];

console.log(firstFruit);  // 출력: 'apple'
console.log(thirdFruit);  // 출력: 'cherry'

firstFruit과 thirdFruit 사이의 추가 콤마를 보세요. 그것은 자바스크립트에게 "두 번째 아이템을 건너뛰어 주세요!"라고 말하는 것입니다. 마치 과일 바스켓에서 원하는 과일만 골라내는 것과 같습니다.

배열 해체와.Rest 연산자

하지만 기다리세요, 그 이상이 있습니다! 첫 번째 과일을 가져다가 나머지를 별도의 바스켓에 담고 싶다면 어떻게 할까요? 그때 Rest 연산자 (...)가 유용하게 사용됩니다:

const fruits = ['apple', 'banana', 'cherry', 'date', 'elderberry'];
const [firstFruit, ...restOfFruits] = fruits;

console.log(firstFruit);    // 출력: 'apple'
console.log(restOfFruits);  // 출력: ['banana', 'cherry', 'date', 'elderberry']

여기서 firstFruit는 'apple'을 가져오고, restOfFruits는 나머지를 담습니다. 마치 "첫 번째 과일을 주세요, 그리고 나머지는 이 바스켓에 담아주세요!"라고 말하는 것과 같습니다.

배열 해체와 기본 값

occasionally, our fruit box might not have all the fruits we expect. In that case, we can set default values:

const [apple = 'red apple', banana = 'yellow banana'] = ['green apple'];

console.log(apple);   // Output: 'green apple'
console.log(banana);  // Output: 'yellow banana'

이 예제에서 우리는 " 만약 애플이 없다면 'red apple'을 사용하고, 바나나가 없다면 'yellow banana'를 사용하라"고 말하고 있습니다. 하지만 우리는 'green apple'을 가져오므로 apple은 그것을 가져오고, banana는 기본 값을 사용합니다.

변수 교환을 사용한 배열 해체

이제 멋진 트릭을 소개합니다: 배열 해체를 사용하여 변수를 교환할 수 있습니다. 마치 마법 트릭처럼!

let a = 'first';
let b = 'second';

[a, b] = [b, a];

console.log(a);  // 출력: 'second'
console.log(b);  // 출력: 'first'

tada! 우리는 a와 b의 값을 한 줄로 교환했습니다. 마치 그들이 순간적으로 자리를 바꾸는 것처럼!

함수에서 반환된 배열 해체

마지막으로, 함수에서 반환된 배열을 해체할 수 있습니다. 예를 들어, 날씨 데이터를 반환하는 함수가 있다고 가정해봅시다:

function getWeather() {
return ['sunny', 25, '10%'];
}

const [sky, temperature, humidity] = getWeather();

console.log(sky);         // 출력: 'sunny'
console.log(temperature); // 출력: 25
console.log(humidity);    // 출력: '10%'

여기서 우리는 반환된 배열을 잡아서 즉시 해체합니다. 마치 함수가 우리에게 패키지를 던지고, 우리가 공중에서 그 패키지를 풀어보는 것과 같습니다!

배열 해체 방법 요약

여기서 우리가 배운 방법을 요약하는 유용한 표를 제공합니다:

방법	설명	예제
기본 해체	배열 요소를 변수로 나누는 것	const [a, b, c] = [1, 2, 3]
요소 건너뜀	원치 않는 요소를 건너뛰는 것	const [a, , c] = [1, 2, 3]
Rest 연산자	나머지 요소를 배열로 담는 것	const [a, ...rest] = [1, 2, 3, 4]
기본 값	누락된 요소에 대해 기본 값 설정	const [a = 1, b = 2] = [3]
변수 교환	변수 값을 교환하는 것	[a, b] = [b, a]
함수 반환 해체	함수에서 반환된 배열 해체	const [a, b] = getArray()

그렇습니다, 여러분! 자바스크립트에서 배열 해체의 예술을 배웠습니다. 연습이 완벽을 만드는 것을 기억하십시오, 그러니 이 개념들을 자유롭게 연습해보세요. 당신은 잠재적으로 배열을 해체할 수 있을 것입니다!

누가 알았을까? 배열을 풀어보는 것이 이렇게 많은乐趣을 줄 수 있을 줄이요? 이제 당신은 자신감 있게 해체하러 가십시오! 행복하게 코딩하시고, 항상 배열이 깨끗하게 풀어지기를 바랍니다!

Credits: Image by storyset