[javascript] es2015

Published: by Creative Commons Licence

참고사이트

scope

var

function 단위까지 유효범위, 기존 변수 선언 시 사용

let

블록단위 (e.g. function, if…)
ie 미지원

const

재할당 불가, 주로 상수값을 선언할때 사용.
단, 배열과 오브젝트의 값을 변경하는 것을 가능

function home(){
  const list = ['apple', 'orange'];
  list.push('banana'); // list ='banana'와 같이 재할당은 불가
  console.log(list); // ['apple','orange','banana']
}

String 신규 메소드

startWith()

지정한 문자열이 특정문자로 시작하는지 확인하여 true/false 리턴
ie 미지원
str.startsWith(searchString[, position])

endWith()

지정한 문자열이 특정문자로 끝나는지 확인하여 true/false 리턴
ie 미지원
str.endsWith(searchString[, length])

includes()

지정한 문자열에 특정문자가 포함되어 있는지 확인하여 true/false 리턴
ie 미지원
str.includes(searchString[, position])

for … of

for … in에서는 예상치 못한 동작(내게는 없으나 프로토타입체인에 의해 생성된 값도 반복될 수 있는 등…) 이 발생할 수 있으므로 권장하지 않는다. 대신 for … of로 대체하면 해당 문제가 발생하지 않는다.
참고로 for(인덱스 in 목록)이지만 for(값 of 목록)으로 인자도 다름에 주의한다.
ie 미지원

for (variable of iterable) { statement }

var list = [1, '일', null, undefined, NaN, ''];
for(let value of list){
    console.log(value);
}
/*
1
일
null
undefined
NaN

*/

추가로 for-of는 배열의 특성을 가진 것만 사용가능하다. 아래와 같이 오브젝트는 불가

const arr = [1, 2, 3, 4]
for (val of arr) {
    console.log(val);
}

const obj = {
    a: 1,
    b: 2,
    c: 3
}
for (val of obj) {
    console.log(obj);
}
// Uncaught TypeError: obj is not iterable

for (index in obj) {
    console.log(index);
    console.log(obj[index]);
/*
a
1
b
2
c
3
*/

rest operator

함수의 인자가 정의된 것보다 많이 전달될 때 마지막 인자에 자바스크립트 배열로 묶여서 전달이 된다.

function myInfo(firstName, lastName, ...otherInfo) {
    return otherInfo;
}
myInfo('mass', 'p', 'developer', 'korean'); //  ['developer', 'korean']

spread operator

문자, 인수, 객체를 확장하는 연산자?
ie 미지원

함수 호출 시 인수 확장

myFunction(...iterableObj)

배열의 값은 바로 인수로 사용할수 없다. 그래서 .apply(null, 배열명)를 이용해서 사용했지만 이것을 스프레드 오퍼레이터를 이용하면 훨씬 간편하다.

// 기존
function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction.apply(null, args);
// 신규
function myFunction(x, y, z) { return x + y + z }
var args = [0, 1, 2];
myFunction(...args);

레스트 오퍼레이터와 스프레드 오퍼레이트는 다른 것임.

function myFunction(x, y, ...z) {  // ...z = rest operator
    let result = x + y;
    console.log(result);
    console.log(z);
}
var args = [0, 1, 2, 3];
myFunction(...args); // spread operator

배열 리터럴과 문자열의 확장

[...iterableObj, '4', 'five', 6];

  • 배열 확장 
    var parts = ['shoulders', 'knees'];
var lyrics = ['head', ...parts, 'and', 'toes'];
  • 배열 합치기 
    // 기존
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1 = arr1.concat(arr2); // arr2 의 모든 항목을 arr1 에 붙임
// 신규
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1 = [...arr1, ...arr2]; // arr1 은 이제 [0, 1, 2, 3, 4, 5]
  • 배열 복사 ```js var arr1 = [0, 1, 2]; var arr2 = […arr1]; console.log(arr2); //[0, 1, 2]

arr2.push(3); console.log(arr1); //[0, 1, 2] console.log(arr2); //[0, 1, 2, 3]


스프레드 오퍼레이터를 쓰지 않고 배열을 다른 배열로 바로 넣어버린다면 요소가 추가 되었을 때 동일한 영향을 받게 된다. 주의해야 한다.
```js
var arr1 = [0, 1, 2];
var arr2 = arr1;
console.log(arr2); //[0, 1, 2]

arr2.push(3);
console.log(arr1); //[0, 1, 2, 3]
console.log(arr2); //[0, 1, 2, 3]

객체 리터럴 확장

let objClone = { ...obj }; // es2018년 추가

var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };

var clonedObj = { ...obj1 };
// Object { foo: "bar", x: 42 }

var mergedObj = { ...obj1, ...obj2 };
// Object { foo: "baz", x: 42, y: 13 } -> 같은 키 foo의 값은 obj2 의 값으로 대체

Array.from()

노드리스트와 같은 배열형태이지만 실제 배열이 아닌 것(유사 배열 객체(array-like object) 혹은 반복 가능한 객체(iterable object))들을 새로운 배열(array)로 리턴해 준다.
ie 미지원

Array.from(arrayLike[, mapFn[, thisArg]])

<ul>
  <li>red</li>
  <li>yellow</li>
  <li>black</li>
</ul>

let nodeList = document.querySelectorAll('li');
console.log(toString.call(nodeList)); // "[object NodeList]"
let array = Array.from(nodeList); // [li, li, li]
console.log(toString.call(array)); // "[object Array]"