Truthy / Falsy

함수의 매개변수를 사용할 때, 값이 없거나 undefined 가 전달 될 경우 
Uncaught Type: Cannot read property 'name' of undefined 

 

• Truthy / Falsy 
• Null 체크
• 단축 평가 논리 계산법
• 함수의 기본 파라미터 

---

• 1. Truthy / Falsy

console.log(undefined);    
console.log(null);         
console.log(0);        
console.log('');        
console.log(NaN);         
console.log(false);
 
console.log(!undefined);        
console.log(!null);             
console.log(!0);                
console.log(!'');               
console.log(!NaN);            
console.log(!false);            

위의 경우를 제외한 나머지는 모두 Truthy 한 값이다.

 

function print(person) {
    console.log(person.name);
}
 
const person = {
    name: 'Ahn'
};
 
print();

위와 같이 함수에 파라미터 값이 없으면 Uncaught Type: Cannot read property 'name' of undefined 에러가 발생된다.

값이 undefined 혹은 null 일 때 이런 에러가 발생하는데, 이럴 때 사용하는 것이 null 체크이다.

 

• Null 체크

function print(person) {
    if(person === undefined || person === null){
        return
    };
    console.log(person.name);
}
 
const person = null;
 
print(person);

 

• 이렇게도 사용할 수 있다.

// 1)
const value = {a: 1};
if(value){
    console.log('값이 있다');
}
 
// 2)
const value = {};
const truthy = value ? true : false;
 
console.log(truthy);    // false
 
// 3)
const value = {};
const truthy = !!value     // 반전의 반전, truthy 한 값이면 true로 바꿈
console.log(truthy);    // false

예시1번의 경우처럼 값을 확인 하거나, 값을 체킹해서 return 시키는 코드로 많이 사용함.

 

---

• 단축 평가 논리 계산법 (Short-circuit evaluation)

 

• && 연산자 : 앞에 오는 것이 true면, 뒤에 오는 것이 노출된다.

console.log(true && 'hello');            // hello
console.log(false && 'hello');            // false
console.log('hello' && 'bye');            // bye
console.log(null && 'hello');            // null
console.log(undefined && 'hello');    // undefined
console.log('' && 'hello');                // ''
console.log(0 && 'hello');                // 0
console.log(1 && 'hello');                // hello

 

예시1) 

const dog = {
    name: ''
}
 
function getName(animal){
    if(animal){
        return animal.name;
    }
    return undefined;
}    
 
const name = getName(dog);
console.log(name); // undefined

값이 없을 때 undefined 값이 return 되게 하는 것을 &&연산자를 사용하면 간단하게 줄일 수 있다.

const dog = {
    name: ''
}
 
function getName(animal){
    return animal && animal.name;
}    
 
const name = getName(dog);
console.log(name); // undefined

 

 

• || 연산자 : 앞에 오는 것이 false 면 뒤에 오는 것이 출력된다.

console.log(false || 'hello');    // hello
console.log(0 || 'hello');        // hello

 

예시1) 아래와 같이 코드를 쓸 수 있다. 

const nameLessDog = {
    name: ''
}
function getName(animal) {
    const name = animal && animal.name;
    if(!name) {
        return '이름이 없는 동물입니다';
    }
    return name;
}
const name = getName();
console.log(name);                // 이름이 없는 동물입니다. // undefined

const nameLessDog = {
    name: ''
}
function getName(animal) {
    const name = animal && animal.name;
    return name || '이름이 없는 동물입니다.';
}
const name = getName();
console.log(name);                // 이름이 없는 동물입니다. // undefined

 

---

 

• 함수의 기본 파라미터

function calc(r) {
    const radius = r || 1;
    return Math.PI * radius * radius;
}
 
const area = calc();
console.log(area);

 

ES6 문법으로는 아래와 같이 사용할 수 있다.

function calc(r = 1) {
    return Math.PI * r * r;
}
 
const area = calc();
console.log(area);