[JavaScript] 구조 분해 할당

✨ 자바스크립트 구조 분해 할당으로 함수 매개변수 깔끔하게 받기! 🧙‍♂️

혹시 함수에 매개변수 여러 개 넘길 때마다 괄호 안에 쉼표 폭탄💣 투척하고 계신가요? 이젠 그런 걱정은 그만! 자바스크립트 **구조 분해 할당(Destructuring Assignment)**으로 함수 매개변수를 깔끔하게 받아보세요. 😎

 

구조 분해 할당이란?

객체나 배열의 속성을 변수에 바로 할당하는 문법입니다. 마치 선물 상자🎁를 열어 내용물을 각각의 자리에 쏙쏙 넣는 것처럼, 복잡한 데이터 구조에서 필요한 값만 쏙쏙 뽑아낼 수 있어요!

 

// ... (생략)

uploadToServer(formObj).then(result => {
    // ... (생략)
    for (const uploadResult of result) { // result 배열의 각 요소를 uploadResult에 할당
        showUploadFile(uploadResult); // uploadResult 객체를 함수에 전달
    }
    // ... (생략)
});

// ... (생략)

function showUploadFile({ uuid, fileName, link }) { // uploadResult 객체의 속성을 변수에 할당
    // ... (생략)
}

 

설명

1. uploadToServer(formObj)는 서버에 파일을 업로드하는 비동기 작업을 수행하고, 결과(result)를 Promise 객체로 반환합니다.
2. .then(result => { ... })는 Promise가 성공적으로 완료되었을 때 실행되는 콜백 함수입니다. 이 함수 내에서 for (const uploadResult of result) 반복문을 통해 result 배열의 각 요소를 uploadResult 변수에 할당합니다.
3. showUploadFile(uploadResult)는 uploadResult 객체를 showUploadFile 함수에 전달합니다.
4. function showUploadFile({ uuid, fileName, link }) { ... }에서 구조 분해 할당을 사용하여 uploadResult 객체의 uuid, fileName, link 속성을 각각 같은 이름의 변수에 할당합니다. 이렇게 하면 함수 내부에서 이 변수들을 직접 사용할 수 있습니다.

구조 분해 할당의 장점

• 가독성 향상: 매개변수 이름을 명시적으로 지정하여 코드의 의미를 명확하게 전달합니다.
• 간결한 코드: 객체의 속성을 일일이 접근하는 번거로움을 줄여 코드를 간결하게 작성할 수 있습니다.
• 유연성: 필요한 속성만 선택적으로 추출할 수 있습니다. (예: showUploadFile({ fileName }))

🍯 꿀팁:

• 구조 분해 할당은 객체뿐만 아니라 배열에도 사용할 수 있습니다.
• 기본값 설정({ uuid, fileName, link = "defaultLink" })이나 rest 패턴({ uuid, fileName, ...rest })도 활용할 수 있습니다.

🚀 마무리:

자바스크립트 구조 분해 할당을 사용하면 함수 매개변수를 깔끔하고 효율적으로 처리할 수 있습니다. 이제 여러분도 복잡한 매개변수 전달에서 벗어나 깔끔한 코드를 작성해 보세요!