구조화의 힘

Destructuring은 JavaScript 및 TypeScript 개발자에게 축복입니다.
Destructuring은 객체와 배열 모두에서 작동합니다.

객체 구조화

아래 객체를 고려하십시오.

const myObject = {
  userFirstName: 'Rahul',
  userLastName: 'Raj',
}

별도의 변수에서 firstName과 lastName을 가져오는 방법은 무엇입니까?

const userFirstName= this.myObject.userFirstName;
const userLastName= this.myObject.userLastName;
console.log(userFirstName) // Rahul
console.log(userLastName) // Raj

또는
구조화를 사용할 수 있습니다.

const {userFirstName, userLastName} = this.myObject;
console.log(userFirstName) // Rahul
console.log(userLastName) // Raj

이 간단한 1 라이너는 keyName 변수의 값을 가져옵니다.

당신은 긴 변수 이름을 좋아하지 않습니다 🤔
별칭 이름을 지정하여 원하는 이름으로 변경합니다.

const {userFirstName: fN, userLastName: lN} = this.myObject;
console.log(fN); // Rahul
console.log(userFirstName); // Will through error

따라서 객체 구조화에 대한 거의 모든 것을 배웠습니다.

배열 구조화

Array Destructuring은 Object Destructuring과 유사하지만 요소의 수를 알고 있거나 작업할 초기 요소가 필요할 때 사용됩니다.

    const userDetails:string = "Rahul,dev.to,rahulrajrd";
    const [name, website, username, noItemCheck] = userDetails.split(",");
    console.log(name); // Rahul
    console.log(website); // dev.to
    console.log(username); // rahulrajrd
    console.log(noItemCheck) // undefined

🥳 중요 참고 사항.

If the returned value is less than the assigned value as shown above the value will be undefined.

게시물이 마음에 들면 더 많은 것을 위해 나를 따르십시오.


.ltag__user__id__682652 .follow-action-button {
배경색: #4666b8 !중요;
색상: #ffffff !중요;
테두리 색상: #4666b8 !중요;
}

라훌 라즈 팔로우

I am a developer who is trying to improve myself day by day.