Front End/JavaScript

ES6 축약문법

삼항조건 연산자 (The Ternary Operator) ?

if..else 문항을 한 줄로 줄일 수 있다. 조건을 작성하고 ? 를 입력 한 뒤 각 조건에 대한 실행을 true : false 형식으로 작성하면 된다.

const x = 20;
let answer;
if (x > 10) {
    answer = 'greater than 10';
} else {
    answer = 'less than 10';
}
const answer = x > 10 ? 'greater than 10' : 'less than 10';

간략계산법(Short-circuit Evaluation)

기존의 변수를 다른 변수에 할당하고 싶은 경우 기존 변수가 빈 값(null, undefined, empty)이라면 에러가 발생한다. 이를 해결하기 위해 기존에는 긴 if 문을 사용해야 했으나 축약코딩으로 줄일 수 있다. 기존 문법 뒤에 || 를 입력한 뒤 만약 빈 값이라 할당 할 수 없다면 대체할 값을 넣으면 된다.

if (variable1 !== null || variable1 !== undefined || variable1 !== '') {
     let variable2 = variable1;
}
let variable1;
let variable2 = variable1 || 'new' ;
console.log(variable2); // 'new'

variable1 = 'hello';
let variable3 = variable1 || 'new' ;
console.log(variable3); // 'hello'

Uploaded by N2T