[JS] 자바스크립트 코드 작성 시 10가지 팁

구조 분해 할당을 이용한 변수 swap

• ES6의 구조 분해 할당 문법을 사용하면 두 변수를 swap 할 수 있음

let a = 5, b = 10;
[a, b] = [b, a];
console.log(a, b); // 10 5

배열 생성으로 루프 제거하기

• 보통 단순히 범위 루프를 돌고 싶다면 다음과 같이 코드 작성

let sum = 0;
for (let i = 5; i < 10; i += 1) {
	sum += i;
}

• 범위 루프를 함수형 프로그래밍 방식으로 사용하고 싶다면 배열을 생성해서 사용가능

const sum = Array
		.from(new Array(5), (_, k) => k + 5) // new Array 반환 [undefined, undefined, ..]
											 // Array.from() 두번째 인자는 mapFn, 그래서 _는 undefined, k는 인덱스
											 // [5, 6, 7, 8, 9] 반환
 		.reduce((acc, cur) => acc + cur, 0);

console.log(sum) // 35

배열 내 같은 요소 제거하기

// Set를 이용할 수 있음.
const names = ['Kim', 'Lee', 'Park', 'Lee', 'Kim'];
const uniqueNamesWithArrayFrom = Array.from(new Set(names)); // new Set(names)는 Set(3) {'Kim', 'Lee', 'Park'}을 반환
const uniqueNamesWithSpread = [...new Set(names)]

console.log(uniqueNamesWithArrayFrom); // [ 'Kim', 'Lee', 'Park' ]
console.log(uniqueNamesWithSpread); // [ 'Kim', 'Lee', 'Park' ]

Spread 연산자를 이용한 객체 병합

const person = {
    name: 'Kim Gun-Yeop',
    familyName: 'Kim',
    givenName: 'Gun-Yeop'
};

const company = {
    name: 'Not Yet',
    address: 'Seoul'
};

const kimGunYeop = { ...person, ...company };
console.log(kimGunYeop);
// {
//   address: “Seoul”
//   familyName: “Kim”
//   givenName: “Gun-Yeop”
//   name: "Not Yet" // 같은 키는 마지막에 대입된 값으로 정해진다.
// }

&&와 || 의 활용

/// ||
// 기본값을 넣어주고 싶을 때 사용할 수 있음.
// participantName이 0, undefined, 빈 문자열, null일 경우 'Guest'로 할당됨.
const name = participantName || 'Guest';

/// &&
// flag가 true일 경우에만 실행됨.
flag && func();

// 객체 병합에도 이용할 수 있음.
const makeCompany = (showAddress) => {
  return {
    name: 'Not Yet',
    ...showAddress && { address: 'Seoul' }
  }
};
console.log(makeCompany(false));
// { name: 'Not Yet' }
console.log(makeCompany(true));
// { name: 'Not Yet', address: 'Seoul' }

구조 분해 할당 사용하기

• 객체에서 필요한 것만 꺼내 쓰는 것이 좋다.

const person = {
    name: 'Kim Gun-Yeop',
    familyName: 'Kim',
    givenName: 'Gun-Yeop'
    company: 'Not Yet',
    address: 'Seoul',
}

const { familyName, givenName } = person;

객체 생성시 키 생략하기

• 객체를 생성할 때 프로퍼티 키를 변수 이름으로 생략 가능

const name = 'Kim Gun-Yeop';
const company = 'Not Yet';
const person = {
  name,
  company
}
console.log(person);
// {
//   name: 'Kim Gun-Yeop',
//   company: 'Not Yet',
// }

비구조화 할당 사용하기

• 함수에 객체를 넘길 경우 필요한 것만 꺼내 쓸 수 있음.

const makeCompany = ({ name, address, serviceName }) => {
  return {
    name,
    address,
    serviceName
  }
};
const cobalt = makeCompany({ name: 'Not Yet', address: 'Seoul', serviceName: 'Present' });

동적 속성이름

• ES6에 추가된 기능으로 객체의 키를 동적으로 생성할 수 있다.

const nameKey = 'name';
const emailKey = 'email';
const person = {
  [nameKey]: 'yeopto',
  [emailKey]: 'yeopto@zzang.com'
};
console.log(person);
// {
//   name: 'yeopto',
//   email: 'yeopto@zzang.com'
// }

!! 연산자를 사용하여 Boolean 값으로 바꾸기

• !! 연산자를 이용해서 0, null, 빈 문자열, undefined, NaN을 false로 그 외에는 true로 변경할 수 있다.

function check(variable) {
  if (!!variable) {
    console.log(variable);
  } else {
    console.log('잘못된 값');
  }
}
check(null); // 잘못된 값
check(3.14); // 3.14
check(undefined); // 잘못된 값
check(0); // 잘못된 값
check('Good'); // Good
check(''); // 잘못된 값
check(NaN); // 잘못된 값
check(5); // 5

참고 - 프로그래머스 코딩테스트 광탈 방지 A to Z : JavaScript