[JavaScript-58] 함수와 구조분해(매우 중요)

이번 내용은 좀 어렵습니다.

그런데, {정말 x 10e999} 중요합니다....

 

리액트나 여러 프레임워크를 사용할 때 함수의 파라미터 부분에 구조분해 문법을 적용시키는 경우가 정말 많거든요.

그래서, 이번 내용은 반복해서 보시면서, 무조건 이해를 하셔야 합니다. 

 

(1) 함수 파라미터 속에 객체를 구조분해 하기

const myCar = {
    brand: 'benz',
    model: 'E220'
    };

//함수 정의
const printMyCar = ({brand}) => {
    console.log(brand);
    };
    
//함수 호출
printMyCar(myCar); //benz

자, 주목해서 보셔야 할 부분은 printMyCar함수의 파라미터입니다!

우선, 함수 자체는 arrow function형태로 변수에 할당하여 함수 표현식으로 구현했구요!

 

파라미터 안에 중괄호가 있죠?

이렇게, 파라미터 안에 중괄호를 쓰면, 객체를 구조분해 할 수 있습니다!

객체의 구조분해 문법은 바로 전 시간에 배웠죠?

 

중괄호 속에는 객체의 프로퍼티 이름을 써주면 됩니다.

객체 안에 실제로 그 이름을 가진 프로퍼티가 있다면, 그 프로퍼티의 값을 갖게 되는거죠.

 

위의 코드에서, 함수 호출시에 myCar객체를 넘겨주었고,

파라미터의 구조분해식에는 brand프로퍼티 이름을 넘겨주고 있죠?

그럼, myCar객체의 brand프로퍼티의 프로퍼티 값이 저 자리에 들어가는 것입니다!

 

(2) 함수 파라미터 속에 배열을 구조분해 하기

const myCar = ['benz' , 'bmw', 'audi'];

//함수 정의
const printMyCar = ([one, two, three]) => {
    console.log(one);
    console.log(two);
    console.log(three);
    };
    
//함수 호출
printMyCar(myCar);

이렇게, 파라미터 안에 대괄호를 써주면, 배열을 구조분해 해서 값을 받아오게 됩니다.

배열 구조분해는 객체 구조분해와 달리, 아무런 이름이나 써줘도 된다고 배웠던 거, 기억나시죠?

 

(3) 함수 자체가 배열이나 객체를 리턴하는 경우의 구조분해식

 

우리가, 지금까지 배운 배열과 객체의 구조분해를 생각해보면,

 

const [ 값을 나눠받을 녀석들] = 나눠줄 배열;

const { 값을 나눠받을 녀석들(프로퍼티 네임과 같아야됨) } = 나눠줄 객체;

 

이런 식으로 썼었죠?

그런데, 등호 오른쪽의 나눠줄 배열과 나눠줄 객체 자리에, 

함수를 실행시킨 코드를 쓸 수 있습니다. 

 

const [ 값을 나눠받을 녀석들] = 함수( );

const { 값을 나눠받을 녀석들(프로퍼티 네임과 같아야됨) } = 함수( );

 

이렇게요!

이때, 함수들은 당연히 배열이나 객체를 return해야겠죠?

그럼, return값이 대입연산자를 타고 넘어가니까, 납득이 갑니다.

 

코드로 보며 이번 레슨을 마무리해볼게요

//객체를 반환하는 myCar함수 선언
const myCar = () => {
    return {
        brand: 'benz',
        model: 'E220'
        }
    };

//함수 호출부를 구조분해식에 사용
const {brand, model} = myCar();
console.log(brand); //benz
console.log(model); //E220