javascript/javascript 심화지식

나머지 매개변수, 전개구문 / (Rest parameters, Spread syntax)

honey.kikiki 2021. 7. 12. 23:19
728x90

 나머지 매개변수, 전개구문

(Rest parameters, Spread syntax)

 

...

인수전달

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

showname("Mike"); // 'Mike'

showname("Mike", "Tom"); // '?

showName(); // undefined

 

arguments

1. 함수로 넘어 온 모든 인수에 접근

2. 한수내에서 이용 가능한 지역 변수

3. length / index

4. array 형태의 객체

5. 배열의 내장 메서드 없음 (forEach, map)

 

function showname(name) {
  console.log(arguments.length);
  console.log(arguments[0]);
  console.log(arguments[1]);
}

showName("Mike", "Tom");

//2
// "Mike"
// "Tom"

 

나머지 매개변수

 

function showName(...names) {
  console.log(names);
}

showName(); // []

showName("Mike"); // ["Mike"]

showName("Mike", "Tom"); // ["Mike", "Tom"]

 

전달 받은 모든 수를 더해야함

 

function add(...number) {
  let result = -number.forEach((num) => {
    result += num;
  });

  console.log(result);
  //6
  //55
}

function add(...number) {
  let result = number.reduce((prev, cur) => {
    prev + cur;
  });

  console.log(result);
  //6
  //55
}

add(1, 2, 3);

add(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);

 

user 객체르 만들어 주는 생성자 함수를 만든다

 

function User(name, age, ...skill) {
  this.name = name;

  this.age = age;

  this.skills = skills;
} // 나머지 매개변수는 마지막에 있어야한다

const user1 = new user("Mike", 30, "html", "css");

const user2 = new user("Mike", 20, "js", "React");

const user2 = new user("Mike", 10, "English");

 

전개구문 : 배열

let arr1 = [1, 2, 3];

let arr2 = [4, 5, 6];

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

// result = [1,2,3,4,5,6]

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

// result = [0,1,2,3,4,5,6,7,8,9]

arr.push() / arr.splice()/ arr.concat() 대신사용한다

 

let arr = [1, 2, 3];

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

let user = { name: "Mike", age: 30 };

let user2 = { ...user };

user2.name = "Tom";

// user.name = 'Mike'

// user2.name = 'Tom'

복제가 가능하다

 

arr1 을 [4,5,6,1,2,3]으로

 

let arr1 = [1,2,3]

let arr2 = [4,5,6]

 

arr2.reverse().forEach((num) => {

arr1.unshift(num)

//[6,5,4,1,2,3] 차례대로 앞으로 들어가기 떄문에 숫자를 역순으로 바꾸어준다 .reverse

//[4,5,6,1,2,3]

});

전개구문을 이용하면 간단하게 가능하다

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

//[4,5,6,1,2,3]

 

-------------------------------------------

 

let user = { name: "Mike" };
let info = { age: 30 };
let fe = ["JS", "React"];
let lang = ["korea", "English"];

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

{
  name: "Mike";
  age: 30;
}

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

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

{
  name: "Mike";
  age: 30;
  skills: ["JS", "React", "korea", "English"];
}

 

전개 구문을 사용할시 위에를 간단하게 사용가능

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