전개구문이라고 불리는 Spread syntax 역시 공부를 하다보면 참 많이 볼 수 있다.
처음에는 저 점점점이 뭐지? 라는 생각만 들었는데, 알고나니 보인다.
어떻게 활용할 수 있는지도 함께 알아보자!
1. 나머지 매개변수에 대해서
function show(name) {
console.log(name);
}
show("Mike"); // 'Mike'
show('Mike', 'Tom'); // 'Mike' => error 발생하지 않는다,
show(); // undefined => error는 발생하지 않는다.-
함수에 넘겨주는 인수의 갯수는 제약이 없다
⇒ function show(name) 인자를 하나만 설정했지만, show('Mike', 'Tom'); 두개를 받아와도 error는 발생하지 않는다.
⇒ 인자 갯수를 정하고 만들어도, 정확히 갯수를 맞출 필요는 없다
⇒ 심지어 아무것도 넣지 않아도 error는 발생하지 않는다.
※ 함수의 인수를 얻는 방법은 두 가지! (argument, spread syntax)
-
'arguments' 로 접근 하는 방법!! (과거 추세 ⇒ 요즘x , arrow function에는 arguments가 없다)
- 함수로 넘어 온 모든 인수에 접근 할 수 있다
- 함수 내에서 이용 가능한 지역 변수이다
- length / index 가 있으므로 배열이라고 생각 할 수 있지만, 사실 Array형태의 객체
- Array 형태의 객체는 length / index 등의 속성을 가지고 있지만, 배열의 내장 메서드(forEach, map 등) 없음 (forEach, map 등 사용 불가)
function show(name) { console.log(arguments.length); console.log(arguments[0]); console.log(arguments[1]); } show("Mike", "Tom"); // 2 // 'Mike' // 'Tom'- '나머지 매개 변수 (spread syntax)' 사용하는 방법
(arrow function을 사용하면서 요즘 방법)
function show(...names) { console.log(names); } show(); // [] // => 아무것도 전달되지 않으면 undefiend가 아니라 빈 배열이 나타남 show("Mike"); // ['Mike'] show("Mike", "Tom"); // ['Mike', 'Tom']-
ES6 이상의 환경이라면 가급적 나머지 매개 변수 권장
-
arguments와 다르게 배열의 메소드를 사용 할 수 있다
-
나머지 매개 변수 : 정해지지 않은 인수의 갯수를 배열로 나타낼 수 있도록 한다
-
사용법 : ...배열이름 ex. show(...names)
⇒ 배열이므로 [ ], [Mike], ['Mike', 'Tom'] 이렇게 나온다
나머지 매개 변수 예제1)
Q. 전달 받은 모든 수를 더해라! function add() {} add(1, 2, 3); add(1, 2, 3, 4, 5, 6, 7, 8, 9, 10); -------------------------------------------------------------------- A-1. 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 or A-2. 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나머지 매개 변수 예제2)
// * 나머지 매개변수 // * user 객체를 만들어주는 생성자 함수 만들기 function User(name, age, ...skills) { this.name = name; this.age = age; this.skill = skills; } const user1 = new User('Mike', 30, 'html', 'css') const user2 = new User('Tom', 19, 'JS', 'React') const user3 = new User('Jane', 25, 'English') console.log(user1); console.log(user2); console.log(user3);- 생성자 함수는 대문자로 시작하기
- 나머지 매개변수는 제일 마지막에 작성
-
2. 전개구문(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 arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let result = [0, ...arr1, ...arr2, 7, 8, 9];
console.log(result); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]- 원래 배열 안에서 빼고 넣고 하는 것은 arr.push( ), splice( ), concat( ) 등을 사용하면서 복잡한 일이지만 전개구문을 이용하면 쉽다
객체 예시)
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);
console.log(user2.name);- object.assign 쓸 필요 없이 복제 가능!!
예제 - 이렇게 하면 안됨
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
// arr1을 [4,5,6,1,2,3]으로 만들려면?
arr2.forEach((num) => {
arr1.unshift(num);
});
console.log(arr1); // [6, 5, 4, 1, 2, 3]- unshift를 했으므로 4가 제일 앞에 오고, 그 다음 5가 제일 앞에 오고, 그 다음 6이 제일 앞으로 오면서 6, 5, 4 순서가 되어버린다.
예제 - 이렇게 해야 함
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
// arr1을 [4,5,6,1,2,3]으로 만들려면?
arr2.reverse().forEach((num) => {
arr1.unshift(num);
});
console.log(arr1); // [4, 5, 6, 1, 2, 3]- reverse( )를 시켜서 역순으로 만들어주면 원하는 것이 나온다
더 편하게 하려면?? 전개구문 사용!!
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
// 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);다른 예제) - 더 쉽게 하려면...
let user = { name: "Mike" };
let info = { age: 30 };
let fe = ["js", "React"];
let lang = ["Korean", "English"];
user = Object.assign({}, user, info, {skills: []});
user.skills = [...fe, ...lang]
console.log(user);다른 예제) - 전개구문을 사용하면?
let user = { name: "Mike" };
let info = { age: 30 };
let fe = ["js", "React"];
let lang = ["Korean", "English"];
user = {
...user,
...info,
skills: [...fe, ...lang],
};
console.log(user);.jpg)
예술을 사랑하는 개발자