안녕하세요, 똑똑한개발자에서 프론트엔드 개발을 하고 있는 Luke 입니다. 👋
똑똑한개발자 프론드엔드 팀은 es6를 기반으로 한 타입스크립트 언어를 활용하여 프로젝트를 진행하고 있습니다.
기존에는 ES5 문법으로 JavaScript 코드를 작성하였지만 이제는 최신 트렌드에 맞게 ES6 문법으로 코드를 작성하게 되고, es5와 비교했을때 여러 변경사항이 있습니다. 오늘 글에서는 ES6에서 새로 추가된 기능을 모두 설명하기보다는 코드를 좀 더 간소화하고, 유지보수하기 좋은 코드를 만들기위해서 자주 사용하는 기능위주로 살펴보겠습니다.
ECMAScript란?
ECMA스크립트(ECMAScript, 또는 ES)는 자바스크립트를 표준화 하기위해 만들어진, ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 말합니다.
const and let
const는 ES6에서 변수를 선언하기 위한 새로운 키워드입니다. const는 객체와 함께 사용할 때를 제외하고는 변경 불가능한 변수 입니다. react에서는 특정 이벤트를 실행하는 버튼이 있거나 특정 요소를 정의하는데에 const를 사용합니다. 변경 불가능한 값을 정의하려면,const를 키워드를 사용하여 상수로 사용하는 것이 좋습니다.
// ES5
var button = document.getElementById("button1");
// ES6
const button = document.getElementById("button2");
let은 새로운 값을 받을 수도 있고 재할당할수도 있습니다. 즉, 변경 가능한 변수가 생성됩니다. 과거 es5이하 문법에서는 var로 선언된 변수가 ‘호이스팅(hoisting)’되는 현상이 있었습니다. es6에서는 이러한 호이스팅 현상이 일어나는 side effect를 최소화 하기위해 변경 가능한 변수에 대해 let 키워드로 정의합니다.
let name = "toktokhan";
name = "dev";
console.log(name); //dev
// name 변수를 let이 아닌 const로 정의한다면, 당연히 'name'변수에 'dev'는 출력되지 않고, 오류가 발생합니다.
화살표함수
화살표 함수는 javascript에서 함수를 정의하는 function 키워드 없이 함수를 만들 수 있으며, return 키워드 없이, 식을 계산한 값이 자동으로 반환됩니다. () 안에 함수의 인자가 들어가고, => 오른쪽에는 결과를 반환하는 식입니다. es5와 es6의 방식의 코드를 비교하며 살펴보겠습니다.
// ---------------- ES5
function myFunc(name) {
return "TokTokHan" + name;
}
console.log(myFunc(".dev"));
// ---------------- ES6 화살표 함수
// 함수 myFunc는 화살표(=>) 우측의 표현식(expression)을 평가하고, 평가 결과를 반환합니다.
const myFunc = (name) => {
return `TokTokHan ${name}`;
};
console.log(myFunc(".dev"));
// 'return' 키워드를 사용하지 않아도 됩니다
const myFunc = (name) => `TokTokHan ${name}`;
console.log(myFunc(".dev")); // 출력 => 안녕 영희
//인수가 하나밖에 없다면 인수를 감싸는 괄호를 생략할 수 있습니다.
// 괄호를 생략하면 코드 길이를 더 줄일 수 있습니다.
let double = (n) => n * 2;
비구조화 할당
비구조화 할당은 객체와 배열로부터 프로퍼티를 쉽게 꺼낼 수 있는 문법입니다. 이번에도 역시, es5와 es6의 방식의 코드를 비교하며 살펴보겠습니다.
// ES5 문법
const toktokhanCompany = {
company: "TokTokHan",
name: ".dev",
age: 1,
};
let company = contacts.company;
let name = contacts.name;
let age = contacts.age;
console.log(company);
console.log(name);
console.log(age);
const ToktokhanCompany = {
company: "TokTokHan",
name: ".dev",
age: 1,
};
let { company, name, age } = ToktokhanCompany;
console.log(company);
console.log(name);
console.log(age);
비구조화 할당을 사용하면 객체를 나타내는 중괄호를 열고 그 안에 있는 프로퍼티들을 언급함으로써 간단하게 내부의 속성들을 외부로 인출하여 사용할 수 있습니다. ES5에서 같은 작업을 해야하는 경우, 사용해야하는 속성이 많을수록, 새로운 변수를 생성하고 대입하는 식의 반복작업이 계속됩니다.
ES5에서는 각 변수에 각각의 값을 할당하여 그 값을 정의했습니다. 그런데 ES6에서는 객체의 속성을 얻기 위해 값을 중괄호 안에 넣어 좀 더 간결하게 정의 할 수 있습니다. React에서 Props를 내려주거나 특정 상태를 정의할때 비구조화 할당 문법을 활용할 수 있습니다.
for…of 문
특정 행위를 반복시켜 결과값을 얻어야할때 반복문을 사용합니다. 반복 가능한 객체(iterable)를 for문 안에서 반복시켜 연속된 결과값을 얻습니다.
const iterable = [10, 20, 30];
//es5
for (let i = 0; i < iterable.length; i++) {
console.log(value);
}
//es6
for (const value of iterable) {
console.log(value);
}
Spread Operator
spread 연산자는 특정 객체 또는 배열의 값을 다른객체나 배열로 복제하거나 옮길때 사용합니다. React에서는 state의 특정부분만 변화시키거나, 최초의 상태를 유지하며 데이터를 추가하는 등의 경우에 사용됩니다.
const obj = {
a: 10,
b: 20,
};
const newObj = { ...obj };
console.log(newObj); // { a: 10, b: 20 }
const arr = [1, 2, 3];
const newArr = [...arr]; // [1, 2, 3]
console.log(newArr);
Default Parameter(기본 매개변수)
//es5
var foo = (a, b, c) => {
console.log(a, b, c);
};
foo("a");
//a undefined undefined
기존의 es5문법을 활용하여 작성할 경우, 파라미터 a 의 값은 들어왔지만 b 와 c 는 값을 할당받지 못해 undefined가 출력됩니다. 기본값을 설정하기 위해 파라미터가 undefined 인지 일일히 체크하고, 값을 할당해줘야 했습니다.
//es6
const foo = (a, b = "b", c = "c") => {
console.log(a, b, c);
};
foo("a");
//a b c
es6문법을 사용할 경우, default parameter를 설정할 수 있게 변경되었습니다. 따라서 함수 실행 시 parameter b와 c에 대해 별도로 지정하지않을 경우, default로 설정된 “b”, “c”가 출력됩니다.
후기
ES6 문법으로 생각보다 더 많은 코드들을 간소화할 수 있고, 가독성있게 나타 낼 수 있습니다. ECMAScript는 계속 개선되고 업데이트 되기 때문에, 변경점에 대하여 공식문서를 활용하고, ECMAScript 변경점 중 특이사항이 있거나, 프로젝트에 적용하며 나누고 싶은 부분들은 해당 게시글에 추가적으로 업데이트 하겠습니다.