[JavaScript] 중급 #10 - 나머지 매개변수, 전개 구문 (Rest parameters, Spread syntax)

 

… : 나머지 매개변수, 점 3개로 표시

 

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

함수 호출 시에 인수 개수를 맞추지 않아도 에러는 발생하지 않지만 원하는 결과값이 나오지 않을 수 있음

 

함수의 인수를 얻는 방법

1.      arguments

2.      나머지 매개 변수

 

과거에는 arguments만 있었으나 현재는 여러 장점이 있는 나머지 매개 변수를 사용하는 추세

결정적으로 화살표 함수에는 arguments가 없음

 

arguments

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

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

  -  length/index 속성이 있음

  -  Array 형태의 객체

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

 

e.g.)

 

 

나머지 매개변수(Rest parameters)

  -  정해지지 않은 개수의 인수를 배열로 나타냄

 

 

e.g.)

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 출력

 

e.g.) user객체를 만들어주는 생성자 함수 (생성자 함수는 첫 글자를 대문자로)

function User(name, age, ...skills) {
	this.name = name;
	this.age = age;
	this.skills = skills;
}

const user1 = new User("Baby", 10, "html", "css");
const user2 = new User("Angel", 20, "JS", "React");
const user3 = new User("Noonsong", 30, "English");

console.log(user1); // User { name: “Baby”, age: 10, skills: [“html”, “css”] }
console.log(user2); // User { name: “Angel”, age: 20, skills: [“JS”, “React”] }
console.log(user3); // User { name: “Noonsong”, age: 30, skills: [“English”] }

 

  →  나머지 매개변수는 항상 제일 마지막에 위치해야 함

 

 

전개 구문(Spread syntax)

e.g.) 배열

 

e.g.) 객체

 

e.g.) 복제

let arr = [1, 2, 3];
let arr2 = [...arr]; // [1, 2, 3]

let user = { name: "Angel", age: 30 };
let user2 = { ...user };

user2.name = "Noonsong";

console.log(user.name); // “Angel” 출력
console.log(user2.name); // “Noonsong” 출력

 

 

 

 

↓[코딩앙마] 자바스크립트 중급 강좌 링크

https://www.youtube.com/watch?v=lekNM8ldxno