236. REST (spread와 비슷하지만 다름!)
* 인수객체 (The Arguments Objects)
모든 함수 내에서 사용가능한 array 형태의 객체.
> length 속성 사용가능.
> array 메소드(push/pop) 사용불가.
> 화살표함수(arrow function) 에서 사용불가.
function num() {
console.log(arguments);
}
num();
// Arguments [callee: ƒ, Symbol(Symbol.iterator): ƒ]
// undefined
// 인수(Arguments)가 비어있음
num(10, 9, 8);
// Arguments(3) [10, 9, 8, callee: ƒ, Symbol(Symbol.iterator): ƒ]
// 0 : 10
// 1 : 9
// 2 : 8=> 인수가 있는 경우 index와 함께 요소가 나열됨 (배열형태) _하지만 배열은 아니기 때문에 배열메서드 사용불가
모든 요소(인수)들을 더하는 메소드를 만들어보자.
function nums() {
return arguments.reduce((total, el) => total + el )
}
nums(10, 9, 8)
// Uncaught TypeError: arguments.reduce is not a function인수객체는 배열 형태일 뿐 배열은 아님! reduce 메서드 사용불가.
=> REST PARAMS 활용 (모든 인수들을 배열로 모아줌)
function nums(number) {
console.log(number);
}
// 인수가 하나
nums(10, 9, 8)
// 10
// 첫번째 인수 하나만 받음REST를 사용하면
function nums(...number) {
console.log(number);
}
nums(10, 9, 8)
// (3) [10, 9, 8]
// 배열로 리턴=> number라는 배열로 리턴!
function nums(...number) {
return number.reduce((total, el) => total + el )
}
nums(10, 9, 8)
// 27=> 배열이기 때문에 reduce 메서드 사용가능.
[ Destructuring ]
* 관련 참고
237. 배열 분해 ( Array Destructuring)
const group = ['A', 'B', 'C', 'D', 'E'];
const [first, second] = group;
console.log(first) // A
console.log(second) // B=> 배열 group의 요소를 순서대로 새로운 변수에 지정.
const group = ['A', 'B', 'C', 'D', 'E'];
const [first, second, ...everyoneElse] = group;
console.log(everyoneElse) // (3) ['C', 'D', 'E']=> rest 연산자 사용.
* rest 연산자 : 나머지 요소들을 하나의 배열로 그룹화.
* spread 연산자 : 배열이나 객체의 요소를 개별 요소로 확산.
238. 객체분해 (Object Destructuring)
const person = {
name: 'pyo',
age: 30,
password: 'pw123',
city: 'seoul'
}
const {name, age, city} = person;
console.log(name); // pyo
console.log(age); // 30
console.log(city); // seoul=> 객체의 값을 기반으로 새로운 변수에 할당. (객체의 key값과 동일한 변수이름에 할당)
const person = {
name: 'pyo',
age: 30,
password: 'pw123',
city: 'seoul'
}
const {name: firstName, city: addr} = person;
console.log(firstName); // pyo
console.log(addr); // seoul=> 객체의 값을 기반으로 새로운 변수에 할당. (객체의 key값이 아닌 다른 변수이름에 할당)
const person = {
name: 'pyo',
age: 30,
password: 'pw123',
city: 'seoul'
}
const {name, password, email} = person;
console.log(email); // undefined=> person객체에 'email'에 속성값이 없음.
const {name, password, email='N/A'} = person;
console.log(email) // N/A=> 변수에 할당과 동시에 기본값 지정.
const {name, password=98765, email='N/A'} = person;
console.log(password) // pw123
console.log(email) // N/A=> 객체에 값이 있는 경우에는 기본값을 무시. (값이 없는 경우에만 기본값을 사용)
239. 매개 변수 분해 (Param Destruturing)
(1)
function info(person) {
return `${person.name}, ${person.password}`
}
info(person); // 'pyo, pw123'=> 매개변수 값의 구조를 분해해서 필요한 값만 리턴.
(2)
function info(person) {
const {name, password} = person;
// 추가로직
return `${name}, ${password}`;
}
info(person); // 'pyo, pw123'=> 1번 방식과 결과는 같음. (매개변수로 받은 값에 추가적인 로직이 필요하다면 유용)
(3)
function info({name, password}) {
return `${name}, ${password}`
}
info(person); // 'pyo, pw123'=> 객체에서 필요한 값만 매개변수로 전달.
function info({name, email = 'pyo@mail.com'}) {
return `${name}, ${email}`
}
info(person); // 'pyo, pyo@mail.com'=> 객체에 값이 없는 경우 매개변수에서 기본값 지정 가능.
* 응용 ( filter, map 함수 )
const persons = [
{
name: '김빨강',
age: 25,
email: 'red@color.com'
},
{
name: '김주황',
age: 32,
email: 'orang@color.com'
},
{
name: '김노랑',
age: 19,
email: 'yellow@color.com'
},
{
name: '김초록',
age: 45,
email: 'green@color.com'
},
{
name: '김파랑',
age: 8,
email: 'blue@color.com'
},
{
name: '김남',
age: 21,
email: 'navy@color.com'
},
{
name: '김보라',
age: 35,
email: 'violet@color.com'
}
];
* filter 함수
persons.filter((person) => person.age < 20)
persons.filter(({age}) => age < 20) // 구조분해 활용
// 결과값
(2) [{…}, {…}]
0:{name: '김노랑', age: 19, email: 'yellow@color.com'}
1:{name: '김파랑', age: 8, email: 'blue@color.com'}=> 결과값은 같음.
* map 함수
persons.map((person) => {
return `${person.name} is ${person.age} years old.`
})
persons.map(({name, age}) => {
return `${name} is ${age} years old.` // 구조분해 활용
})
// 결과값
(7) ['김빨강 is 25 years old.', '김주황 is 32 years old.', '김노랑 is 19 years old.', '김초록 is 45 years old.', '김파랑 is 8 years old.', '김남 is 21 years old.', '김보라 is 35 years old.']
0: "김빨강 is 25 years old."
1: "김주황 is 32 years old."
2: "김노랑 is 19 years old."
3: "김초록 is 45 years old."
4: "김파랑 is 8 years old."
5: "김남 is 21 years old."
6: "김보라 is 35 years old."=> 결과값은 같음.
'JavaScript > 강의' 카테고리의 다른 글
| [Udemy] [23-1] JavaScript의 최신 기능들 (DEFAULT PARAMS, SPREAD) (0) | 2024.05.22 |
|---|