* 전개 구문(Spread syntax , spread operator)
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax
function sum(x, y, z) {
return x + y + z;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers));
// expected output: 6
console.log(sum.apply(null, numbers));
// expected output: 6
//-----------------
* Array.from()
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/from
Array.from() 메서드는 유사 배열 객체(array-like object)나반복 가능한 객체(iterable object)를 얕게 복사해새로운Array 객체를 만듭니다.
console.log(Array.from('foo'));
// expected output: Array ["f", "o", "o"]
console.log(Array.from([1, 2, 3], x => x + x));
// expected output: Array [2, 4, 6]
//---------------------
* 배열과 유사배열
https://www.zerocho.com/category/JavaScript/post/5af6f9e707d77a001bb579d2
var array = [1, 2, 3];
var nodes = document.querySelectorAll('div'); //
Array.isArray(array); // true
Array.isArray(nodes); // false
//---------
const arrLike = { 0: 'foo', 1: 'bar', 2: 'baz', length: 3 };
typeof arrLike, // object
Array.isArray(arrLike), //false
typeof Array.from(arrLike), // object
Array.isArray(Array.from(arrLike)) // true
//---------------------------------------------
https://github.com/airbnb/javascript
//------------------------
* 동적 개체 이름
https://github.com/airbnb/javascript#es6-computed-properties
function getKey(k) {
return `a key named ${k}`;
}
// bad
const obj = {
id: 5,
name: 'San Francisco',
};
obj[getKey('enabled')] = true;
// good
const obj = {
id: 5,
name: 'San Francisco',
[getKey('enabled')]: true,
};
//----------------------------------------------
* 개체의 얕은 복사에 spread operator (...) 사용
https://github.com/airbnb/javascript#objects--rest-spread
// very bad
const original = { a: 1, b: 2 };
const copy = Object.assign(original, { c: 3 }); // this mutates `original` ಠ_ಠ
delete copy.a; // so does this
// bad
const original = { a: 1, b: 2 };
const copy = Object.assign({}, original, { c: 3 }); // copy => { a: 1, b: 2, c: 3 }
// good
const original = { a: 1, b: 2 };
const copy = { ...original, c: 3 }; // copy => { a: 1, b: 2, c: 3 }
const { a, ...noA } = copy; // noA => { b: 2, c: 3 }
//----------------------------------------------
* 배열복사에 spread (...) 사용
// bad
const len = items.length;
const itemsCopy = [];
let i;
for (i = 0; i < len; i += 1) {
itemsCopy[i] = items[i];
}
// good
const itemsCopy = [...items];
//-------------------------------------------
* (iterable)개체 -> 배열 로 변환에 spread (...) 사용
const foo = document.querySelectorAll('.foo');
// good
const nodes = Array.from(foo);
// best
const nodes = [...foo];
'Code > JavaScript' 카테고리의 다른 글
[Javascript] 배열, 객체 Deep Copy (0) | 2020.04.04 |
---|---|
[Javascript] call(), apply(), bind() 차이 (0) | 2020.04.03 |
[Javascript] EsLint 에러 해결 방법 (0) | 2020.02.23 |
[Javascript] 비동기 함수, Promise, then, async, await 예제 (0) | 2020.02.12 |
[Javascript] 자바스크립트 메모리 관리 (0) | 2020.01.27 |