[자바스크립트] 나머지 매개변수, 전개 구문
나머지 매개변수
인수전달
function showName(name){
console.log(name);
} // name에 개수 제한 없음
showName('Mike'); // 'Mike'
showName('Mike', 'Tom'); // ?
showName(); // undefined
- 이럴 경우를 대비하여 arguments & 나머지 매개 변수 사용
argument
- 함수로 넘어 온 모든 인수에 접근
- 함수내에서 이용 가능한 지역 변수
- length / index
- Array 형태의 객체
- 배열의 내장 메서드 없음 (forEach, map)
- 화살표 함수에서 사용 불가
function showName(name){
console.log(argument.length);
console.log(argument[0]);
console.log(argument[1]);
}
showName('Mike', 'Tom'); // 2 // '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);
}
function add(...numbers) {
let result = 0;
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
- 나머지 매개변수
- user 객체를 만들어 주는 생성자 함수를 만들어준다.
function User(name, age, ...skill){
this.name = name;
this.age = age;
this.skill = 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);
console.log(user2);
console.log(user3);
전개 구문(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); // "Mike" user.name의 값은 바뀌지 않는다.
console.log(user2.name); // "Tom"
Author And Source
이 문제에 관하여([자바스크립트] 나머지 매개변수, 전개 구문), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@tmdckzm/자바스크립트-나머지-매개변수-전개-구문
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
function showName(name){
console.log(name);
} // name에 개수 제한 없음
showName('Mike'); // 'Mike'
showName('Mike', 'Tom'); // ?
showName(); // undefined
function showName(name){
console.log(argument.length);
console.log(argument[0]);
console.log(argument[1]);
}
showName('Mike', 'Tom'); // 2 // 'Mike' // 'Tom'
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);
}
function add(...numbers) {
let result = 0;
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, ...skill){
this.name = name;
this.age = age;
this.skill = 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);
console.log(user2);
console.log(user3);
전개 구문: 배열
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); // "Mike" user.name의 값은 바뀌지 않는다.
console.log(user2.name); // "Tom"
Author And Source
이 문제에 관하여([자바스크립트] 나머지 매개변수, 전개 구문), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@tmdckzm/자바스크립트-나머지-매개변수-전개-구문저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)