velopert님의 모던 자바스크립트 강좌를 참고하여 작성했습니다.
삼항연산자
if-else조건문을 한줄로 간결해서 쓸 때 사용하지만, 가독성이 떨어지니 가급적 쓰지 않는다.
조건 ? true일때 : false일때
const array = [];
let text = array.length === 0
? '배열이 비어있습니다'
: '배열이 비어있지 않습니다.';
console.log(text);삼항 연산자를 중첩해서도 사용할 수 있다.
const condition1 = false;
const condition2 = false;
const value = condition1
? '와우!'
: condition2
? 'blabla'
: 'foo';
console.log(value);Truthy and Falsy
Truthy: true 같은거... Falsy: false 같은거...
function print(person) {
if (person === undefined || person === null) {
console.log('person이 없네요');
return;
}
console.log(person.name);
}
const person = null;
print(person);함수의 인자가 null이거나 undefined일때 오류가 생기는 것을 방지해서 예외처리를 따로 해주어야 하는데 이를 falsy로 보고 싸잡아서 아래처럼 간편하게 처리할 수 있다. 이는 null과 undefined가 falsy한 값이여서 가능한 것이다.
function print(person) {
if (!person) {
console.log('person이 없네요');
return;
}
console.log(person.name);
}
const person = null;
print(person);반대로 falsy한 값 앞에 !(느낌표)를 붙여주면 truthy한 값이 된다.
console.log(!undefined);
console.log(!null);
console.log(!0);
console.log(!'');
console.log(!NaN);위 값들만 falsy한 것이고 빈배열을 포함해서 나머지 모든 것들은 전부 truthy한 값이 된다.
값이 있을 때 true 없을때 false를 반환하는 값을 만드려면 보통 삼항연산자를 쓰지만 이를 느낌표 두개로 더 간단하게 축약할 수 있다.
const value = { a: 1 };
const truthy = !!value;단축평가(short-circuit evaluation) 논리 계산법
const dog = {
name: '멍멍이'
};
function getName(animal) {
if (animal) {
return animal.name;
}
return undefined;
}
const name = getName();
console.log(name);마찬가지로 getName()에 인자가 주어지지않을때 undefined예외처리를 하는 코드이다. 이를 &&연산자를 사용하면 더 단축할 수 있다.
const dog = {
name: '멍멍이'
};
function getName(animal) {
return animal && animal.name;
}
const name = getName();
console.log(name); // undefined이는 위의 코드와 완벽하게 일치한다고 할 수 있다. 이유는 A && B 연산에서 A가 만약 true값이라면 B를 리턴하게되고, A가 false라면 B를 볼 필요도 없이 A를 리턴하게된다.
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
console.log(1 && 1); // 1|| 연산자로 코드 단축시키기
어떤 값이 falsy하다면 대체로 사용할 겂을 지정해 줄때 매우 유용하게 사용할 수 있다.
const namelessDog = {
name: ''
};
function getName(animal) {
const name = animal && animal.name;
if (!name) {
return '이름이 없는 동물입니다';
}
return name;
}
const name = getName(namelessDog);
console.log(name); // 이름이 없는 동물입니다.const namelessDog = {
name: ''
};
function getName(animal) {
const name = animal && animal.name;
return name || '이름이 없는 동물입니다.';
}
const name = getName(namelessDog);
console.log(name); // 이름이 없는 동물입니다.name이 false일 경우에 뒤에있는 예외처리 문자열이 출력된다.
함수의 기본 파라미터
함수에 파라미터를 넘기지 않더라고 함수내에서 기본파라미터를 사용하여 오류를 방지할 수 있다.
일명 파라미터 초기화라고 한다.
function calculateCircleArea(r = 1) {
return Math.PI * r * r;
}
const area = calculateCircleArea();
console.log(area); // 3.141592653589793const calculateCircleArea = (r = 1) => Math.PI * r * r;
const area = calculateCircleArea();
console.log(area); // 3.141592653589793향상된 조건문
특정 값이 여러 값 중 하나인지 확인해야 할 때
이때는 여러값을 배열로 만들고 배열이 해당 요소를 포함하고 있는지 여부를 includes를 사용해서 간단하게 확인할 수 있다.
function isAnimal(name) {
const animals = ['고양이', '개', '거북이', '너구리'];
return animals.includes(name);
}
console.log(isAnimal('개')); // true
console.log(isAnimal('노트북')); // false화살표 함수로도 가능하다. 화살표함수처럼 코드가 무조건 짧다고해서 좋은것만은아니다. 읽고 이해하기 쉬운코드가 좋은 코드이다. 우리는 좋은 코드를 작성하기 위해서 노력할 필요가 있다.
const isAnimal = name => ['고양이', '개', '거북이', '너구리'].includes(name);
console.log(isAnimal('개')); // true
console.log(isAnimal('노트북')); // false값에 따라 다른 결과물을 반환해야 할때
function getSound(animal) {
switch (animal) {
case '개':
return '멍멍!';
case '고양이':
return '야옹~';
case '참새':
return '짹짹';
case '비둘기':
return '구구 구 구';
default:
return '...?';
}
}
console.log(getSound('개')); // 멍멍!
console.log(getSound('비둘기')); // 구구 구 구switch문을 사용해서 이를 구현할 수도 있지만 이를 객체를 이용하면 더 간결하게 코드를 만들 수 있다.
function getSound(animal) {
const sounds = {
개: '멍멍!',
고양이: '야옹~',
참새: '짹짹',
비둘기: '구구 구 구'
};
return sounds[animal] || '...?';
}
console.log(getSound('개')); // 멍멍!
console.log(getSound('비둘기')); // 구구 구 구반면에 단순히 문자열의 내용만 달라지는 것이아니라 값에 따라 실행하는 코드 구문이 다를 때는 어떻게 하면 좋을까?
그럴 때는 객체에 함수를 넣으면 된다.
function makeSound(animal) {
const tasks = {
개() {
console.log('멍멍');
},
고양이() {
console.log('고양이');
},
비둘기() {
console.log('구구 구 구');
}
};
if (!tasks[animal]) {
console.log('...?');
return;
}
tasks[animal](); // key값 뒤에 ()를 붙여서 함수를 호출한다.
}
makeSound('개');
makeSound('비둘기');