[클라우딩 어플리케이션 엔지니어링 TIL] - DAY 18

자바스크립트 9가지 코드 트릭

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

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

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

일정 범위 루프에 대한 계산은 보통 다음과 같이 작성하지만

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

배열을 생성해서 redece 메서드를 통해 계산할 수 있음.

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

3. 배열 중복 제거

const numbers = [2, 13, 4, 4, 2, 13, 13, 4, 4, 5, 5, 6, 6, 7, 5, 32, 13, 4, 5];
console.log([...new Set(numbers)]); // [2, 13, 4, 5, 6, 7, 32]

 

Set을 이용하여 값 목록의 고유성을 보장하는 방법

const array = Array.from(document.querySelectorAll("[id]")).map((e) => e.id);
const set = new Set(array);
console.assert(set.size === array.length);

4. Spread 연산자(전개 구문)를 이용한 병합

// 배열 병합
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1 = [...arr2, ...arr1]; // arr1: [3, 4, 5, 0, 1, 2]

// 객체 병합
var obj1 = { foo: "bar", x: 42 };
var obj2 = { foo: "baz", y: 13 };

var clonedObj = { ...obj1 };
// Object { foo: "bar", x: 42 }

var mergedObj = { ...obj1, ...obj2 };
// Object { foo: "baz", x: 42, y: 13 } 같은 key의 value는 마지막으로 대입 된 값

 

 

... 을 이용해 값 복사도 가능, 그러나 1차원 이외의 다차원 clone은 얕은 복사라 적합하지 않을 수 있음.

var arr = [1, 2, 3];
var arr2 = [...arr]; // arr.slice() 와 유사
arr2.push(4);
console.log(arr); // [1, 2, 3];
console.log(arr2); // [1, 2, 3, 4];

var a = [[1], [2], [3]];
var b = [...a]; // 배열 a도 영향을 받음
b.shift().shift(); // b: [[], [2], [3]]

5. &&와 ||의 활용

조건문 이외에도 사용 가능하며 Boolean값뿐만 아니라 원하는 값을 보존, 반환할 수 있음.

/// ||
// 기본값을 넣어주고 싶을 때 사용가능
// 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. 구조 분해 할당 사용

구조 분해 할당: 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 표현식

 

6-1) 기본적인 구조 분해

// 배열 구조 분해
var foo = ["one", "two", "three"];
var [red, yellow, green] = foo;
console.log(red); // "one"
console.log(yellow); // "two"
console.log(green); // "three"

 

 

6-2) 객체에서 필요한 것만 꺼내서 할당 가능

// 객체 구조 분해
const person = {
	name: 'Lee Sun-Hyoup',
	familyName: 'Lee',
	givenName: 'Sun-Hyoup'
	company: 'Cobalt. Inc.',
	address: 'Seoul',
}
const { familyName, givenName } = person;

 

6-3) 객체 생성 시 프로퍼터 키를 변수 이름으로 생략 가능

const name = 'Lee Sun-Hyoup';
const company = 'Cobalt';
const person = {
  name,
  company
}
console.log(person);
// {
//   name: 'Lee Sun-Hyoup'
//   company: 'Cobalt',
// }

7. 비구조화 할당 사용

함수 매개변수로 객체를 넘길 경우 필요한 것만 사용 가능

// 함수 매개변수로 전달된 객체에서 필드 해체
function userId({ id }) {
  return id;
}

function whois({ displayName: displayName, fullName: { firstName: name } }) {
  console.log(displayName + " is " + name);
}

var user = {
  id: 42,
  displayName: "jdoe",
  fullName: {
    firstName: "John",
    lastName: "Doe",
  },
};

console.log("userId: " + userId(user)); // "userId: 42"
whois(user); // "jdoe is John"

8. 동적 속성 이름

ES6에 추가된 기능으로 객체의 키를 동적으로 생성

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'
// }

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

 

 

참고 https://developer.mozilla.org/ko/docs/Web/JavaScript