Javascript :: 나머지 매개변수, 전개 구문

Rest parameters 

Sprad syntax

 

 

//인수 전달
function showName(name){ //(name) 인수 개수 제한 없음
    console.log(name);
}
showName('Mike'); //Mike
showName('Mike','Tom'); //Mike
showName(); //undefined

Mike

Mike

 

자바스크립트에서 함수에 넘겨주는 인수의 개수는 제약이 없다

 

 

함수의 인수를 얻는 방법

- arguments 로 접근 (화살표 함수에는 arguments가 없다)

- 나머지 매개 변수를 사용

 

 

 

arguments

/* arguments */
function showName(name){
    console.log(arguments.length); //2
    console.log(arguments[0]); //Mike
    console.log(arguments[1]); //Tom
}
showName('Mike','Tom');

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

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

length / index

Array 형태의 객체

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

 

arguments 객체는 Array 가 아니다 Array와 비슷하지만,

length 빼고는 pop() 과 같은 어떤 Array 속성도 없다. 

그러나 실제 Array로 변환할 수 있다

 

 

---

 

 

나머지 매개변수 (Rest parameters)

/* 나머지 매개변수 Rest parameters */
function showName(...names){ //점 ...을 찍고 뒤에 배열 이름을 정해준다
    console.log(names);
}

showName(); // []
showName('Mike'); //['Mike']
showName('Mike','Tom'); //['Tom']

 

 

 

나머지 매개변수 전달받은 모든 수를 더하기

/* 
나머지 매개변수 전달받은 모든 수를 더하기
*/
function add(...numbers){ 
    //numbers는 배열이므로 length가 있을 것이다 따라서 for문 사용 가능
    let result=0;
    numbers.forEach((num)=> (result += num));
    console.log(result)
}

add(1,2,3);
add(1,2,3,4,5,6,7,8,9,10);

6

55

 

 

나머지 매개변수. user 객체를 만들어주는 생성자 함수 만들기

/* 
나머지 매개변수. user 객체를 만들어주는 생성자 함수 만들기
*/
function User(name,age, ...sikll){
    this.name = name;
    this.age=age;
    this.sikll=sikll;
}

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) : 배열

/* 전개 구문 (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]

 

 

전개 구문 (Spread syntax) : 객체

/* 전개 구문 (Spread syntax) : 객체 */
let user = {name:'Mike'}
let mike = {...user, age:30}
console.log(mike); //{name: 'Mike', age: 30}

 

전개구문 arr1을 [4,5,6,1,2,3] 으로 만들기

/* 
전개구문 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);

 

 

 

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);