TWIL 2021-7 (3)

1. State 초기화

---

export const initialState = {
  form: {
    searchText: "",
    criteria: {
      created_at: ""
    }
  },
  list: [],
};

// bad
case INIT_STATE:
  draft.form = {};
  draft.list = [];
break;

// fix
case INIT_STATE:
  draft.form = initialState.form;
  draft.list = initialState.list;
break;

화면을 벗어나면 INIT_STATE로 상태 값을 초기화 할 때, bad 케이스로 초기화하는 것은 index.js에서 form 내부의 프로퍼티를 조건으로 사용하는 로직을 쓰지 못하게 되므로 잘못된 방식이다.

2. filter로 배열 중복값 제거하기

filter의 두번째 인수인 인덱스를 사용하는 방법

function removeDuplicates(arr) {
  return arr.filter((el, i) => arr.indexOf(el) === i);
}

let str = ["🧤", "🤍", "👀", "🧤", "🤍"];

console.log(removeDuplicates(str));
// ["🧤", "🤍", "👀"]

3. reduce

---

리듀스 사용 시 초기값을 꼭 명시하는 습관을 들이자.

4. JavaScript Tricks

---

유용한 자바스크립트 스킬

Assigning values to multiple variables

//Longhand 
let a, b, c; 
a = 5; 
b = 8; 
c = 12;
 
//Shorthand 
let [a, b, c] = [5, 8, 12];

String into a Number

//Longhand 
let total = parseInt('453'); 
let average = parseFloat('42.6'); 

//Shorthand 
let total = +'453'; 
let average = +'42.6';

Get character from string

let str = 'jscurious.com'; 
//Longhand 
str.charAt(2); // c 

//Shorthand 
str[2]; // c

Filter Unique Values

const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // Result: [0, 1, 2, 3]

// slice 사용하는 것이 속도는 더 빠르다. 

---

🔗 20 JavaScript Shorthand Techniques that will save your time
🔗 11 JavaScript Tricks You Won’t Find in Most Tutorials