{"data":{"site":{"siteMetadata":{"title":"lastrites2018","author":"lastrites2018","siteUrl":"https://lastrites2018.netlify.com","comment":{"disqusShortName":"","utterances":"lastrites2018/gatsby-first-blog"},"sponsor":{"buyMeACoffeeId":""}}},"markdownRemark":{"id":"99606a8b-acee-50c2-be69-8d0b21edfb96","excerpt":"파라미터 기본값 ES6에서는 파라미터 기본값을 설정할 수 있어, 함수 내에 따로 파라미터 체크를 해줄 필요가 없다. Rest Paramerter Rest 파라미터(Rest Parameter)는 Spread 연산자( )를 사용하여 파라미터를 정의한 것을 의미한다. Rest 파라미터를 사용하면 인수의 리스트를 함수 내부에서 배열로 전달받을 수 있다. Rest 파라미터는 반드시 마지막 파라미터이어야 한다. arguments ES6에서는 위에서 상술했듯 rest…","html":"

파라미터 기본값

\n

ES6에서는 파라미터 기본값을 설정할 수 있어, 함수 내에 따로 파라미터 체크를 해줄 필요가 없다.

\n
// ES5\nfunction plus(x, y) {\n  x = x || 0 // 매개변수 x에 인수를 할당하지 않은 경우, 기본값 0을 할당한다.\n  y = y || 0 // 매개변수 y에 인수를 할당하지 않은 경우, 기본값 0을 할당한다.\n}\n\n// ES6\nfunction plus(x = 0, y = 0) {\n  // 파라미터 x, y에 인수를 할당하지 않은 경우, 기본값 0을 할당한다.\n}
\n

Rest Paramerter

\n

Rest 파라미터(Rest Parameter)는 Spread 연산자(...)를 사용하여 파라미터를 정의한 것을 의미한다. Rest 파라미터를 사용하면 인수의 리스트를 함수 내부에서 배열로 전달받을 수 있다.

\n
function foo(...rest) {\n  console.log(Array.isArray(rest)); // true\n  console.log(rest); // [ 1, 2, 3, 4, 5 ]\n}\n\nfoo(1, 2, 3, 4, 5); // [ 1, 2, 3, 4, 5 ]\n\n인수는 순차적으로 파라미터와 Rest 파라미터에 할당된다.\n\nfunction foo(param, ...rest) {\n  console.log(param); // 1\n  console.log(rest);  // [ 2, 3, 4, 5 ]\n}\n\nfoo(1, 2, 3, 4, 5);\n\nfunction bar(param1, param2, ...rest) {\n  console.log(param1); // 1\n  console.log(param2); // 2\n  console.log(rest);   // [ 3, 4, 5 ]\n}\n\nbar(1, 2, 3, 4, 5);
\n

Rest 파라미터는 반드시 마지막 파라미터이어야 한다.

\n
function foo( ...rest, param1, param2) { }\n\nfoo(1, 2, 3, 4, 5);\n// SyntaxError: Rest parameter must be last formal parameter
\n

arguments

\n

ES6에서는 위에서 상술했듯 rest 파라미터를 사용하여 가변 인자를 함수 내부에 배열로 전달할 수 있다. 유사 배열인 arguments 객체를 배열로 변환하는 번거로움을 피할 수 있다.

\n

ES6의 화살표 함수에는 함수 객체의 arguments 프로퍼티가 없다. 따라서 화살표 함수로 가변 인자 함수를 구현해야 할 때는 반드시 rest 파라미터를 사용해야 한다.

\n
var normalFunc = function() {}\nconsole.log(normalFunc.hasOwnProperty('arguments')) // true\n\nconst arrowFunc = () => {}\nconsole.log(arrowFunc.hasOwnProperty('arguments')) // false
\n

Spread 연산자

\n
// ...[1, 2, 3]는 [1, 2, 3]을 개별 요소로 분리한다(→ 1, 2, 3)\nconsole.log(...[1, 2, 3]) // 1, 2, 3\n\n// 문자열은 이터러블이다.\nconsole.log(...'Hello') // H e l l o\n\n// Map과 Set은 이터러블이다.\nconsole.log(...new Map([['a', '1'], ['b', '2']])) // [ 'a', '1' ] [ 'b', '2' ]\nconsole.log(...new Set([1, 2, 3])) // 1 2 3
\n
\n

이터러블(iterable)

\n
\n
\n

이터러블은 순회 가능한 자료 구조이다. Symbol.iterator를 프로퍼티 키로 사용한 메소드를 구현하는 것에 의해 순회 가능한 자료 구조인 이터러블이 된다.

\n
\n

rest 파라미터는 반드시 마지막 파라미터이어야 하지만 Spread 연산자를 사용한 인수는 자유롭게 사용할 수 있다.

\n

배열에서 사용

\n
// ES6\nconst arr1 = [1, 2, 3]\nconst arr2 = [4, 5, 6]\n\n// ...arr2는 [4, 5, 6]을 개별 요소로 분리한다\narr1.push(...arr2) // == arr1.push(4, 5, 6);\n\nconsole.log(arr1) // [ 1, 2, 3, 4, 5, 6 ]
\n
Write a function called \"joinArrayOfArrays\".\n\nGiven an array of arrays, \"joinArrayOfArrays\" returns a single array containing the elements of the nested arrays.\n\nlet joinArrayOfArrays = (arr) => {\n  // your code here\n  let newArr = [];\n  arr.forEach(ele => {\n    newArr.push(...ele);\n    })\n    return newArr;\n}\n\nvar output = joinArrayOfArrays([[1, 4], [true, false], ['x', 'y']]);\nconsole.log(output); // --> [1, 4, true, false, 'x', 'y']
\n

Spread 연산자를 이용한 배열 복사

\n
// ES5\nvar arr = [1, 2, 3]\nvar copy = arr.slice()\n\nconsole.log(copy) // [ 1, 2, 3 ]\n\n// copy를 변경한다.\n\n// ES6\nconst arr = [1, 2, 3]\n// ...arr은 [1, 2, 3]을 개별 요소로 분리한다\nconst copy = [...arr]
\n

객체에서 사용하는 경우

\n

Spread 연산자를 사용하면 객체를 손쉽게 병합 또는 변경할 수 있다.

\n
// 객체의 병합\nconst merged = { ...{ x: 1, y: 2 }, ...{ y: 10, z: 3 } }\nconsole.log(merged) // { x: 1, y: 10, z: 3 }\n\n// 특정 프로퍼티 변경\nconst changed = { ...{ x: 1, y: 2 }, y: 100 }\n// changed = { ...{ x: 1, y: 2 }, ...{ y: 100 } }\nconsole.log(changed) // { x: 1, y: 100 }\n\n// 프로퍼티 추가\nconst added = { ...{ x: 1, y: 2 }, z: 0 }\n// added = { ...{ x: 1, y: 2 }, ...{ z: 0 } }\nconsole.log(added) // { x: 1, y: 2, z: 0 }
\n

Object.assign 메소드를 사용해도 동일한 작업을 할 수 있다.

\n
// 객체의 병합\nconst merged = Object.assign({}, { x: 1, y: 2 }, { y: 10, z: 3 })\nconsole.log(merged) // { x: 1, y: 10, z: 3 }\n\n// 특정 프로퍼티 변경\nconst changed = Object.assign({}, { x: 1, y: 2 }, { y: 100 })\nconsole.log(changed) // { x: 1, y: 100 }\n\n// 프로퍼티 추가\nconst added = Object.assign({}, { x: 1, y: 2 }, { z: 0 })\nconsole.log(added) // { x: 1, y: 2, z: 0 }
\n

Spread 연산자를 사용하면 유사 배열 객체(Array-like Object)를 배열로 손쉽게 변환할 수 있다.

\n
const htmlCollection = document.getElementsByTagName('li')\n\n// 유사 배열인 HTMLCollection을 배열로 변환한다.\nconst newArray = [...htmlCollection] // Spread 연산자\n\n// ES6의 Array.from 메소드를 사용할 수도 있다.\n// const newArray = Array.from(htmlCollection);
\n

advanced를 얻을 거면 사전조건을 명확히 해야

","frontmatter":{"title":"ES6 Rest parameter, Spread Operator (배열, 객체 다루기)","date":"September 12, 2018"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/til/20180912 ES6 Rest parameter, Spread Operator (배열, 객체 다루기)/","previous":{"fields":{"slug":"/til/20180911 ES6 Arrow Function/"},"frontmatter":{"title":"ES6 Arrow Function","category":"TIL"}},"next":{"fields":{"slug":"/til/20180912 Demo Day - immersive 7/"},"frontmatter":{"title":"Immersive 7기의 데모데이를 보고 왔다","category":"TIL"}}}}