Web Devlopment/JavaScript
#10 나머지 매개변수, 전개 구문(Rest parameters, Spread syntax)
키모형
2025. 3. 19. 02:11
반응형
arguments
- 함수로 넘어 온 모든 인수에 접근
- 함수 내에서 이용 가능한 지역 변수
- lenght / index 를 가짐
- Array 형태의 객체
- 배열의 내장 메서드 없음 (forEach, map 사용안됨)
function showName(name){
console.log(arguments.length);
console.log(arguments[0]);
console.log(arguments[1]);
}
showName('Mike', 'Tom');
// 2
// Mike
// Tom
나머지 매개변수 (Rest parmeters)
... 으로 표현
function showName(...names){
console.log(names);
}
showName();
showName('Mike');
showName('Mike', 'Tom');
[]
[ 'Mike' ]
[ '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
/*********************************
나머지 매개변수
user 객체를 만드어 주는 생성자 함수
**********************************/
function Users(name, age, ...skils){
this.name=name;
this.age=age;
this.skils=skils;
}
const user1 = new Users('Mike', 30, 'html', 'css');
const user2 = new Users('Tom', 24, 'JS', 'React');
const user3 = new Users('Han', 28, 'English');
console.log(user1);
console.log(user2);
console.log(user3);
// Users { name: 'Mike', age: 30, skils: [ 'html', 'css' ] }
// Users { name: 'Tom', age: 24, skils: [ 'JS', 'React' ] }
// Users { name: 'Han', age: 28, skils: [ 'English' ] }
전개 구문 (Spread syntax) : 배열
//전개 구문 (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 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);
console.log(user2.name);
// Mike
// 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);
// });
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, {
// skiles:[],
// });
// fe.forEach((item)=> {
// user.skiles.push(item)
// });
// lang.forEach((item)=> {
// user.skiles.push(item)
// });
user = {
...user,
...info,
skils: [...fe, ...lang]
}
console.log(user);
// {
// name: 'Mike',
// age: 30,
// skiles: [ 'JS', 'React', 'Korean', 'English' ]
// }
반응형