자바스크립트 중급 강좌 (나머지 매개변수, 전개 구문)

인수 전달

function showName(name){ * 인수(name)의 개수 제한 없음
	console.log(name);
}

showName('mike'); -> 'mike'
showName('mike','tom'); -> 'mike'

showName() -> undefined 출력

함수의 인수를 얹는 방법을 2가지가 있음
arguments
나머지 매개 변수

arguments

• 함수로 넘어 온 모든 인수에 접근
• 함수내에서 이용 가능한 지역 변수
• length / 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 parameters) * 권장사항

정해지지 않은 개수의 인수를 배열로 나타냄
...를 찍고 배열 이름을 정해줌
주의사항 나머지 매개변수는 항상 마지막에 작성하기

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

showName(); -> [] * 아무것도 전달하지 않으면 undefined 가 출력
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 = 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) -> age: 30 name: 'mike' skills ['html','css']
console.log(user2) -> age: 20 name: 'tom' skills ['Js','React']
console.log(user3) -> age: 10 name: 'jane' skills ['English']
* 나머지 매개 변수를 사용하여 배열의 형식으로 들어옴.

전개 구문(Spread syntax)

배열

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

let result = [...arr1, ...arr2];
let result = [0, ...arr1, ...arr2, 7, 8, 9]; * 이런식으로 중간에도 사용 가능


console.log(result); -> [1,2,3,4,5,6]

객체

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로 복제되기 때문에 기존 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 => { -> [6,5,4,1,2,3]
	arr1.unshift(num) 
})

* 해결법

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

* 전개구문 사용시

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

console.log(arr1);

객체 예제

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: Array(4)}
					age : 30
                    name : 'mike'
                    skills Array(4)
                    0 : 'JS'
                    1 : 'React'
                    2 : 'Korean'
                    3 : 'English'
                    length : 4
                    
* 전개구문 사용시

user = {
	...user,
	...info,
	skills : [...fe, ...lang]
};