JavaScript for React 2

- 객체(Object)와 배열(Array)

const sandwich = {
    bread: "더치 크런치",
    meat: "참치",
    cheese: "스위스",
    toppings: ["상추","토마토","머스타드"]
};

const {bread, meat} = sandwich;

console.log(bread, meat); // 더치 크런치 참치

위의 코드는 bread와 meat에 sandwich에 있는 같은 이름의 필드 값으로 초기화 된다.

const lordify = reqularPerson => {
    console.log(`캔터베리의 ${reqularPerson.firstname}`);
};

var reqularPerson = {
    firstname: "현석",
    lastname: "오"
};

lordify(reqularPerson); // 캔터베리의 현석

const lordify = ({firstname}) => {
    console.log(`캔터베리의 ${firstname}`);
};

var reqularPerson = {
    firstname: "현석",
    lastname: "오"
};

lordify(reqularPerson); // 캔터베리의 현석

위의 2개의 코드는 같은 값을 출력한다.

const lordify = ({spouse: {firstname}}) => {
    console.log(`캔터베리의 ${firstname}`);
};

var reqularPerson = {
    firstname: "현석",
    lastname: "오",
    spouse: {
        firstname: "계영",
        lastname: "이"
    }
};

lordify(reqularPerson); // 캔터베리의 계영

위는 객체안의 객체를 호출하는 함수 구조이다.

 

- 배열 구조 분해

const [firstAnimal] = ["캥거루","웜뱃","코알라"];

console.log(firstAnimal); // 캥거루

const [,,thirdAnimal] = ["캥거루","웜뱃","코알라"];

console.log(thirdAnimal); // 코알라

- 객체 리터럴 개선

: 구조 분해의 반대  

const name = "탈락";
const elevation = 9738;

const funHike = {name, elevation};

console.log(funHike); // {name: "탈락", elevation: 9738}

- 스프레드 연산자(spread operator)

: 3개의 점(...)으로 이뤄진 연산자로 몇 가지 다른 역할을 담당한다.

const A = ["에이",'a','A'];
const B = ["비",'b','B'];
AplusB = [...A,...B];

console.log(AplusB) // [ '에이', 'a', 'A', '비', 'b', 'B' ]

- 레스트 파라미터(rest parameters)

: 함수 파라미터 정의에서 스프레드 연산자로 쓰이는 파라미터

function nest(...args) {
    let [first, ...remain] = args;
    let [finish, ...stops] = remain.reverse();

    console.log(`${args.length} 개`);
    console.log(`첫번째 인자 : ${first}`);
    console.log(`마지막 인자 : ${finish}`);
    console.log(`나머지 인자 갯수 : ${stops.length}`);
}

nest(1,2,3,4,5,6,7)