[JS] 유용한 자바스크립트 테크닉

1. includes 메서드

if 조건문 안에 수많은 || 조건을 넣어야 할 때 includes를 사용

// 기존 if문
if (fruit === 'apple' || fruit === 'banana' || fruit === 'orange') {
  // 조건문 true 실행문
}
// includes 사용
if (['apple', 'banana', 'orange'].includes(fruit)) {
  // 조건문 true 실행문
}

2. Nullish Coalescing 연산자

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

const data = null ?? 'data';
console.log(data);  // output: "data"
const num = 1 ?? 2;
console.log(num);  // output: 1

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

3. Destructuring 문법 (ES6)

배열의 값을 변수에 각각 할당 하고싶을 때 사용

let data = [1, 2, 3];
// Destructuring 문법
let [data1, data2, data3] = [1, 2, 3];
console.log(data1);  // output: 1
console.log(data2);  // output: 2
console.log(data3);  // output: 3

4. AND(&&) 연산자

if문을 사용하지 않고 쓰고 싶을 때 사용

// 기존 if문
let test = true;
if (test) {
  Function();
}
// AND 연산자 사용
test && Function();

5. Arrow Function (화살표 함수)

함수 내부에 코드가 간단하거나 한줄 코드면서 return을 해야하는 함수일 때 사용

// 기존 함수
function add (a, b) {
  return a + b;
}
// 화살표 함수
const add = (a, b) => a + b;

6. 함수에서 삼항연산자 사용

true이면 A 함수 호출, false이면 B 함수 호출 경우에 사용

// 기존 조건문에 함수 실행
var YN = true;
if (YN) {
  A();
} else {
  B();
}
// 삼항연산자에 함수 실행
(YN ? A : B)();

7. Spread 연산자

배열의 값을 복사해서 사용하고 싶을 때 사용

// 기존 배열 연결 방식
let arr = [1, 2, 3];
let newArr = [4, 5, 6].concat(arr);
// 스프레드 연산자 활용 방식
let arr = [1, 2, 3];
let newArr = [4, 5, 6, ...arr];

8. String을 숫자로 변환

// 기존 변환 (String -> Number)
let num1 = parseInt('10');
let num2 = parseFloat('10.5');
// + 사용
let num1 = +'10';
let num2 = +'10.5';

• 다음과 같을 때에는 parseInt()와 +는 다른 결과가 나온다.

var num = '12px';
console.log(parseInt(a));  // output: 12
console.log(+a);  // output: NaN

9. Math.floor()의 단축 연산자

// 기존 소수점 버림
Math.floor(1.9) === 1  // output: true
// 단축연산자
~~1.9 === 1  // output: true

• 단, 음수일 경우 Math.floor()와 다른 결과를 출력한다.

console.log(Math.floor(-10.9))  // output: -11
console.log(~~(-10.9))  // output: -10