나머지 매개변수
함수의 매개변수가 정해지지 않았거나 가변적일 때,
함수로 전달된 인수들을 배열로 처리할 수 있게 해주는 문법
세개의 점(...)을 매개변수 이름 앞에 사용하여 나타냄.
함수에 전달된 인수들 중에서
나머지 매개변수 앞에 오는 매개변수들을 제외한 나머지를 배열로 모아 처리.
기본문법
function 함수명(일반매개변수1, 일반매개변수2, ...나머지매개변수) { 함수 내용 }
나머지 매개변수는 함수 매개변수에서만 사용가능하고 , 매개변수 목록 마지막에 위치해야함.
하나의 함수에서 나머지 매개변수는 한번만 사용 가능.
function sumAll(...args) {
let sum = 0;
for (let arg of args) {
sum += arg;
}
return sum;
}
console.log(sumAll(1)); //1
console.log(sumAll(1, 2)); //3
console.log(sumAll(1, 2, 3)); //6매개변수로 오는값들을 args에 모으게 되는경우.
function showName(fristName, lastName, ...titles){
console.log(fristName +' '+ lastName); //Bora Lee
//나머지 인수들은 배열title의 요소가 됨
//title = ["Software Engineer", "Researcher"]
console.log(titles[0]); //Software Engineer
console.log(titles[1]); //researcher
console.log(titles.length); //2
}
showName("Bora","lee","Software Engineer","researcher")앞부분 2개의 매개변수는 변수로, 나머지 인수들"Software Engineer","researcher"은
title매개변수에 배열로 할당됨.
arguments 객체
함수 내에서 접근할 수 있는 특별한 객체.
함수에 전달된 모든 인수를 담고 있는 유사 배열 객체
유사 배열 객체이므로, 배열 메소드를 직접 사용할 수 없음.
arguments 객체를 사용하면 함수에 전달된 인수의 수에 상관없이 이를 함수 내에서 사용할 수 있음.
function showName() {
console.log( arguments.length );
console.log( arguments[0] );
console.log( arguments[1] );
// arguments는 이터러블 객체이기 때문에
// for(let arg of arguments) alert(arg); 를 사용해 인수를 펼칠 수 있습니다.
}
showName("Bora", "Lee");// 2, Bora, Lee가 출력됨
showName("Bora");// 1, Bora, undefined가 출력됨(두 번째 인수는 없음)arguments 객체와 화살표 함수
화살표 함수에서는 arguments 객체를 사용할 수 없음.
화살표 함수는 자신의 arguments 객체를 가지지 않으며,
대신에 화살표 함수를 감싸고 있는 가장 가까운 일반 함수의 arguments 객체를 참조함.
function f() {
let showArg = () => console.log(arguments[0]);
showArg();
}
f(1); // 1이걸 일반함수모양으로 바꾸면
function f() {
let showArg = function(){
console.log(arguments[0]);
showArg();
}
f(1); // undefined일반함수는 자신만의arguments값을 가짐.
showArg 매개변수로 값이 전해 지지 않았기때문에 undefined가 뜸.
하지만 화살표함수는 arguments 객체가 없기때문에
showArg를 감싸고 있는 f함수의 arguments의 값 1을 참조하게 됨. 그래서 1을 출력
스프레드 문법(전개 구문)
(...)로 표현되며, 배열이나 객체와 같은 이터러블(iterable) 또는
열거가능한 속성을 가진 객체를 개별 요소로 확장하거나 전개하는 데 사용됨.
스프레드 문법은 이터러블(예: 배열, 문자열 등) 또는 열거 가능한 속성을 가진 객체에만 사용할 수 있음.
객체 리터럴에서 사용할 때, 속성 이름이 같은 경우, 나중에 전개된 속성 값으로 덮어씌워짐.
- 함수 호출에서의 사용
-함수의 인수 목록으로 배열 요소를 개별적으로 전달할 때
function sum(a, b, c) {
return a + b + c;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6
// numbers 배열의 각 요소가 sum 함수의 인자 a, b, c로 전달.- 배열 리터럴에서의 사용
-하나의 배열 내에서 다른 배열의 요소를 통합하거나, 배열을 복사할 때
const part1 = [1,2];
const part2 = [3,4];
const combined = [...part1, ...part2];
const copied = [...part1]
console.log (combined); //[1,2,3,4]
console.log (copied); //[1,2] part1의 복사본-스프레드 문법을 평범한 값과 혼합해 사용하는 것도 가능
let arr1 = [1, -2, 3, 4];
let arr2 = [8, 3, -8, 1];
console.log(Math.max(...arr1, ...arr2)); // 8
console.log(Math.max(1, ...arr1, 2, ...arr2, 25)); // 25
let merged = [0, ...arr1, 2, ...arr2];
console.log(merged)// [0, 1, -2, 3, 4, 2, 8, 3, -8, 1]- 객체 리터널에서의 사용
-객체의 속성을 다른 객체에 복사하거나, 객체를 병합할 때 사용
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const combinedObj = { ...obj1, ...obj2 };
const copiedObj = { ...obj1 };
console.log(combinedObj); // { a: 1, b: 2, c: 3, d: 4 }
console.log(copiedObj); // obj1의 복사본, { a: 1, b: 2 }- 문자열에서 사용
-문자열도 이터러블 객체이므로 스프레드 문법을 사용할 수 있음.
let str = "Hello";
console.log( [...str] ); // ['H','e','l','l','o'] 코드에서 ...str은 문자열 'Hello'를 개별 문자 'H', 'e', 'l', 'l', 'o'로 분해됨.
이 분해된 문자들은 배열 리터럴 [...str] 안에서 배열의 요소가 됨.
따라서 결과적으로 ['H', 'e', 'l', 'l', 'o']라는 배열이 생성.
스프레드 문법이 작동하는 방식은 for..of 루프를 사용하여 이터러블 객체를 순회하는 것과 유사함.
for..of 루프는 이터러블 객체의 요소를 하나씩 순회하며 반환.
let str = "Hello";
for (let char of str) {
console.log(char); // 'H', 'e', 'l', 'l', 'o' 각각 출력됨
}- Array.from 메서드?
이터러블 객체나 유사 배열 객체를 얕은 복사하여 새로운 배열 인스턴스를 만드는 데 사용됨.
이 메서드는 특히 문자열과 같은 이터러블 객체를 배열로 변환하는 데 유용.
let str = "Hello";
let arr = Array.from(str);// Array.from을 사용해 문자열을 배열로 변환
console.log(arr); // ['H', 'e', 'l', 'l', 'o']Array.from 메서드는 단순히 이터러블을 배열로 변환하는 것뿐만 아니라,
두 번째 인자로 변환 함수를 받을 수 있어 변환 과정에서 요소를 동시에 처리할 수 있는 기능을 제공.
예를 들어, 문자열의 각 문자를 대문자로 변환하여 배열을 생성하는 것도 가능.
let str = "hello";
let arr = Array.from(str, char => char.toUpperCase());// 각 문자를 대문자로 변환하여 배열로 만듦
console.log(arr); // ['H', 'E', 'L', 'L', 'O']이터러블? 리터럴?
-
이터러블 : 반복 가능한 객체를 의미. 즉, 객체 내의 값들을 하나씩 차례대로 접근할 수 있는 객체.
Array, String, Map, Set 등이 있으며, 이터러블 객체는 for...of 반복문을 통해 순회할 수 있으며, 스프레드 문법을 사용하여 개별 요소를 전개 -
객채,배열 리터럴 : 중괄호({}) 또는 대괄호([])를 사용하여 직접 값을 할당,
객채와 배열을 각각 생성하고 초기화함.
배열과 객체의 복사본 만들기
배열과 객체의 복사본을 만드는 방법은 여러 가지가 있는데 여기서는 스프레드 방식을 소개.
- 배열의 복사본 만들기
let originalArray = [1, 2, 3];
let copyArray = [...originalArray];
copyArray.push(4);// 복사된 배열 변경
console.log(originalArray); // [1, 2, 3]
console.log(copyArray); // [1, 2, 3, 4]
//copyArray가 참조한 값originalArray는 변하지않음- 객체의 복사본 만들기
let originalObject = { a: 1, b: 2 };
let copyObject = { ...originalObject };
copyObject.c = 3;// 복사된 객체 변경
console.log(originalObject); // { a: 1, b: 2 }
console.log(copyObject); // { a: 1, b: 2, c: 3 }
//copyObject가 참조한 값 originalObject는 변하지않음