2020년 5월 16일 토요일

JavaScript 트릭

1. Arrow Functions

1
2
3
4
5
6
7
8
9
10
const multiply = function(x, y) {
  return x * y;
};
 
 
const multiply = (x, y) => {
  return x * y;
};
 
const multiply = (x, y) => x * y;
cs

2. Spread Operator

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const parts = ['shoulders''knees']; 
const lyrics = ['head', ...parts, 'and''toes'];
 
console.log(lyrics);// Result: ["head", "shoulders", "knees", "and", "toes"]
 
let arr1 = [012];
let arr2 = [345];
 
arr1 = [...arr1, ...arr2];
console.log(arr1) // Result: [0, 1, 2, 3, 4, 5]
 
const add = (a, b, c) => a + b + c;
let array = [1,2,3];
console.log(add(...array)); // Result: 6
cs

3. Rest Operator

1
2
3
4
5
const blend = (ice, liquid, ...theRest) => {
  console.log(theRest);
};
blend('ice''milk''banana''strawberry');  
// Result: ['banana', 'strawberry']
cs

4. Fill Arrays

1
2
3
4
5
let array = Array(5).fill(''); // Result: ['', '', '', '', '']
 
let array = Array.from(Array(5).keys()); // Result: [0, 1, 2, 3, 4]// Using the spread operator
 
let array = [...Array(5).keys()] // Result: [0, 1, 2, 3, 4]
cs

5. Computed object property names

1
2
3
4
5
6
let key = 'A_DYNAMIC_KEY';
let obj = {
  [key]: 'A_VALUE',
};
 
console.log(obj) // Result: { A_DYNAMIC_KEY: 'A_VALUE' }
cs

6. Use reduce() map() and filter() instead of regular for loops

1
2
3
4
5
6
7
8
9
10
11
let orders = [12345];
const total = orders.reduce((acc, cur) => acc + cur);
console.log(total); // Result: 15
 
let orders = [12345];
const total = orders.map((item) => item * 2);
console.log(total); // Result: [2, 4, 6, 8, 10]
 
let orders = [12345];
const total = orders.filter((item) => item > 3);
console.log(total); // Result: [4, 5]
cs

7. Ternary Operator

1
2
3
4
5
6
7
8
9
// condition ? (expression if true) : (expression if false)
const hour = 5;if (hour < 18) {
  console.log('Good day');
else {
  console.log('Good evening');
}// Result: Good day
 
const hour = 5;
hour < 18 ? console.log(‘Good day’) : console.log(‘Good evening’);// Result: Good day
cs

8. Use console.table()

1
2
3
4
5
6
7
8
const foo = { name'Suibin', age: 30, coder: true };
const bar = { name'Borja', age: 40, coder: true };
const baz = { name'Paul', age: 50, coder: false };
console.table([foo, bar, baz]);
 
 
console.log('%cStyled log''color: orange; font-weight: bold;');
console.log('Normal log');
cs

댓글 없음:

댓글 쓰기