유용한 자바스크립트 테크닉 9가지

본 글은 Atit Patel님의 33 JavaScript Useful Shorthands Cheat List: 2021 를 참고한 포스팅입니다. 오역, 피드백 등은 답글을 달아주세요!

몇몇 과하게 기초적인 내용은 정리하지 않았습니다.

1. includes 메서드

If 조건문 안의 수많은 '||' 조건들로 고통받으셨다면, 아래와 같이 includes를 이용해 사용할 수 있습니다.

//longhand
if (fruit === 'apple' || fruit === 'banana' || fruit === 'orange' || fruit ==='mango') {
    //logic
}
//shorthand
if (['apple', 'banana', 'orange', 'mango'].includes(fruit)) {
   //logic
}

2. Nullish coalescing 연산자

?? 연산자는 왼쪽 피연산자값이 null이나 undefined일 때 오른쪽 피연산자를 반환합니다.

const data= null ?? 'data';
console.log(data);
// expected output: "data"
const data1 = 1 ?? 4;
console.log(data1);
// expected output: 1

만약 null이나 undefined 외에도 0이나 '' 같은 값을 함께 처리하고 싶다면 ?? 대신 ||를 사용하면 됩니다!

3. 여러 값을 동시에 지정

//Longhand 
let data1, data2, data3;
data1 = 1;
data2 = 2;
data3 = 3;
//Shorthand 
let [data1, data2, data3] = [1, 2, 3];

4. AND(&&) 연산자

If 문을 쓰지 않고 쓰고 싶을 때 유용한 방법입니다.

//Longhand 
if (test1) {
 callMethod(); 
}
//Shorthand 
test1 && callMethod();

5. 화살표 함수

//Longhand 
function add(a, b) { 
   return a + b; 
} 
//Shorthand 
const add = (a, b) => a + b;

6. 함수에서 삼항연산자

아래와 같이 함수 이름을 이용해서 삼항연산자를 사용할 수 있습니다.

// Longhand
var data3 = 1;
if (data3 == 1) {
    data1();
} else {
    data2();
} //data1

// Shorthand
(data3 === 1 ? data1 : data2)(); //data1

7. Spread 연산자

배열의 값을 꺼내서 쓰고 싶을 때 유용한 연산자입니다.

//longhand
// joining arrays using concat
const testdata= [1, 2, 3];
const values = [4 ,5 , 6].concat(testdata);

//shorthand
// joining arrays
const testdata = [1, 2, 3];
const values = [4 ,5 , 6, ...testdata];

8. String을 숫자로 변환

//Longhand 
let test1 = parseInt('12'); 
let test2 = parseFloat('2.33');

//Shorthand 
let test1 = +'12'; 
let test2 = +'2.33';

엄밀하게 따지면, parseInt()와 + 는 다른 결과가 나옵니다.

var a = '12px'
parseInt(a) // 12
+a // NaN

9. Math.floor의 단축 연산자

// Longhand
Math.floor(1.9) === 1 // true

// Shorthand
~~1.9 === 1 // true

~~(Double tilde)연산자는 음수의 경우 Math.floor와 다른 결과를 출력합니다.
~~(-5.5) => -5, Math.floor(-5.5) => -6