[Javascript] 전개 구문(Spread syntax , spread operator) (...)

* 전개 구문(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];