JavaScript JavaScriptの9種類のコードテクニック

1.構造分解を使用して割り当てられた変数swap

ES 6の構造分解分配構文を使用して2つの変数を交換することができる.

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;
}

範囲ループを関数的にプログラミングする場合は、アレイを作成して使用できます.

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

3.アレイ内の同じ要素を除去する

Setを使用できます.

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

4.Spread演算子を使用してオブジェクトをマージする

2つのオブジェクトを個別の変数にマージできます.

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;
객체 생성시 키 생략하기
객체를 생성할 때 프로퍼티 키를 변수 이름으로 생략할 수 있습니다.

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

7.構造化されていない割り当ての使用

関数にオブジェクトを渡す場合は、必要なオブジェクトのみを取り出して書き込むことができます.

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

8.動的属性名

ES 6に追加する機能により、オブジェクトの鍵を動的に作成できます.

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

9. !! 演算子を使用して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