내가 코드스테이츠 Pre Course 진행중 알게된 쓸만한 JS 테크닉들:

1. Arrow function

From:

function sayHello(name) {
  console.log('Hello', name);
}

To:

sayHello = name => console.log('Hello', name);

2. Default Parameter

Parameter의 기본값 설정이 가능하다

From:

function volume(l, w, h) {
  if (w === undefined)
    w = 3;
  if (h === undefined)
    h = 4;
  return l * w * h;
}

To:

volume = (l, w = 3, h = 4 ) => (l * w * h);
volume(2) // 24 = 2 * 3 * 4  (l=2)

3. Bitwise operator (~)

~ 는 -1을 제외한 truthy한 값을 리턴한다

//From:
if(arr.indexOf(item) > -1) {
}

//To:
if(~arr.indexOf(item)) {
}

4. Object.entries() / Object.values()

Object.entries() 는 객체에 담긴 키/값 들을 배열에 짝으로 변환한다.

const credits = { producer: 'John', director: 'Jane', assistant: 'Peter' };
const arr = Object.entries(credits);
console.log(arr);
/*
[ [ 'producer', 'John' ],
  [ 'director', 'Jane' ],
  [ 'assistant', 'Peter' ]
]
*/

Object.values()는 Object.entries()와 같은 기능이지만 키 없이 값만 변환한다.

const credits = { producer: 'John', director: 'Jane', assistant: 'Peter' };
const arr = Object.values(credits);
console.log(arr);
// [ 'John', 'Jane', 'Peter' ]

5. Entries to Objects

Entries 처럼 배열에 짝으로 키/값이 저장된 것을 다시 객체로 만드는 code snippet

const list = arr.map(person => Object.assign(...person.map(([key, value]) => ({[key]:value}))))

6. Short-circuit evaluation (|| operator)

• If 조건문 없이 값 설정/확인 가능.
• 연산자 || 기준으로 왼쪽값이 false(undefined, null, '', 0, false 등)일 시 값이 true인 오른쪽값을 리턴한다. (왼쪽값 || 오른쪽값)
• 즉, 오른쪽에 있는 값을 기본값(default)으로 설정한다고 생각하면 된다.

Ex)

let person = {
  name: 'Jack',
  age: 34
}
console.log(person.job || 'unemployed');
// 'unemployed'
// person.job = false, 'unemployed' = true

let person = {
  name: 'Jack',
  age: 34,
  job: 'teacher'
}
console.log(person.job || 'unemployed');
// teacher
// person.job = true, 'unemployed' = true
// 'unemployed'가 true인지 확인하기 전에 person.job이 true이기 때문에 바로 그 값을 리턴한다.


let a;
let b = null;
let c = undefined;
let d = 4;
let e = 'five';

let f = a || b || c || d || e;

console.log(f); 
// 4    e까지 도달하기 전에 d가 true이기 때문에 4 출력

• Null 또는 Undefined일 시 기본값 설정 가능

From:

let dbHost;
if (process.env.DB_HOST) {
  dbHost = process.env.DB_HOST;
} else {
  dbHost = 'localhost';
}

To:

const dbHost = process.env.DB_HOST || 'localhost';

• Null, Undefined, 또는 empty('') 가 아닌것을 확인하면서, 변수를 다른 변수에 저장하고 싶을때

From:

if (variable1 !== null || variable1 !== undefined || variable1 !== '') {
     let variable2 = variable1;
}

To:

const variable2 = variable1  || 'new';
console.log(variable2 === 'new'); //true

7. Create tally with .reduce()

• 배열 안 각 요소 개수를 객체로 변환하기

const fruitBasket = ['banana', 'cherry', 'orange', 'apple', 'cherry', 'orange', 'apple', 'banana', 'cherry', 'orange', 'fig' ];

const count = fruitBasket.reduce( (tally, fruit) => {
  tally[fruit] = (tally[fruit] || 0) + 1 ; // tally[fruit]가 없으면 = 0, 있으면 +1을 해준다     기본값이 0
  //tally[fruit] = (tally[fruit] + 1) || 1  : tally[fruit]가 있으면 + 1을 해준다 없으면 tally[fruit] = 1 (기본값)
  return tally;
} , {})

console.log(count)
// { banana: 2, cherry: 3, orange: 3, apple: 2, fig: 1 }

8. Flatten array of arrays with .reduce()

• 중첩배열 평탄화

const data = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];

const flat = data.reduce((total, amount) => {
  return total.concat(amount);
}, []);

console.log(flat) // [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

• 배열 안, 객체 안에 있는 배열의 정보 가져오기 :

const data = [
  {a: 'happy', b: 'robin', c: ['blue','green']}, 
  {a: 'tired', b: 'panther', c: ['green','black','orange','blue']}, 
  {a: 'sad', b: 'goldfish', c: ['green','red']}
];

const colors = data.reduce((total, amount) => {
  amount.c.forEach( color => {
      total.push(color);
  })
  return total;
}, [])

console.log(colors)
//['blue','green','green','black','orange','blue','green','red']

• 여기서 중복 없는 결과값을 리턴하려면

const uniqueColors = data.reduce((total, amount) => {
  amount.c.forEach( color => {
    if (total.indexOf(color) === -1){  // indexOf -1 일 경우 배열 안에 없다는 뜻이다
     total.push(color);
    }
  });
  return total;
}, []);

uniqueColors // [ 'blue', 'red', 'green', 'black', 'orange']

9. Pipeline of functions with .reduce()

여러 함수들을 입력한 값에 순차적으로 적용하기

function increment(input) { return input + 1;}
function decrement(input) { return input — 1; }
function double(input) { return input * 2; }

let pipeline = [increment, double, decrement];
const result = pipeline.reduce(function(total, func) {
  return func(total);
}, 1);

console.log(result) // 입력한 값: 1  result = 3
// increment : 1 + 1  = 2
// double : 2 * 2 = 4
// decrement : 4 - 1 = 3