[JavaScript] 편리함을 위한 ES6

 

ECMAScript

 

 

 

자바스크립트는 Netscape communications 로부터 개발된 이후, 성공적이자 마이크로소프트에서 JScript를 개발하였다. 그러나, 두 언어의 호환성 충돌로 특정 기능들이 모든 브라우저에서 동일하게 동작하지 않는 크로스 브라우징 이슈가 발생한다. 

이러한 이슈를 해결하기 위해 자바스크립트를 표준화하였는데 이를 ECMAScript라 한다. 뒤에 붙여지는 숫자는 버전을 의미하고, ES6는 2015년에 업데이트된 에디션이다.

 

ES5 이하 버전에서 발생하였던 많은 문제들이 해결되고 React, Vue.js 등 여러 라이브러리들도 유지보수나 가독성 측면에서 개발 환경을 ES6에 맞추게 된다. 현재는 ES7, ES8, , , ES12 까지의 버전이 업데이트 되었으나 ES6에서는 큰 변화가 있었기에 이에 대한 기능들을 익히고자 포스팅하게 되었다.

 

 

ES6에 개선된 자바스크립트의 문법들은 다음과 같다.

 

• let & const
• String Methods
• for of & spread operator
• Destructuring Array & Object
• set 
• Template literals
• Arrow function & default parameter
• proxy

 

let & const

 

기존에 사용되었던 var 키워드는 변수 선언 및 할당에 자유로움이 있었으나, let이라는 키워드는 한번 선언된 후에는 같은 이름으로 재선언할 수 없으며 값은 재할당 가능하다.

var name = "roco";
for(let i = 0; i<10; i++) {
	console.log(i) // OK
}
console.log(i) // ReferenceError

 

변하지 않는 고정된 값을 사용할 때 변수명으로 대문자 표기법을 사용하였지만, ES6부터는 const 키워드가 등장하면서 상수라는 걸 명시해줄 수 있으며, 한번 초기화하면 재할당 및 재선언이 불가능하다. 

var NAME = "roco";
const max = 1000;
console.log(max);

 

또한, let과 const 모두 block scope 내부에 선언되면 안에서만 사용 가능하다는 것이 특징이므로. 외부 스코프에서는 참조를 할 수 없다.

if(true) {
	const fruit_name = "melon";
}
console.log(fruit_name); // ReferenceError

const fruit_name = "melon";
if(true) {
	console.log(fruit_name);
} // OK

 

결론적으로 변수 사용법에 var는 사용하지 않는 걸 권장하며, 기본적으로 const를 사용한다. 그러나 변경이 될 수 있다면 let 키워드를 사용하는 편이 좋다.

 

 

String Methods

 

ES6에 추가된 문자열 메소드 중 부분 문자열을 찾기위한 메소드 세가지가 있으며 결과값으로 true or false를 반환한다.

let str = "hello world";
let match = "hello";

console.log(str.startsWith(matchstr));
console.log(str.endsWith(matchstr));
console.log(str.includes(matchstr));

 

 

for of & spread operator

 

시퀀스 자료형의 데이터들을 순회하고자 할 때 이전에는 일반적으로 아래와 같이 for문이나 forEach문, for in문을 사용하였다.

const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, undefined];

for(let i = 0; i<10; i++) {
	console.log(data[i]);
}

data.forEach(function(value) {
	console.log(value);
})

 

for of문이 나오면서 따로 기존 for문처럼 범위 지정이나 가변성을 고려해주지 않아도 간편하게 순회를 해줄 수 있다.

const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, undefined];

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

const hostingName = "github";
for(let char of hostingName) { 
	console.log(char);
}

 

spread operator는 이미 존재하던 배열에서 새로운 배열에 복사해 쓰고자할 때 유용한 문법으로 하나씩 데이터를 추가해주지 않아도 "..." 를 통해 펼쳐서 배열을 복사해줄 수 있다. 단, 새로운 공간에 복사가 되는 것이기에 두 개의 변수를 비교하면 같은 값이 될 수 없다.

let fruits = ["apple", "banana", "melon"];
let newElements = [...fruits];

console.log(newElements);

function multiply(a, b, c) {
	return a*b*c;
}

let numList = [3, 6, 12];
console.log("result = ", sum(...numList));

 

 

Destructuring Array & Object

 

변수에 배열이나 객체의 필요한 값을 할당하는 데 유용하게 쓰이는 비구조화 배열은 구조화 되어있는 배열 및 객체를 말 그대로 파괴시켜 특정 변수에 할당하는 문법이다.

let names = ["dero", "jinho", "hojin", "minji"];
let [name1, ,name2] = names;

console.log(name1, name2); // "dero", "hojin"

 

다음과 같이 객체에서도 똑같이 적용되는 것을 확인할 수 있으며, 객체의 키 값을 바꾸고 싶다면 콜론을 사용해 키 이름을 바꿔 객체의 키 값을 할당해 사용해줄 수 있다.

let obj = {
	name = "dero",
    	age : 22,
}

let {name, age} = obj;
console.log(name, age);

let {name:myName, age:myAge} = obj; 
console.log(myName, myAge);

 

 

set

 

set은 중복을 허용하지 않고 유일한 값을 저장하려 할 때와 이미 값이 존재하는지 확인할 때 유용한 자료구조이다.

let mySet = new Set();

mySet.add(10);
mySet.add(20);
mySet.add(10);

console.log(mySet.has(10)); // true

for(let num of mySet) {
	console.log(num); // 10, 20
}

mySet.delete(10);

 

 

Template literals

 

문자열을 표현하는 데 불편함을 줄여줄 수 있는 템플릿 리터럴이 새롭게 추가되면서 따옴표를 사용하지 않고, 백틱(`)으로 대신 표현해줄 수 있다.

const name = "홍길동";
const age = 47;

console.log("저의 이름은" + name + "이며, 나이는 " + age + "살 입니다.");
console.log(`저의 이름은 ${name}이며, 나이는 ${age}살 입니다.`);

 

 

Arrow function & default parameter

 

기존의 함수 선언문을 살펴보면 다음과 같다. 함수명을 명시하여 일반적으로 선언하는 방법과 이름이 없는 익명 함수를 이용하는 방식이었다.

function sum(value1, value2) { 
	return value1 + value2;
}

const sum = function(v1, v2) { // function literal
	return v1 + v2;
}

 

화살표 함수를 사용함으로써 함수를 선언하는 방식이 비교적 간단해졌고, 인자가 하나뿐이라면 소괄호를 생략할 수 있다. 한 줄로 표현이 가능한 경우 중괄호까지 생략이 가능하다.

let newArr = [10, 20, 30, 40, 50].map( v => v * 10 );

console.log("arrow newArr", newArr);

let str = name => console.log(name);
let str = func => ({name:"dero"}); // return obj

 

함수의 매개변수에 디폴트 값을 주기위해 아래와 같은 코드를 사용하였으나, ES6 부터는 디폴트 매개변수 기능이 생기며, 가독성이 향상되었고 코드가 간결해졌다.

function sum(value, size) {
	size = size || 1;
    	return value * size;
}

console.log(sum(5));

 

다음의 코드는 디폴트 매개변수를 적용한 코드이다.

// default parameters
function sum(value, size={value:1}) {
    return value * size;
}

console.log(sum(5, {value:5})); // return value 25
console.log(sum(3)); // return value 3

 

추가적으로 rest parameters는 가변적인 인자가 필요로 할 때 함수에서 배열로 처리하는 경우가 많이 생기는데, 이를 유용하게 처리해줄 수 있는 기능이다. 헷갈릴 수 있지만 매개변수에 "..." 이 붙는 것 이외에는 spread operator 라고 보면 될 것이다.

function checkNum(...argArray) {
	const result = argArray.every(v => typeof v === "number")
    	console.log(result); // false
}

const result = checkNum(50,90,70,false);

 

 

proxy

 

어떠한 객체가 있을 때 해당 객체를 가로채서 다른 작업을 추가로 하고자할 때 쓰는 기능이며, 도중에 객체의 변경이 일어날 것이 예상이 되고 그 객체의 값을 얻으려고 한다면 사용 시 유용할 수 있다.

 

myObj라는 객체에는 하나의 키와 값만 지정해놓았으나 추가적으로 Proxy 객체를 생성하여 getter, setter 메소드가 만들어진 것을 확인할 수 있다. 매개변수로 들어간 target은 proxy가 아닌 myObj를 가리키는 것이다.

 

const myObj = {name:"roco", changedValue : 0};

const proxy = new Proxy(myObj, {
	get : function(target, property, receiver) {
    	console.log("get value");
        return (property in target) ? target[property] : "anonymous";
    },
        set : function(target, property, value) {
        console.log("set value");
        target['changedValue']++;
        target[property] = value;
    }
});

proxy.name = "dero";
proxy.changedValue;

proxy를 통해 접근하거나 값을 얻으려할 때 myObj에 영향을 미치며 해당 객체에서 데이터를 가져오게 된다.

 

 

파일을 불러오거나 보낼 때 편리하게 쓸 수 있는 ES6 버전의 Module 기능도 있으나 모듈의 개념을 먼저 파악하는 게 이해하기에 수월할 것 같아 따로 포스팅을 하는 게 좋을 것 같다.

 

ES6 Module