ES6 - Scope, String, Array

ES6?

개선된 Javascript 문법.

ES6 browser compatibility의 훌륭한 지원.

ES6를 기반으로 한 Javascript 생태계의 확산.

babel로 ES5로 변환 가능.

scope

let

: block단위의 scope.

let과 closure

: var를 이용해서 나타난 closure scope를 let을 이용해 해결 가능.

const - 선언된 변수 지키기

변수나 배열을 const로 선언하면 새로 assignment 할 수 없다.

const를 기본으로 사용하고, 변경이 될 수 있는 변수는 let 사용하기.

const 특성과 immutable array

const를 사용하더라도 배열과 오브젝트 값을 변경하는 것은 가능하다. 불변을 의미하는 것은 아니다. 재할당이 불가.

immutable array를 만드려면 기존 배열을 const로 선언해 놓고 새로운 값을 추가하고 싶을 땐 list2 = [].concat(list, "새로운 값");로 하면 list는 그대로 남아있다.

String의 새로운 메소드

let str = "hello world!";
let matchStr ="hello";

str.startsWith(matchStr); //matchStr로 시작하는 지 
str.endsWith(matchStr);   //matchStr로 끝나는 지
str.includes("hello");    //해당 문자열을 포함하는 지

Array

for of - 문자열, 배열 순회하기

var data = [1, 2, undefined, NaN, null, ""];
Array.prototype.getIndex = function(){};

for(let idx in data){
    console.log(data[idx]);
}

보통 쓰던 for in 경우에 function(){}까지 자기 자신이 가지고 있던 객체 이외의 상위 추가된 객체도 나타내게 되는 문제가 있음.

var data = [1, 2, undefined, NaN, null, ""];
Array.prototype.getIndex = function(){};

for(let value of data){
    console.log(value);
}

for of를 사용하면 위 같은 문제를 방지할 수 있으므로 순회의 경우 for of 사용.

spread operator - 배열의 복사

펼침연산자(spread operator)

let pre = ["apple", "orange", 100];
let newData = [...pre];
console.log(pre === newData); //false

copy를 하여 같은 참조는 아니여서 false로 나오지만 둘의 값은 같게 나온다.

spread operator - 활용법

let pre = [100, 200, "hello", null];
let newData = [0, 1, 2, 3, ...pre, 4];

출력: [0, 1, 2, 3, 100, 200, “hello”, null, 4];

function sum(a,b,c) {
    return a+b+c;
}
let pre = [100, 200, 300];

console.log(sum(...pre));

매개변수 할당에 편리해짐.

from 메소드로 real 배열 만들기

function addMark(){
    let newArray = Array.from(arguments);

    let newData = newArray.map(function(value){
        return value + "!";
    });
}

addMark(1,2,3,4,5);

개수가 몇 개인지 잘 모르는 가변인자를 받는 경우 argument(배열이 아니여서 from으로 array로 만들어줌)사용 가능.

출력: [“1!”, “2!”, “3!”, “4!”, “5!”]