JS의 디스트럭처링

Destructuring을 사용하면 개체를 "풀고" 해당 속성을 새 변수에 할당할 수 있습니다. 예를 들어 객체 분해를 살펴보겠습니다.

Destructuring을 맛있는 계란 샌드위치를 ​​만드는 것으로 볼 수 있습니다. 우리는 냉장고에서 빵, 볼로냐, 계란 등 샌드위치에 필요한 재료만 꺼냅니다. 냉장고에 있는 모든 항목을 꺼내지는 않겠죠? JS 의 Destruct 요소 와 같은 경우 입니다.

Destructuring 은 배열, 객체 및 맵에서 데이터를 추출하여 별도의 변수에 저장할 수 있는 JavaScript 표현식입니다. 구조 분해 를 통해 배열에서 한 번에 수많은 속성이나 객체를 추출할 수 있습니다.

구문을 살펴보겠습니다.

const obj = {
  a: 2,
  b: 3,
}

// destructure assignment
const { a, b } = obj;

console.log(a); // 2
console.log(b); // 3

const { a,b } = obj;

파괴 유형:

기존 변수 이름에 할당:

var student = {    // Object we will be destructuring
    firstname: 'Mohajit',
    lastname: 'Paul',
    dateofbirth: '2002'
};

// Destructuring:
const { firstname, lastname, dateofbirth } = student;
console.log( firstname, lastname, dateofbirth);

2. 새 변수 이름에 할당:

입력:

var student = {    // Object to destructure
    firstname: 'Mohajit',
    lastname: 'Paul',
    dateofbirth: '2002'
};

// Destructuring obj with different names:
const { firstname: F1N, lastname: L1N, dateofbirth: dob } = student;
console.log( F1N, L1N , dob);

3. 기본값을 사용한 할당:

입력:

var student = {    // Object to destructure
    firstname: 'Mohajit',
    lastname: 'Paul',
    dateofbirth: '2002'
};
// Destructuring - variables without 
// assigning default values 
var { firstname, lastname, country } = student;
console.log("Without setting default values")
console.log( firstname, lastname, grade);

// Destructuring - variables by 
// assigning default values 
var { firstname = 'default firstname', 
      lastname = 'default lastname', 
      grade = 'default grade' } = student;
console.log("\n After setting default values")
console.log( firstname, lastname, grade);

이것으로 JS의 구조 분해에 대한 이야기를 마칩니다.

내 소셜에서 나를 팔로우하세요:

Github

링크드인

트위터