js 최신 기능들

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax

전개 구문 - JavaScript | MDN

 

 

 

객체 스프레드 구문 추가 설명 

const feline = {legs: 4, family: 'Felidae'}
const canine = { isFurry: true, family: 'Caninae'}

{...feline, ...canine}
{legs: 4, family: 'Caninae', isFurry: true}

{...feline, ...canine, family:'newFamily'}
{legs: 4, family: 'newFamily', isFurry: true}

객체 스프레드 구문 파트에서 객체들을 확장시켜 연결했다. 

위 부분을 보면 family라는 변수가 충돌하게되는데 이렇게되면 후에 오는 객체의 설정값이 들어가게된다.

 

 

 

객체 분해 추가 설명 

const user = {
    email: "user@naver.com",
    password: "1234",
    firstName: 'ff',
    lastName: 'll',
    born: 2001
}

const e = user.email;
const p = user.password;
const f = user.firstName;
const l = user.lastName;
const b = user.born;

console.log(e,p,f,l,b);

const {email, password, firstName, lastName, born} = user;
console.log(email, password, firstName, lastName, born);

user@naver.com 1234 ff ll 2001
user@naver.com 1234 ff ll 2001

위에 예시처럼 일일이 객체의 변수를 대입해주는 방법도 있지만, 

객체의 변수 명을 똑같이 넣어서 나열하여 변수를 받아오는 방법도 있다. (이 방법이 제일 많이 쓰임) 

 

객체 분해 default값 설정 

const {email, password, firstName, lastName, born, died = "default value"} = user;

user 객체에 없는 변수를 받아올 경우 위에 처럼 초기화를 해주지 않으면 undefined로 나오고 위에처럼 초기화를 해주면 초기화한 값이 나온다.

 

 

Rest 매개 변수 추가 설명

https://ko.javascript.info/rest-parameters-spread

나머지 매개변수와 스프레드 문법

위 게시글 보면 arguments(인수 객체)와 화살표 함수에서 안되는 경우가 설명되어있음. 

 

 

 

매개 변수 분해 추가 설명

const user = {
    email: "user@naver.com",
    password: "1234",
    firstName: 'ff',
    lastName: 'll',
    born: 2001
}

function fullName(user) {
    return `${user.firstName} ${user.lastName}`;
}

function fullName2({firstName, lastName}) {
    return `${firstName} ${lastName}`;
}

console.log(fullName(user));
console.log(fullName2(user));

ff ll
ff ll

fullName함수처럼 객체 변수에 일일이 접근하는 방법도 있지만

fullName2 함수처럼 객체 분해를 이용하여 변수에 직접 접근하는 방법도 있다. (이 방법이 제일 많이 쓰임)