spead, rest operator

Javascript 2022. 1. 22. 23:44
반응형

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

 

전개 구문 - JavaScript | MDN

전개 구문을 사용하면 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수 (함수로 호출할 경우) 또는 요소 (배열 리터럴의 경우)로 확장하여, 0개 이상의 키-값의 쌍으로 객체로 확장시

developer.mozilla.org

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];

console.log(sum(...numbers));
// expected output: 6

console.log(sum.apply(null, numbers));
// expected output: 6

전개 연산자와 나머지 연산자로 구분 

 

전개 연산자는 배열의 요소나 객체의 속성을 나누는데 사용됨 

따라서 우리는 배열이나 객체를 전개 할수 있음 

예를 들어 배열의 모든 요소를 새로운 배열에 추가 하고 싶다면 

그리고 한두개의 요소를 더 추가 하고 싶다면 

 

const numbers = [1, 2, 3];

const arr2 = [...numbers, 5, 6];

console.log(arr2)

또는 객체의 새로운 속성을 추가해 복사 하고싶을 경우 

const person = {
  name: "hong",
};

const person2 = {
  ...person,
  age: 28,
};

console.log(person2);

 

 

(나머지 연산자)rest의 경우다르게 사용한다 

매개변수 리스트를 배열로 통합 한다 
class User {
  name;
  age;
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

let user1 = new User("hong", 20);
let user2 = new User("lim", 21);

function addUsers(...args) {
  return args.sort();
}

const users = addUsers(user1, user2);
console.log(users);

args는 매개변수를 무한정 받는다 

const filter = (...args) => {
  return args.filter((x) => x > 2);
};

console.log(filter(1, 2, 3, 4, 5));

[output]

[ 3, 4, 5 ]

 

https://jsbin.com/binutipadi/edit?js,console 

 

JS Bin

Sample of the bin:

jsbin.com

 

반응형
: