sanguk.dev
작성완료
유용한 자바스크립트 테크닉

유용한 자바스크립트 테크닉

This blog presents useful JavaScript techniques and methods for developers.

JavaScript

**1. **includes 메서드

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

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

**2. **Nullish Coalescing 연산자

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

javascript
const data = null ?? 'data';
console.log(data);  // output: "data"const num = 1 ?? 2;
console.log(num);  // output: 1만약 null이나 undefined 외에도 0이나 ''같은 값을 함께 처리하고 싶다면 ?? 대신 ||을 사용

**3. **Destructuring 문법 (ES6)

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

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

**4. **AND(&&) 연산자

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

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

**5. **Arrow Function (화살표 함수)

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

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

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

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

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

**7. **Spread 연산자

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

javascript
// 기존 배열 연결 방식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을 숫자로 변환

javascript
// 기존 변환 (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: 12console.log(+a);  // output: NaN

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

javascript
// 기존 소수점 버림
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