// Nullish coalescing operator
❌Bad Code
function printMessage(text) {
let message = text;
if(text === null || text === undefined){
message = 'Nothing to Display';
}
console.log(message);
}
✅Good Code
function printMessage(text) {
const message = text ?? 'Nothing to Display'
console.log(message)
}
결과)
printMessage('Hello');
printMessage(undefined);
printMessage(null);
3) 단축 평가 논리 계산법 (short-circuit evaluation)
논리 연산자를 사용 할 때에는 무조건 우리가 true 혹은 false 값을 사용해야 되는 것은 아닙니다. 문자열이나 숫자, 객체를 사용 할 수도 있고, 해당 값이 Truthy 하냐 Falsy 하냐에 따라 결과가 달라집니다.
📌 && 연산자
예시) A && B 연산자를 사용하게 될 때에는 A 가 Truthy 한 값이라면, B 가 결과값이 됩니다. 반면, A 가 Falsy 한 값이라면 결과는 A 가 됩니다.
(이러한 속성을 잘 알아두면, 특정 값이 유효할때에만 어떤 값을 조회하는 작업을 해야 할 때 매우 유용합니다.)
// 논리 연산자
❌Bad Code
const dog = {
name: '멍멍이'
};
function getName(animal) {
if(animal){
return animal.name;
}
return undefined;
}
console.log(getName(dog));
✅Good Code
function getName(text){
return text && text.name //위에 코드를 한줄로 작성한것이다.
};
console.log(getName(dog));
console.log(getName());
결과)
// 멍멍이
// undefined
📌 || 연산자
예시) A || B 는 만약 A 가 Falsy한 값이면, B 가 결과값이 됩니다. 반면, A 가 Truthy 한 값이라면 B 가 됩니다.
(|| 연산자는 만약 어떤 값이 Falsy 하다면 대체로 사용 할 값을 지정해줄 때 매우 유용하게 사용 할 수 있습니다.)
// 논리 연산자
const dog = {
name: ''
};
❌Bad Code
function getName(animal) {
const name = animal && animal.name;
if (!name) {
return '이름이 없는 동물입니다';
}
return name;
}
✅Good Code
function getName(animal){
return animal && animal.name
return name || '이름이 없는 동물입니다.'; //위에 코드를 한줄로 작성한것이다.
};
const name = getName(namelessDog);
console.log(name);
결과)
// 이름이 없는 동물입니다.
4) 함수의 기본 파라미터 (default parameter)
📌 함수의 default parameter
아래 함수에서 만약에 r 값이 주어지지 않았다면 기본 값을 1을 사용하도록 설정해봅시다.
// default parameter
❌Bad Code
function calculateCircleArea(r) {
const radius = r || 1;
return Math.PI * radius * radius;
}
const area = calculateCircleArea();
console.log(area); // 3.141592653589793
✅Good Code
function calculateCircleArea(r = 1) {
return Math.PI * r * r;
}
const area = calculateCircleArea();
console.log(area); // 3.141592653589793
참고로 아래와 같이 연산식 및, 함수 실행도 넣을수 있습니다.
✅Good Code
// 연산식도 들어 갈수 있습니다.
function add(a, b = 2 * 5){
console.log(a + b);
}
add(3); // 13
✅Good Code
// 심지어 함수 실행도 넣을수 있습니다.
function add(a, b = sum(4,5)){
console.log(a + b);
};
add(3); //12
5) Rest 파라미터
Rest 파라미터 구문은 정해지지 않은 수(an indefinite number, 부정수) 인수를 배열로 나타낼 수 있게 합니다.
함수 파라미터에서에 값을 Rest(배열형태)로 받는것 입니다. "이 자리에 오는 모든 파라미터를 [ ] 중괄호로 감싸준 파라미터" 라는 뜻입니다.
//Rest 파라미터
❌Bad Code
// 파라미터가 유연하지 못한 상황
function sum (a,b,c,d,e,f,g) {
return a+b+c+d+e+f+g
};
// 만약에 함수를 사용하는 쪽에서 인자를 한개라도 없다
console.log(sum(1,2,3,4,5,6,))
//결과)
NAN
✅Good Code
// 파라미터를 유연하게 대처되는 상황
function sum(...params) { //Rest
console.log(params);
return params.reduce((acc, current) => acc + current, 0);
};
console.log(sum(1, 2, 3, 4, 5, 6));
//결과)
[1, 2, 3, 4, 5, 6]
21
