#10. Rest parameters, Spread syntax

Seulyi Yoo·2022년 7월 8일
0

javascript grammar

목록 보기
10/20
post-thumbnail

// 인수전달
// arguments, 나머지 매개 변수
// 화살표함수에는 arguments 없음 

function showName(name) { // (name) -> 개수 제한 없음
  console.log(name);
};
showName('Mike'); // 'Mike'
showName('Mike', 'Tom'); // 'Mike'

showName(); // undefined

arguments?

  • 함수로 넘어 온 모든 인수에 접근
  • 함수 내에서 이용 가능한 지역변수
  • length / index
  • Array 형태의 객체
  • 배열의 내장 메소드 없음(forEach, map)
function showName(name) {
  console.log(arguments.length); // 2
  console.log(arguments[0]);  // "Mike"
  console.log(arguments[1]); // "Tom"
}

showName('Mike', 'Tom');
// 나머지 매개변수(Rest parameters)

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

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

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

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

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

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

const user1 = new User('Mike', 30, 'html', 'css');
const user2 = new User('Tom', 20, 'JS', 'React');
const user3 = new User('Jane', 10, 'English');

console.log(user1); // {name: 'Mike', age: 30, skills: ['html', 'css']}
console.log(user2); // {name: 'Tom', age: 20, skills: ['JS', 'React']}
console.log(user3); // {name: 'Jane', age: 10, skills: ['English']}

Spread syntax

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

let result = [...arr1, ...arr2];
console.log(result); // [1, 2, 3, 4, 5, 6]

let result2 = [0, ...arr1, ...arr2, 7, 8, 9];
console.log(result2); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

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

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

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

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

let user = {name: 'Mike', age: 30};
let user2 = {...user};

user2.name = "Tom";

console.log(user.name); // 'Mike'
console.log(user2.name); // 'Tom'

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

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

arr2.forEach((num) => {
  arr1.unshift(num);
});
console.log(arr1); // [6, 5, 4, 1, 2, 3]

arr2.reverse().forEach((num) => {
  arr1.unshift(num);
});
console.log(arr1); // [4, 5, 6, 1, 2, 3]

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

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

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);
// { name: 'Mike', age: 30, skills: ['JS', 'React', "Korean", "English"]}

user = {
  ...user, ...info, skills: [...fe, ...lang]
};
console.log(user);
// { name: 'Mike', age: 30, skills: ['JS', 'React', "Korean", "English"]}
profile
성장하는 개발자 유슬이 입니다!

0개의 댓글