Tips, Tricks and Best Practices

참고자료

• https://kpiteng.medium.com/javascript-tips-tricks-and-best-practices-a94805c14d02

Group By Array Of Objects - reduce()

var arrCity = [
  {'region': 'Europe', 'name': 'Paris'},
  {'region': 'Europe', 'name': 'Amsterdam'},
  {'region': 'Europe', 'name': 'Vienna'},
  {'region': 'UnitedStates', 'name': 'New York'},
  {'region': 'UnitedStates', 'name': 'San Francisco'},
  {'region': 'Europe', 'name': 'Barcelona'},
 ]
 
var groupBy = function(xs, key) {
return xs.reduce(function(rv, x) {
  (rv[x[key]] = rv[x[key]] || []).push(x);
  return rv;
  }, {});
};

var resultByRegion = groupBy(arrCity, 'region');

console.log(resultByRegion);
// 결과
{
  Europe: [
    {name: "Paris", region: "Europe"}, 
    {name: "Amsterdam",region: "Europe"}, 
    {name: "Vienna",region: "Europe"}, 
    {name: "Barcelona",region: "Europe"}
  ],
  UnitedStates: [
    {name: "New York",region: "UnitedStates"}, 
    {name: "San Francisco",region: "UnitedStates"}
  ]
}

Next — next()

• 제너레이터란?

  • 일반 함수는 하나의 값(혹은 0개의 값)만을 반환합니다. 하지만 제너레이터(generator)를 사용하면 여러 개의 값을 필요에 따라 하나씩 반환(yield)할 수 있습니다

// 제너레이터 함수
function* getUniqueID() { 
  var uniqueNumber = 0;
  while (true) {
    yield uniqueNumber++;
  }
}

const uniqueID = getUniqueID();

console.log(uniqueID.next().value); // output: 0
console.log(uniqueID.next().value); // output: 1
console.log(uniqueID.next().value); // output: 2

Map — map()

var arrCity = [
  {
  'id': 1,
  'name': 'London',
  'region': 'UK',
  },
  {
  'id': 2,
  'name': 'Paris',
  'region': 'Europe',
  },
  {
  'id': 3,
  'name': 'New York',
  'region': 'United State',
  },
 ]
 
// 기존 city 받아서 boolean 프로퍼티 추가
const newArrCity = arrCity.map((city) => ({
  ...city,
  newCity: true,
}));
console.log(newArrCity); 

배열 값들 일괄 Cast

const arrStringValues = ['1', '2', '3', '4.567', '-89.95', [1.2345]];
const arrNumbers = arrStringValues.map(Number);
console.log(arrNumbers);

배열안 특정값 Index 찾기

const arrCity = [
  {'id':'1', 'name':'London'},
  {'id':'2', 'name':'Paris'},
  {'id':'3', 'name':'New York'}
];

const index = arrCity.findIndex(city => city.name === 'Paris');
console.log(index); 

If/Else | Switch 사용 피하기

// Before
function getCityInformation(city) {
  if (city.toLowerCase() === "london") {
    return "Welcome to London!";
  } else if (rhyme.toLowerCase() === "paris") {
    return "Welcome to Paris!";
  } else if (rhyme.toLowerCase() === "amsterdam") {
    return "Welcome to Amsterdam!";
  }

  return "We're Sorry, No City Found!";
}
const pariseCityInfo = getCityInformation('london');
// ------------------------------------------------
// After
function getCityInformation(city) {
  const cityInfo = {
    "london": "Welcome to London!",
    "paris": "Welcome to Paris!",
    "amsterdam": "Welcome to Amsterdam!",
  };
  
  return cityInfo[city.toLowerCase()] ?? "We're Sorry, No City Found!";
}
const pariseCityInfo = getCityInformation('Paris');

ALIAS_NAME 사용

const region = {
  "id": 1,
  "name": "Europe",
  "city": ['Paris', 'Vienna', 'Amsterdam'],
};

const {0: paris, 2: amsterdam} = region.city; // 깊은복사? 얕은복사?

console.log(paris); // Paris
console.log(amsterdam); // Amsterdam

숫자 _

let myNumber = 3_000_000;
console.log(myNumber);

배열의 unique 값들 가져오기 (중복제거)

const arrCity = ['Paris', 'Paris', 'Paris', 'London', 'New York', 'Paris' , 'Chicago'];
const uniqueCity = [...new Set(arrCity)];
console.log(uniqueCity); 

Promise Any

먼저 해결되는거 출력하는듯

const promise1 = new Promise((resolve, reject) => {
    resolve('promise1 was resolved.');
});
const promise2 = new Promise((resolve, reject) => {
    throw new Error("Whoops!");
}).catch(console.log);;
const promise3 = new Promise((resolve, reject) => {
    sleep(3000);
    resolve('promise3 was resolved.');
});
let result = Promise.any([promise1, promise2, promise3]);
console.log(result);

??=, &&=, ||= (논리 할당 연사자)

let firstNumber = null;
let secondNumber = 10;
// ??= : null 과 undefined 확인
firstNumber ??= secondNumber; 
console.log(firstNumber); // 10

firstNumber = 9;
firstNumber ??= secondNumber; // 9
// ---------------------------
// 위랑 동일
if(firstNumber == null || firstNumber == undefined){
    firstNumber = secondNumber;
}

let firstNumber = 5;
let secondNumber = 20;

if(firstNumber){
  firstNumber = secondNumber;
}
console.log(firstNumber); // 20
// ---------------------------
// 위를 짧게 쓸때
firstNumber &&= secondNumber; 
console.log(firstNumber); // 20

if(!firstNumber){
 firstNumber = secondNumber;
}
// ---------------------------
// 위를 짧게 쓸때
firstNumber ||= secondNumber;
console.log(firstNumber); //output: 10