[알고리즘] 자바스크립트 9가지 코드 트릭

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

ES6의 구조 분해 할당 문법을 사용하여 두 변수를 swap 할 수 있다. 

let a = 5;
let b= 10;

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

 

2. 배열 생성으로 루프 제거

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

단순 범위 루프를 돌고 싶은 경우 위와 같이 작성한다. 

 

const sum = Array
    .from(new Array(5), (_, k) => k + 5)
    .reduce((acc, cur) => acc + cur, 0);

만약 범위 루프를 함수형 프로그래밍 방식으로 사용하고 싶다면 배열을 생성해서 사용할 수 있다. 

 

Array
    .from(new Array(5), (_, k) => k + 5)

from을 통해서 배열을 만드는데, 첫 번째 매개변수는 변환하고자 하는 배열 객체나 반복 가능한 객체이다. 

두 번째 (_, k)를 통해 첫 번째 배열을 반복하는데, _는 배열의 값, k는 인덱스이다. 

ex) 
console.log(Array.from('foo'));
// expected output: Array ["f", "o", "o"]

console.log(Array.from([1, 2, 3], x => x + x));
// expected output: Array [2, 4, 6]

 

const sum = Array
    .from(new Array(5), (_, k) => k + 5)
    .reduce((acc, cur) => acc + cur, 0);

reduce를 사용해 각 매개변수를 모두 더하여서 return 하고 있다, 두 번째 매개변수 0은 초기값이다. 

 

3. 배열 내 같은 요소 제거하기 

const names = ['Lee', 'Kim', 'Park', 'Lee', 'Kim'];
const uniqueNamesWithArrayFrom = Array.from(new Set(names));
// ['Lee', 'Kim', 'Park']
const uniqueNamesWithSpread = [...new Set(names)];
// ['Lee', 'Kim', 'Park']

Set을 이용하면 배열 안에 있는 같은 요소를 제거할 수 있다. 

 

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

const person = {
    name: 'Lee Sun-Hyoup',
    familyName: 'Lee',
    givenName: 'Sun-Hyoup'
};

const company = {
    name: 'Cobalt. Inc.',
    address: 'Seoul'
};

const leeSunHyoup = { ...person, ...company };
console.log(leeSunHyoup);
// {
//   address: “Seoul”
//     familyName: “Lee”
//   givenName: “Sun-Hyoup”
//   name: "Cobalt. Inc." // 같은 키는 마지막에 대입된 값으로 정해진다.
// }

두 객체를 변도의 변수로 합쳐줄 수 있다. 

이때 같은 키값을 가진 경우 마지막 대입된 값으로 정해진다. 

 

5. &&  와  || 활용 

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

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

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

&&와 ||는 조건문 외에도 활용될 수 있다. 

 

6. 구조 분해 할당 사용하기 

const person = {
    name: 'Lee Sun-Hyoup',
    familyName: 'Lee',
    givenName: 'Sun-Hyoup'
    company: 'Cobalt. Inc.',
    address: 'Seoul',
}

const { familyName, givenName } = person;

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

 

7. 비구조화 할당 사용

const makeCompany = ({ name, address, serviceName }) => {
  return {
    name,
    address,
    serviceName
  }
};
const cobalt = makeCompany({ name: 'Cobalt. Inc.', address: 'Seoul', serviceName: 'Present' });

함수에서 객체를 넘길 경우 필요한 것만 꺼낼 수 있다. 

 

8. 동적 속성 이름 

const nameKey = 'name';
const emailKey = 'email';
const person = {
  [nameKey]: 'Lee Sun-Hyoup',
  [emailKey]: 'kciter@naver.com'
};
console.log(person);
// {
//   name: 'Lee Sun-Hyoup',
//   email: 'kciter@naver.com'
// }

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

 

9. !! 연산자를 사용해 Boolean 값으로 변경

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

!! 연산자를 사용하면 0, null, 빈 문자열, unfined, NaN을 false 외에 true로 변경할 수 있다.