ES6을 사용한 배열 구조 분해

다른 사람들이 유용하다고 생각하는 콘텐츠를 작성하는 것을 제외하고 기술 블로깅의 가장 좋아하는 부작용 중 하나는 개념을 확고히 하는 데 도움이 된다는 것입니다. 이번 주에는 ES6을 사용한 어레이 구조 분해에 집중하고 있습니다. 객체와 함께 구조화를 사용할 수도 있지만 향후 게시물을 위해 저장하겠습니다.

그렇다면 배열 구조 분해가 정확히 무엇입니까? 간단히 말해서, 배열 구조 분해는 배열 내부의 개별 요소를 가져와 개별 변수에 할당하는 것입니다. 따라서 기본 예는 다음과 같을 수 있습니다.

let letters = ["a", "b", "c", "d", "e"];
let [one, two] = letters;

console.log(one); // "a"
console.log(two); // "b"

여기에서 우리는 변수 문자를 선언하고 그 값을 알파벳의 처음 5개 문자를 포함하는 문자열 배열에 할당했습니다. 다음으로 변수 1과 2를 포함하는 배열인 또 다른 변수를 선언했습니다. 그런 다음 해당 값을 문자열 배열인 가변 문자와 동일하게 설정합니다. 이것이 하는 일은 두 개의 console.log() 문으로 확인한 문자 배열의 처음 두 요소와 동일한 변수 1과 2를 설정할 수 있도록 하는 것입니다. JavaScript에서는 정수를 변수 이름으로 사용할 수 없으므로 이 코드에서 구문 오류가 발생했을 수 있습니다.

let letters = ["a", "b", "c", "d", "e"];
let [1, 2] = letters;

console.log(one); // "a"
console.log(two); // "b"

배열 구조 분해의 또 다른 강력한 기능은 Rest 구문을 사용하는 기능입니다. 이전 코드 예제를 사용하여 '...'처럼 보이는 Rest 구문 앞에 3이라는 다른 변수를 추가하면 다음 결과를 얻습니다.

let letters = ["a", "b", "c", "d", "e"];
let [one, two, ...three] = letters;

console.log(one); // "a"
console.log(two); // "b"
console.log(three) // ["c", "d", "e"]

Rest 구문을 사용하면 1과 2 뒤에 오는 값을 가져와서 변수 3에 저장된 새 배열로 해당 값을 확산하거나 복사할 수 있습니다.

배열 구조 분해는 변수 값을 교환하려는 경우에도 유용합니다.

let a = "cat"; 
let b = "dog";

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

console.log(a); // "dog"
console.log(b); // "cat"

마지막으로 데이터 배열을 반환하는 함수와 함께 구조 분해를 사용할 수도 있습니다.

const retArray = () => {
    return ["a", "b", "c", "d", "e"];
}

let [one, two] = retArray();

console.log(one); // "a"
console.log(two); // "b"

보시다시피 어레이 구조 해제는 ES6의 강력한 기능입니다. React 및 Vue와 같은 JavaScript 프레임워크로 작업할 때 특히 유용합니다. JavaScript 객체와 함께 구조 해제를 사용하는 방법을 설명하는 다음 게시물을 기대해 주십시오.

그때까지,
행복한 코딩!