구조화 할당

다음은 배우기에 재미있고 JavaScript로 코딩할 때 사용하기에 매우 효율적인 것입니다. 실제로 제가 부트캠프에서 배운 것 중 하나는 할당된 실습을 수행하기 전에 강의를 읽는 것만으로도 완전히 이해했습니다.

그것은 파괴 과제입니다. 이렇게 하면 컬렉션에서 요소를 선택하고 선택할 수 있으며 루프를 돌고 새 선언을 만들지 않고도 컬렉션에 변수를 할당할 수 있습니다. 컬렉션에서 꺼내고 싶은 것을 JavaScript에 매우 명확하게 말할 수 있기 때문에 매우 효율적입니다. 그것이 객체, 배열 또는 문자열이든, 단순성 때문에 우리 코드에 미학이 추가되었습니다. 가난한 손가락에 대한 타이핑 감소라는 추가 보너스가 있습니다.

Destructuring Assignment를 사용하여 변수에 데이터를 할당하면 할당하려는 객체 주위에 {중괄호}를 넣을 수 있습니다. 이 경우 키 이름으로 속성을 찾기 때문에 중괄호 안의 순서는 중요하지 않습니다.

const mooMoo = {
name: 'Alfred',
type: 'Hairy Cow',
color: 'tan and white',
};

const {name, color} = mooMoo;

위의 주어진 데이터 구조에서 중괄호는 객체에서 변수를 가져올 것임을 Javascript에 알려줍니다. 우리는 '이름'과 '색상' 키를 당기라고 지시하고 있습니다. 'mooMoo'에 존재하는 경우 해당 키와 관련된 변수를 반환합니다. 당연히 이름 키로 'Alfred'를, 색상 키로 'tan and white'를 얻습니다. 이는 중첩된 개체에도 적용됩니다. 메소드 체이닝을 사용하여 JavaScript가 내려갈 경로를 지정합니다.

이제 배열과 함께 Destructuring Assignment를 사용할 때 선언하는 변수를 [대괄호]로 감싸고 싶을 것입니다. 이렇게 하면 순서가 중요하므로 선언하는 순서를 올바르게 지정해야 합니다.

const farmAnimals = ['chicken', 'cow', 'pig'];
const [small, large, medium] = farmAnimals;
console.log(large, small, medium); // LOG: cow chicken pig

콘솔은 첫 번째 요소에는 small을, 두 번째 요소에는 large 요소를, 세 번째 요소에는 medium을 할당합니다. 재미있는 부분은 쉼표를 사용하여 할당하려는 배열 부분을 선택할 수 있다는 것입니다.

const farmAnimals = ['chicken', 'cow', 'pig'];
const [, large, medium] = farmAnimals;
console.log(, small, medium); // LOG: chicken pig

쉼표를 사용하면 JavaScript에 첫 번째 요소를 건너뛰고 두 번째 요소부터 시작하도록 지시하는 것입니다. 쉼표를 다른 지점으로 이동하여 해당 요소를 건너뛸 수도 있습니다.

그리고 마지막으로 문자열과 함께 Destructuring Assignment를 사용할 때 .split() 메서드를 사용하여 문자열을 배열로 변환합니다. 또한 [대괄호]를 사용하여 할당하려는 변수를 래핑합니다.

const cowName = 'Prince Alfred Kingston III';
const [title, firstName] = cowName.split(' ');
console.log(title, firstName); // LOG Prince Alfred

이제 Destructuring Assignment에서 split()을 사용할 때 매우 중요한 부분은 (괄호) 안의 '작은따옴표'입니다. 그 실수는 한 번만 합니다. 그렇지 않으면 코드에 무엇이 잘못되었는지 알아내려고 애쓰는 것은 당신을 미치게 만듭니다.

Destructuring Assignment가 너무 재미있지 않나요? 곧 당신은 그것을 사용하는 방법을 배우고 프로가 될 것입니다. 저를 믿으세요. 코드를 입력하는 시간과 입력 시간을 크게 절약할 수 있습니다.

해피코딩 (: