JS 배열(array) , 객체(object), 매개변수 분해

분해를 사용하면 배열이나 객체, 매개변수를 분해할 수 있다.

 

배열의 분해는 

const score = [10, 9, 8, 6, 4, 3, 2, 1]

const [number1, number2, number3, ...everyoneElse] = score;

 

위의 두 코드중 아래코드처럼 분해할 수 있다. 그럼 number1,2,3 everyoneElse가 순서대로 위 score 함수에 맞춰서

새로 생성된다.

 

number1 = 10  // number2 = 9 // number3 = 8 // evryoneElse = 6,4,3,2,1

 

객체의 분해는 

 

const user = {

    email: 'junyoungk@gmail.com',

    password: '4394930',

    firstName: 'kim',

    lastName: 'jun',

    born: '2000',

    died: '2020'

}

const user2 = {

    email: 'junyoungk@gmail.com',

    password: '4394930',

    firstName: 'kim',

    lastName: 'jun',

    born: '2000'

}

const { email, password, firstName, lastName, born, died } = user

const { email2, password2, firstName2, lastName2, born2, died2 = "Not Yet" } = user2

email을 입력하면 junyoungk@gmail.com, password는 4394930, firstName은 kim 등이 입력되고

user, user2의 차이점인 died의 유무를 비교하여 user2의 분해에는 died2에 Not Yet으로 디폴트값을 지정했다.

이렇게 함으로 died2를 입력하면 user2 객체에는 died가 없지만 디폴트값으로 Not Yet이 나온다. 

이 방법은 const email = user.email ........... 로 하나하나 입력해주는 것과 결과는 같지만 매우 효율적이다. 

 

매개변수의 분해는 

const user = {

    email: 'junyoungk@gmail.com',

    password: '4394930',

    firstName: 'kim',

    lastName: 'jun',

    born: '2000',

    died: '2020'

}

function fullName({ firstName, lastName }) {

    return `${firstName} ${lastName}`

}

 

이후 fullName(user) 를 입력하면 kim jun이 return 된다.

그 이유는 fullName의 매개변수에 {firstName, lastName} 을 입력하고 

fullName(user) 즉, 인수로 user를 입력했기 때문에 {firstName, lastName } = user 로 입력이 되어

user 함수의 firstName와 lastName의 키 값을 받아 입력이 되었기 때문이다. 

( 이것도 매개변수의 lastName = what 을 넣는등의 디폴트 값을 줄 수 있음 )