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

지환·2024년 6월 11일
0

자바스크립트

목록 보기
19/30
post-thumbnail

출처 | https://www.youtube.com/watch?v=lekNM8ldxno&list=PLZKTXPmaJk8JZ2NAC538UzhY_UNqMdZB4&index=10

arguments란

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

  • 함수 내에서 이용 가능한 지역변수

  • length / index

  • Array 형태의 객체이다

    • 배열의 내장 메소드 없음(forEach,map)

나머지 매개변수(Rest parameters)

  • 아무것도 전달하지 않으면 [] 빈 배열 반환
function add(...number){
   let result = 0;
   number.forEach((num)=>(result += num));
   console.log(result); 
}

add(1,2,3); // 6
  • number는 배열이고 배열의 메소드를 사용 할 수 있다.

생성자 전개구문

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('Jane',20,'Js','React');
const user3 = new User('Jihwan',25,'English');

console.log(user1);
console.log(user2);
console.log(user3);

---
  
User { name: 'Mike', age: 30, skills: [ 'Html', 'css' ] }
User { name: 'Jane', age: 20, skills: [ 'Js', 'React' ] }
User { name: 'Jihwan', age: 25, skills: [ 'English' ] }

전개구문 : 배열

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

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

console.log(arr3)

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

// 나는 [4,5,6,1,2,3] 이렇게 출력하고 싶어 어떻게 해야돼?

arr2.forEach((item)=>{
    arr.unshift(item);
})

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

전개구문 : 객체

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

// 여기서 users의 원본 객체가 바뀔까? --> No 깊은복사된다.
console.log(user2)

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

// 전개 구문: 객체
// Object.assign을 쓸 필요가 x
let user = {name: 'Mike'}
let mike = {...user, age:30}
console.log(mike) // {name:"Mike", age:30}

reverse를 이용한다.

arr2.reverse().forEach((item)=>{
    arr.unshift(item);
})

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

user에 info를 넣고 fe와 lang을 skills을 만들어 넣기

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

users = Object.assign({},user,info,{
    skills:[]
}); // 새로운 Object 객체 형태가 생성된다.

fe.forEach((item)=>{
    users.skills.push(item); //JS React를 담는다.
})

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

이런식으로 저장해야된다.. 너무 불편해!

그래서 전개구문을 사용하면 코드의 양이 줄어든다.

user = {
    ...users,
    ...info,
    skills:[...fe,...lang],
}
profile
아는만큼보인다.

0개의 댓글