Rest & Spread

Rest Parameters

• 함수의 파라미터 중에서 필요한 차례의 매개변수까지 선언해준 후에
  “…변수명”를 해주면 그 이름의 배열이 된다.
• 보통은 rest라는 이름으로 많이 쓴다.
• 일반적인 함수 호출 방법

    function test(a,b, ...temp){
        console.log("두번째 인자의 값 =>", b);
        console.log("나머지 값들 =>", temp);
    }

    test("testA", "testB", "testC", "testD", "testE");

    //출력 1 : 두번째 인자의 값 => testB
    //출력 2 : 나머지 값들 => ["testC", "testD", "testE"]
    

※ 만약 5개를 받았는데 3번째 인자를 쓰고 싶다면
1번째에서 3번째까지의 매개변수까지는 선언을 해주고 “…변수명”을 해줘야 한다.

• 객체를 매개변수로 하는 함수 호출 방법

    function test({b, ...temp}){
        console.log("b의 값 =>", b);
        console.log("나머지 값들 =>", temp);
    }

    const obj = {
        x1 : 1,
        b : 3,
        x2 : 2
    };

    test(obj);

    //출력 1 : b의 값 => 3
    //출력 2 : {x1: 1, x2: 2}
    

※ 객체를 매개변수로 줄 때는 같은 이름의 항목이 있으면
바로 그 이름을 선언해서 순서상관없이 그 값을 가져올 수 있다.

Spread란?

• 변수를 가져와서 풀어준 다음 전개하는 것
• 일반적인 배열 출력

    const test = ["a", "b", "c"];
    console.log(test);  //출력 : ["a", "b", "c"], 배열 자체가 출력된다.
    

• Spread를 통한 배열 출력

    const test = ["a", "b", "c"];
    console.log(...test);  //출력 : a b c, 배열의 값들이 출력된다.
    

• Spread를 통한 배열 합치기

    const test1 = ["a", "b", "c"];
    const test2 = [1, 2, 3];

    const testMerge = [...test1, ...test2]; //[]와 쉼표 사용
    console.log(testMerge);  //출력 : ["a", "b", "c", 1, 2, 3]
    

• Spread를 통한 객체 합치기

    const test1 = {name : "test1", a : 1};
    const test2 = {name : "test2", b : 2};

    const testMerge = {...test1, ...test2}; //[]와 쉼표 사용
    console.log(testMerge);  //출력 : {name: "test2", a: 1, b: 2}
    

※ 만약에 같은 이름이 있다면 나중에 온 값으로 덮어씌워지게 된다.

• Spread를 통한 객체의 항목 추가
  • 기본 문법 : …(condition && object)
    • condition : 조건
    • object : 추가할 객체
  • 사용 예시

        const testText = prompt("whatever text");

        const testObject = {
            name : "testObject",
            ...(testText!=="" && {testText})
        };

        //{}를 붙이는 것은 Spread를 하기 위해 ...를 하려면 배열이나 객체여야 한다.

        //테스트 1 : testText가 ""인 경우
        console.log(testObject); //출력 : {name: "testObject"}

        //테스트 2 : testText가 "testText"인 경우
        console.log(testObject); //출력 : {name: "testObject", testText: "testText"}

        //해설
        /*
            1. 기본 문법에 의해서 && 앞에 오는 값이 true면 해당 객체에서는 && 뒤의 객체를 항목으로 추가한다.
            2. 원래는 ...(testText!=="" && testText)가 맞겠지만 testText는 객체가 아닌 문자열이니 {}를 붙여준다.
            3. ...(testText!=="" && {testText})를 원래대로 돌려보면 아래의 코드처럼 나온다.
            4. ...(testText!=="" && {testText : testText}), 변수명 단축의 원리가 적용되어 있다.
            5. 결론은 JavaScript가 똑똑해져버린 ES6부터 가능한 놀라운 기능이다. (익스플로러는 안 됨)
        */
        

Rest & Spread

• 변수를 가져와서 풀어준 다음 전개하는 것
• 객체에 있는 항목을 깔끔하게 없애기

    const user = {
        name: "who",
        age: 24,
        password: 12345,
    };
        
    user["password"] = null;

    console.log(user);  //출력 : {name: "who", age: 24, password: null}, 항목이 남아있다.

    const killPassword = ({ password, ...rest }) => rest;

    const cleanUser = killPassword(user);

    console.log(cleanUser); //출력 : {name: "who", age: 24}, 항목이 사라졌다.