// 매개변수 패턴
// 기본값(Default value)
function sum(a,b) {
return a + b
}
console.log(sum (1,2)) // 3
console.log(sum(7)) // 7 + undefined = NaN
function 함수의 매개변수로 sum함수를 설정하고 콘솔 창에 지정된 값을 대입하여 결과를 연산하여 반환합니다. 이때, 마지막 콘솔 창에 a의 데이터 값만 지정되고 b의 데이터 값은 지정되지 않아 undefined와 숫자 7을 더한 NaN이 출력되게 됩니다.
# 기본값
// 매개변수 패턴
// 기본값(Default value)
function sum(a,b = 1) {
return a + b
}
console.log(sum (1,2)) // 3
console.log(sum(7)) // 7 + undefined = NaN
NaN 출력을 방지하고자 b에 기본값 1을 지정하게 되면 마지막 콘솔 창에는 더이상 NaN이 아닌 숫자 8이 출력이 되게 되고 그 위 콘솔 창에는 이미 a 와 b 의 데이터 값이 지정되었으므로 기본값을 반영하지 않고 숫자 3이 출력이 됩니다.
# 구조 분해 할당
// 매개변수 패턴
// 구조 분해 할당
const user = {
name: YongHak,
age: 23
}
function getName(user) {
return user.name
}
console.log(getName(user))
콘솔 창에 getName 함수의 user를 대입하고 user 객체의 name 요소를 반환하여 콘솔창에는 YongHak이 출력됩니다.
// 매개변수 패턴
// 구조 분해 할당
const user = {
name: YongHak,
age: 23,
};
function getName(user) {
const { name } = user;
return name;
}
console.log(getName(user));
객체 구조 분해 할당 문법을 이용하여 동일한 내용을 다음과 같이 작성할 수 있습니다.
// 매개변수 패턴
// 구조 분해 할당
const user = {
name: YongHak,
age: 23,
};
function getName({name}) {
return name;
}
console.log(getName(user));
위 2가지 방식과 동일하게 더 간추려서 작성할 수 있습니다.
// 매개변수 패턴
// 구조 분해 할당
const user = {
name: YongHak,
age: 23,
email: 'charismayoung1993@gmail.com'
};
function getName({name}) {
return name;
}
function getEmail({email = '이메일이 없습니다.'}) {
return email
}
console.log(getName(user));
console.log(getEmail(user))
위와 같이 콘솔 창에 getEmail 함수의 user를 호출하고 getEmail 함수에서 email을 반환합니다. 이때, 값이 존재하지 않으면 undefined를 반영하고 값이 존재하면 '이메일이 없습니다.' 라고 출력이 됩니다.
<배열을 이용한 출력 방식>
// 매개변수 패턴
// 구조 분해 할당
const fruits = ['Apple', 'Banana', 'Cherry']
function getSecondItem(array) {
return array[1]
}
console.log(getSecondItem(fruits))
console.log(getSecondItem[fruits])
콘솔 창에 getSecondItem의 fruits 매개변수를 찾고 그 매개변수 함수에서 array값이 1인 바나나를 반환합니다.
// 매개변수 패턴
// 구조 분해 할당
const fruits = ['Apple', 'Banana', 'Cherry']
function getSecondItem[,b] {
return b
}
console.log(getSecondItem(fruits))
배열 구조 분해 할당을 이용하여 앞에 ,(쉼표)로 앞 데이터를 빈 데이터로 출력하고 b 데이터인 바나나를 출력합니다.
// 매개변수 패턴
// 구조 분해 할당
const fruits = ['Apple', 'Banana', 'Cherry']
const numbers = [1,2,3,4,5,6,7]
function getSecondItem([,b]) {
return b
}
console.log(getSecondItem(fruits))
console.log(getSecondItem(numbers))
위와 동일하게 numbers를 활용하여 작성하게 되면, 바나나와 숫자 2가 출력됩니다.
# 나머지 매개변수
// 매개변수 패턴
// 나머지 매개변수
function sum(...rest) {
console.log(rest)
}
console.log(sum(1,2)) // 3
console.log(sum(1,2,3,4)) // 10
console.log(sum(1,2,3,4,5,6,7,8,9,10)) // 55
조건이 여러 개로 지정될 때, ...(전개 연산자)를 활용하여 나머지 매개변수를 활용하여 여러 개의 문자를 출력할 수 있습니다.
// 매개변수 패턴
// 나머지 매개변수
function sum(a,b,...rest) {
console.log(rest)
}
console.log(sum(1,2)) // 3
console.log(sum(1,2,3,4)) // 10
console.log(sum(1,2,3,4,5,6,7,8,9,10)) // 55
첫 번째 콘솔 창에는 1과 2 데이터가 2개이므로 콘솔창에는 [ ] (빈태그)가 출력이 되고
두 번째 콘솔 창에는 1과 2 데이터를 제외한 나머지 데이터인 3과 4가 [3,4]로 출력이 되고
세 번째 콘솔 차에는 1과 2 데이터를 제외한 나머지 데이터인 3 ~ 10까지 출력이 됩니다.
이때, return 연산자를 사용하지 않았으므로 기본적으로 undefined가 출력된 값 밑에 생성됩니다.
{콘솔 창}
[ ]
undefined
[3,4]
undefined
[3,4,5,6,7,8,9,10]4
undefined