자바스크립트 기본 문법 – 배열 – 2 – 배열 해체

작성자 wooah

자바스크립트 기본 문법 – 배열 – 2 – 배열 해체

배열 해체란?

배열 해체(destructuring)는 배열의 각 요소를 개별 변수로 해체하여 할당하는 기능입니다. 이를 통해 배열에서 원하는 값을 추출하여 변수에 할당하거나, 배열 요소를 교환하거나, 함수에서 여러 값을 반환받을 수 있습니다. 간단히 말해서, 배열의 값을 편리하게 분해하고 사용할 수 있는 기능입니다.

배열 해체의 예시

아래의 예시를 통해 배열 해체의 사용법을 알아보겠습니다.

const fruits = ['사과', '바나나', '딸기'];

// 기존 방식으로 배열 요소에 접근하기
const apple = fruits[0];
const banana = fruits[1];
const strawberry = fruits[2];

// 배열 해체를 사용하여 배열 요소에 접근하기
const [apple, banana, strawberry] = fruits;

console.log(apple); // '사과'
console.log(banana); // '바나나'
console.log(strawberry); // '딸기'

위의 예시에서는 fruits라는 배열을 해체하여 각 요소를 apple, banana, strawberry 변수에 할당하였습니다. 기존 방식으로는 배열 요소에 접근하기 위해서는 인덱스를 사용해야 했지만, 배열 해체를 사용하면 간편하게 변수에 값을 할당할 수 있습니다.

배열 해체의 활용

변수 교환하기

배열 해체는 변수를 간단히 교환할 때 유용하게 사용될 수 있습니다. 다음 예시를 통해 확인해보겠습니다.

let a = 10;
let b = 20;

// 변수 교환하기
[a, b] = [b, a];

console.log(a); // 20
console.log(b); // 10

위의 예시에서는 a와 b라는 변수의 값을 서로 교환하고 있습니다. 배열 해체를 사용하여 한 줄로 간단하게 변수를 교환할 수 있습니다.

함수에서 여러 값을 반환받기

배열 해체는 함수에서 여러 값을 반환받을 때 유용하게 사용될 수 있습니다. 아래 예시를 통해 확인해보겠습니다.

function getNumbers() {
  return [1, 2, 3];
}

const [num1, num2, num3] = getNumbers();

console.log(num1); // 1
console.log(num2); // 2
console.log(num3); // 3

위의 예시에서는 getNumbers() 함수가 배열 [1, 2, 3]을 반환하고 있습니다. 함수 호출 결과를 배열 해체를 사용하여 각각의 변수에 할당하였습니다. 이를 통해 함수에서 반환된 여러 값을 간단하게 받아올 수 있습니다.

배열 해체의 주의해야할 점

배열 해체를 사용할 때 주의해야 할 점이 있습니다.

  1. 배열 해체는 왼쪽에 있는 변수에 오른쪽 배열의 값을 할당합니다. 따라서 변수의 개수와 배열의 길이가 일치해야 합니다. 만약 개수가 일치하지 않으면 할당되지 않은 값은 undefined가 됩니다.
  2. 배열 해체를 사용할 때 변수 이름은 배열 요소의 순서에 따라 할당됩니다. 순서에 주의하여 변수 이름을 지정해야 합니다.
  3. 배열 해체는 중첩된 배열에서도 사용할 수 있습니다. 중첩된 배열의 경우에도 동일한 해체 문법을 사용하면 됩니다.

이러한 주의사항을 유념하여 배열 해체를 적절하게 활용하면 코드를 간결하고 가독성 있게 작성할 수 있습니다.

자바스크립트에서 배열 해체는 유용한 기능이며, 변수 교환이나 함수에서 여러 값을 반환받는 등 다양한 상황에서 활용될 수 있습니다. 익숙해져서 자유롭게 사용하면 코드 작성이 더욱 편리해질 것입니다. 계속해서 연습하고 활용해보세요!

답글 남기기