js 코드를 더 짧게 써보자

이번시간에는 js 코드를 짧게 쓸 수 있는 방법을 알아보고자 한다!
순서는 아래와 같다 :)
1. 다중 OR 조건문을 짧게
2. 다중 AND 조건문을 짧게
3. null, undefined, '' 체크를 짧게
4. 조건별 함수 호출도 짧게
5. 숫자 형변환을 짧게
6. 반복문을 짧게

1. 다중 OR 조건문을 짧게 써보자

만약 name이 juna, herry, sona 중 하나인지 알아보려고 한다.
하나의 방법으로 아래처럼 다중 or(||) 조건문을 사용할 수 있을 것이다.

if (name === 'juna' || name === 'herry' || name === 'sona') {
    // code
}

하지만 이 다중 or 조건문! 이쁘지도 않은데 한 줄이 너무 길지 않은가 🤔
우리는 includes를 사용해서 간단하게 만들어보자!

먼저 우리가 체크하고자 하는 이름들을 하나의 배열(names)에 담는다.
그 다음 includes을 사용해 names가 name을 포함하는지 체크하면 된다.

const names = ['juna', 'herry', 'sona'];
if (names.includes(name)) { 
  // code
}

2. 다중 AND 조건문을 짧게 써보자

다중 or 조건문을 짧게 만들어보았는데, 이제 다중 and(&&)도 짧게 만들어보자.
아래는 다중 and 조건문으로, person, person.name, person.name.address가 모두 있는지 체크하는 코드이다.

if (person && person.name && person.name.address) {
  //code
}

다중 and 조건문의 경우, 대신 js의 optional chaining을 쓰면 된다.

optional chaining은 .?어떤대상의 형태로 쓰이는데
만약 어떤 대상이 없으면 undefined를 반환한다.

const person = {};
console.log(person?.name);    //undefined

이 optional chaining(.?)은 다중 and 조건문을 대신해서 아래와 같이 쓸 수 있다.

if (person?.name?.address) {
 console.log('thank you!') 
}

3. null, undefined, '' 체크를 짧게 써보자

아래 예시는 data가 null, undefined, ''가 아니면 data를 할당하는 코드이다.

let result; 
if (data !== null || data !== undefined || data !== '') {
  result = data;
}else {
  result = 'hello';
}

이 경우에는 or(||)연산자를 사용하면 된다! 아래 예시를 보자~

result에는 data 또는 'hello'라는 글자가 들어가는데,
만약 data변수가 빈 값이라면 대신 hello를 할당하게 하는 것이다!

const result = data || 'hello';  

(추가) 만약 여러분이 null, undefined인 경우만 고려하고 싶다면, ??연산자(널 병합 연산자)가 있다~

: 이 연산자를 A ?? B로 사용하면, A가 null, undefined일 때 B를 반환한다!

const result = data ?? 'hello';   

//단 data가 ''인 경우에는 data가 할당됨
const data = '';
const result = data ?? 'hello';    // ''

그렇다면 ??와 ||을 사용하는 차이는 무엇일까? 간단히 알아보자 :)

A ?? B	A ㅣㅣ B
- A가 null일 때 B를 반환 - A가 undefined일 때 B를 반환	- A가 null일 때 B를 반환 - A가 undefined일 때 B를 반환 - A가 false일 때 B를 반환 - A가 0일 때 B를 반환

console.log(null ?? 'hello');         //hello
console.log(null || 'hello');         //hello

console.log(undefined ?? 'hello');   //hello
console.log(undefined || 'hello');   //hello

console.log(0 ?? 'hello');           //0
console.log(0 || 'hello');           //hello

console.log('' ?? 'hello');          //''
console.log('' || 'hello');          //hello

console.log(false ?? 'hello');       //false
console.log(false || 'hello');       //hello

: 만약 0이나 false값을 그대로 사용하고 싶다면 ??을 사용하는 게 좋다 :)

4. 조건별 함수 호출도 짧게 하자

조건별로 다른 함수를 호출하는 코드가 있다.
그런데, 함수 호출을 위해 무려 5줄을 사용한다니..너무 길어서 견딜 수가 없뜨아!

if (type === 'A') {
  one();
}else {
  two();
}

이 경우는 간단하게 삼항연산자를 사용하면 된다~

짜잔! 아래 코드를 봐라! 삼항연산자 방식을 쓰니 코드가 한결 간결해졌다 :)

(type === 'A' ? one : two)();

5. 숫자 형변환을 짧게 하자

string형태의 숫자를 number로 변경할 때 우리는 parseInt 혹은 parseFloat를 쓴다.

const sample = '100';
console.log(parseInt(sample));    //100

하지만 string형태의 숫자앞에 +만 붙여주면 바로 숫자로 형변환을 해준다!

const sample1 = '100';
console.log(+sample1);    //100

const sample2 = '100.09';
console.log(+sample2);    //100.09

6. 반복문을 짧게 하자

우리가 반복문을 배울 때 처음 접하는 방식은 for(let i; i<XX; i++)이다.

const arr = [11, 22, 33];
for(let i=0; i<arr.length; i++) {
    console.log(arr[i]);
}

그런데, forEach문을 사용하면 반복문을 한 줄로 줄일 수 있다!
forEach문에서 인자 하나만 사용하는 경우, 해당 인자는 배열값을 가리킨다.

const arr = [11, 22, 33];
arr.forEach((val) => console.log(val));   // 11 22 33

하지만 만약 인자 두 개를 사용하는 경우엔, 순서대로 (값, 인덱스)를 가리킨다.
그러므로 forEach를 사용한다고 해서 인덱스 값을 이용치 못하는 건 아니다^-^

const arr = [11, 22, 33];
arr.forEach((val, idx) => console.log(val, idx));   

// 11 0
// 22 1
// 33 2

출처
아래 링크를 가면 더 자세히 알 수 있다 👍

• 코어 자바스크립트, 옵셔널 체이닝 '?.'
• Harsha Vardhan, Stop Writing JavaScript Like This
• mozilla, includes
• mozilla, 널 병합 연산자 (??)

---

수정사항
좋은 정보 제공 감사합니다 🙂
: 2021.07.07. 다중 AND 조건문에서 잘못된 예시가 수정되었습니다 (기여자 vlfflq2004)
: 2021.07.08. null, undefined 체크에서 널 병합 연산자(??)가 추가되였습니다 (기여자 sunrabbit123)