Javascript-8 (Rest parameters, Spread syntax)

Patrick·2021년 4월 13일
0

Javascript

목록 보기
8/18
post-thumbnail

1. 나머지 매개변수에 대해서

function show(name) {
  console.log(name);
}

show("Mike"); // 'Mike'
show('Mike', 'Tom'); // 'Mike'
show(); // undefined  넣지 않아도 상관은 없음
  • 함수에 넘겨주는 인수의 갯수는 제약이 없다

  • 갯수를 정하고 만들어도 갯수를 굳이 맞출 필요는 없다

    함수의 인수를 얻는 방법은 두 가지!

    1. 'arguments' 에 대해서!! (과거 추세 ⇒ 요즘x , arrow function에는 없다)

      • 함수로 넘어 온 모든 인수에 접근
      • 함수 내에서 이용 가능한 지역 변수
      • lenth / index 가 있으므로 배열이라고 생각 할 수 있지만, 사실 Array형태의 객체
      • 배열의 내장 메서드 없음 (forEach, map 등 사용 불가)
      function show(name) {
        console.log(arguments.length);
        console.log(arguments[0]);
        console.log(arguments[1]);
      }
      
      show("Mike", "Tom");
      
      // 2
      // 'Mike'
      // 'Tom'
      1. '나머지 매개 변수 (spread syntax)' 사용하는 방법

      (arrow function을 사용하면서 요즘 방법)

      function show(...names) {
        console.log(names);
      }
      
      show(); // [] <= undefiend가 아니라 빈 배열이 나타남
      show("Mike"); // ['Mike']
      show("Mike", "Tom"); // ['Mike', 'Tom']
      • ES6 환경이라면 가급적 나머지 매개 변수 권장

      • 나머지 매개 변수 : 정해지지 않은 인수의 갯수를 배열로 나타낼 수 있도록 한다

      • 사용법 : ...배열이름(...names)

        ⇒ 배열이므로 [ ], [Mike], ['Mike', 'Tom'] 이렇게 나온다

      나머지 매개 변수 예제1)

      function add(...numbers) {
        let result = 0;
        numbers.forEach((num) => (result += num));
        console.log(result);
      }
      
      add(1, 2, 3); // 6
      add(1, 2, 3, 4, 5, 6, 7, 8, 9, 10); // 55
      
      or
      
      function add(...numbers) {
        let result = numbers.reduce((prev, cur) => prev + cur);
        console.log(result);
      }
      
      add(1, 2, 3); // 6
      add(1, 2, 3, 4, 5, 6, 7, 8, 9, 10); // 55

      나머지 매개 변수 예제2)

      // * 나머지 매개변수
      // * user 객체를 만들어주는 생성자 함수 만들기
      
      function User(name, age, ...skills) {
        this.name = name;
        this.age = age;
        this.skill = skills;
      }
      
      const user1 = new User('Mike', 30, 'html', 'css')
      const user2 = new User('Tom', 19, 'JS', 'React')
      const user3 = new User('Jane', 25, 'English')
      
      console.log(user1);
      console.log(user2);
      console.log(user3);
      • 생성자 함수는 대문자로 시작하기

      • 나머지 매개변수는 제일 마지막에 작성

2. 전개구문(Spread syntax)에 대해서 : 배열

    기본 예시)

    ```jsx
    let arr1 = [1, 2, 3];
    let arr2 = [4, 5, 6];

    let result = [...arr1, ...arr2];

    console.log(result); // [1, 2, 3, 4, 5, 6]
    ```

    배열 예시)

    ```jsx
    let arr1 = [1, 2, 3];
    let arr2 = [4, 5, 6];

    let result = [0, ...arr1, ...arr2, 7, 8, 9];

    console.log(result); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
    ```

    - 원래 배열 안에서 빼고 넣고 하는 것은 arr.push, splice,concat 등을 사용하면서 복잡한 일이지만 전개구문을 이용하면 쉽다

    객체 예시)

    ```jsx
    let user =  {name : 'Mike'};
    let mike = {...user, age:30};

    console.log(mike); // {name: 'Mike', age: 30}
    ```

    복제 예시)

    ```jsx
    let arr = [1, 2, 3];
    let arr2 = [...arr]; // [1, 2, 3]
    ```

    ```jsx
    let user = { name: "Mike", age: 30 };
    let user2 = { ...user };

    user2.name = "Tom";

    console.log(user.name);
    console.log(user2.name);
    ```

    - object.assign 쓸 필요 없이 복제 가능!!

    예제 - 이렇게 하면 안됨

    ```jsx
    let arr1 = [1, 2, 3];
    let arr2 = [4, 5, 6];

    // arr1을 [4,5,6,1,2,3]으로 만들려면?

    arr2.forEach((num) => {
      arr1.unshift(num);
    }); 

    console.log(arr1); // [6, 5, 4, 1, 2, 3]
    ```

    예제 - 이렇게 해야 함

    ```jsx
    let arr1 = [1, 2, 3];
    let arr2 = [4, 5, 6];

    // arr1을 [4,5,6,1,2,3]으로 만들려면?

    arr2.reverse().forEach((num) => {
      arr1.unshift(num);
    });

    console.log(arr1); // [4, 5, 6, 1, 2, 3]
    ```

    - reverse( )를 시켜줘야 원하는 것이 나옴

    더 편하게 하려면?? **전개구문 사용!!**

    ```jsx
    let arr1 = [1, 2, 3];
    let arr2 = [4, 5, 6];

    // arr1을 [4,5,6,1,2,3]으로 만들려면?

    arr1 = [...arr2, ...arr1];

    console.log(arr1); // [4, 5, 6, 1, 2, 3]
    ```

    ---

    ---

    다른 예제) - 전개구문 없이 사용

    ```jsx
    let user = { name: "Mike" };
    let info = { age: 30 };
    let fe = ["js", "React"];
    let lang = ["Korean", "English"];

    user = Object.assign({}, user, info, {skills: []});

    fe.forEach((item) => {
      user.skills.push(item);
    });

    lang.forEach((item) => {
      user.skills.push(item);
    });

    console.log(user);
    ```

    ![https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f8db449c-e95d-4a5d-a0e9-c25d02c608fb/20210120_083724.png](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f8db449c-e95d-4a5d-a0e9-c25d02c608fb/20210120_083724.png)

    다른 예제) - 더 쉽게 하려면...

    ```jsx
    let user = { name: "Mike" };
    let info = { age: 30 };
    let fe = ["js", "React"];
    let lang = ["Korean", "English"];

    user = Object.assign({}, user, info, {skills: []});

    user.skills = [...fe, ...lang]

    console.log(user);
    ```

    **다른 예제) - 전개구문을 사용하면?🥙**

    ```jsx
    let user = { name: "Mike" };
    let info = { age: 30 };
    let fe = ["js", "React"];
    let lang = ["Korean", "English"];

    user = {
    	...user,
    	...info,
    	skills: [...fe, ...lang],
    };

    console.log(user);
    ```
profile
예술을 사랑하는 개발자

0개의 댓글