Spread Operator
Spread Operator는 배열, 문자열과 같이 iteration 형탱의 데이터를 요소 하나하나로 모두 분해해서 사용할 수 있게 해 줍니다.
let arr1 = [4,5,6];
let arr2 = [1,2,3];
let arr3 = [...arr1, ...arr2]
console.log(arr3);
let cd = "CD";
let alphabet = ['A', 'B', ...cd];
console.log(alphabet);Object Destructuring
Object Destructuring은 Object에 저장된 데이터를 분해해서 필요한 데이터만 바로 추출해서 사용할 수 있도록 합니다.
function getPerson(){
return {
firstName : "John",
lastName : 'Doe',
age : 37,
email : "john@gmail.com",
city : "New York",
country : 'USA'
};
}
var {firstName, lastName} = getPerson(); // 사용하려는 데이터가 저장되어 있는 키 이름만 정의하면 Object에서 해당 키를 갖는 값을 바로 추출해서 사용할 수 있음
console.log(firstName);
console.log(lastName);
function displayFullName({firstName, lastName}){ // 전달받은 Object 데이터에서 필요한 데이터의 키만 정의해서 사용
console.log(`${firstName} ${lastName}`);
}
displayFullName(getPerson()) // 함수 호출 시 Object를 파라미터 값으로 전달Array Destructuring
일반적으로 배열에 저장된 요소에 접근하기 위해서는 배열에 저장된 순서인 인덱스 번호를 사용하게 됩니다.
function getScore(){
return [70, 80, 90];
}
let scores = getScore();
let x = scores[0], // 배열의 인덱스 번호로 데이터에 접근
y = scores[1],
z = scores[2];
Array Destructuring은 배열에 저장된 요소를 분해하여 배열의 순서에 따라 변수를 정의 할 수 있게 해 줍니다.
function getScore(){
return [70, 80, 90];
}
let [x, y, z] = getScore();
console.log(x);
console.log(y);
console.log(z);
실무에서 Array Destructuring을 가장 많이 사용했던 경우는 위도, 경도 데이터를 반환받을 때였습니다. 일반적으로 위도, 경도 정보를 계산할 수 있는 대부부늬 외부 라이브러리는 위도, 경도 정보를 배열 형태로 반환합니다.
데이터를 정상적으로 가져와도 위도, 경도라는 데이터의 의미가 coordinate[0], coordinate[1]로 할당이 되기 때문에 프로그램을 구현하다 보면 어느 것이 위도이고 어느 것이 경도인지 혼란스러울 때가 많습니다. 이럴 경우 Array Destructuring을 사용하면 배열의 데이터르르 내가 지정한 변수명으로 바로 담을 수 있어서 프로그램 구현 시 변수명을 보고 어떤 데이터 인지 바로 확인 가능해진다.
function getCoordinates(){
return [20, 130, 30, 40]
}
let [longitude, latitude, ...args]= getCoordinates()
console.log(longitude); // 경도
console.log(latitude); // 위도
console.log(...args) // 나머지Default Function Parameter
함수를 호출할 때 함수의 파라미터로 값을 전달하지 않으면, 함수 내에서 해당 파라미터는 undefined가 됩니다. 만약 파라미터가 함수 내에서 특정 기능을 구현하기 위해 반드시 값이 필요한 상태라면, 함수를 호출하는 곳에서 파라미터 값을 전달하지 않아서 에러가 발생하게 됩니다. 이런 상황을 피하기 위해서 함수 내에서는 함수를 호출할 때 파라미터에 값이 전달되었는지를 확인하는 코드를 구현해야 합니다.
function say(message = "파라미터가 넘어오지 않았어요") { // 기본 값이 파라미터에 선언되어 있어서 함수를 호출할 때 파라미터 값을 전달하지 않아도 사용할 수 있음
console.log(message);
}
say()이렇게 하면 함수를 호출하는 곳에서 파라미터 값을 전달했는지 안했는지를 함수 내에서 일일이 확인할 필요가 없고, 파라미터 값이 전달되지 않아서 생길 수 있는 함수 요류를 미리 방지할 수있습니다.
Rest Parameter
파라미터를 2개 정의하면 함수를 호출할 때 2개의 값을 전달할 수 있고, 파라미터를 4개 정의하면 함수를 호출할 때 4개의 값을 전달할 수 있습니다. 만약 계산기의 더하기 함수를 만들 때, 사용자가 몇 개의 수를 더할 것인지 2개 혹은 4개로 미리 정하면 그 범위 내에서만 계산하기 때문에 제대로 된 기능을 하는 함수를 구현할 수 없습니다.
function sum(x1, x2) {
let y = x1 + x2;
return y;
}
sum(4, 6);
function sum(x1, x2, x3, x4){
let y = x1 + x2 + x3 + x4
return y
}
sum(3,5,3,2)function sum(...args) { // 파라미터를 이렇게 선언하면, 함수 호출 시 파라미터를 개수애 상관없이 할당할 수 있고, 이렇게 할당된 값은 배열로 저장이 됨
let total = 0;
for(let x of args){ // 파라미터가 배열로 저장이 되기 때문에 for~of문을 사용해서 전달받은 파라미터 값을 모두 확인해야 함
total += x
}
return total;
}
console.log(sum(4, 6,3,4,5,1,5));
