프론트엔드 개발을 처음 시작할 때부터 ES6를 사용했기 때문에 ES6 사용이 당연했고, 특별하게 생각해본 적이 없었습니다. 하지만 ES6문법은 기존의 자바스크립트와 조금 다른 형태를 갖고 있다는 점! 익숙해지면 이전 코드들보다 보기 편하다는 장점! 보다 효율적인 코드작성을 위해 개발자들은 공부를 하는데 저도 그중 하나가 되기위해 공부하면서 자주 쓰이는 ES6 문법에 대해 포스팅 해보려합니다.
자바스크립트(Javascript)란?
자바스크립트는 마이크로소프트가 인터넷 익스플로러를 개발하기 전 넷스케이프(Netscape)라는 웹브라우저에서 웹페이지의 동적인 요소를 구현하기 위해 발명된 언어입니다. 다른 웹 브라우저에서도 이 언어를 탑재하기 시작하면서 현대의 웹 어플리케이션의 구현을 가능하게 만든 언어로 발전하였습니다.
ECMA Script가 생긴 배경
ECMA Script란 자바스크립트를 이루는 코어 스크립트 언어입니다. 넷스케이프 말고도 다른 다양한 웹 브라우저에서 자바스크립트가 잘 작동되기 위해 표준 규격이 필요했는데, 이 때문에 ECMAScript Standard라는 스크립트 표준이 생기게 됩니다. ECMAScript를 ES라 줄여 부르고 버전에 따라서 ES뒤에 숫자가 붙는데 ES6은 2015년에 만들어져 널리 사용중입니다.
1. 변수 let과 const
Before : 변수 var의 단점
var name = "멍멍이";
if (name) {
var name = "냥냥이";
console.log(name); // 멍멍이
}
console.log(name); // 냥냥이 var는 fucntion 단위입니다. 그래서 블록 범위랑 글로벌 범위랑 구분이 안갑니다. 변수 선언해도 코드 블럭안으로 한정시킬 수 없는 단점.
var name = '멍멍이'
console.log(name) // 멍멍이
var name = '냥냥이'
console.log(name) // 냥냥이 변수를 한 번 더 선언했음에도 불구하고, 에러가 나오지 않고 각기 다른 값이 출력되는 것을 볼 수 있다. 코드량이 많아지면 변수가 값이 변하는 것인지 변하지 않는 것인지를 알기가 어렵다.
After : 변수 const / let 사용시
const, let은 var와 달리 블록단위입니다.
let : 변수 재선언 X 재할당 O
let name = '멍멍이'
console.log(name) // 멍멍이
let name = '냥냥이'
console.log(냥냥이)
// Uncaught SyntaxError: Identifier 'name' has already been declared
name = '리액트'
console.log(name) //리액트 const : 변수 재선언 X 재할당 X
const name = '멍멍이'
console.log(name) // 멍멍이
const name = '냥냥이'
console.log(name)
// Uncaught SyntaxError: Identifier 'name' has already been declared
name = '리액트'
console.log(name)
//Uncaught TypeError: Assignment to constant variable. 변수 선언에는 기본적으로 const를 사용하고, 재할당이 필요한 경우에 한정해 let 을 사용하는 것이 좋다.
새롭게 바꾼 코드에서는 변수만 봐도 나중에 바뀔 값인지 아닌지 구분하기 쉬워졌다.
- 재할당이 필요한 경우에 한정해 let 을 사용한다. 이때, 변수의 스코프는 최대한 좁게 만든다.
- 재할당이 필요 없는 상수와 객체에는 const 를 사용한다.
2. 구조 할당 (Destructuring Assignment)
배열이나 객체의 값을 원하는 개별 변수에 할당할 수 있다.
Before : 배열/객체 데이터를 가져오는 방법
// 배열
let array = ["멍멍이", "냥냥이"];
let name1 = array[0];
let name2 = array[1];
// 객체
const animal = { name: '멍멍이', color: 'white' };
const name = animal.name;
const color = animal.color; After : destructuring으로 배열/객체 데이터 가져오는 방법
// 배열
let [name1, name2] = ["멍멍이", "냥냥이"];
console.log(name1, name2); // 멍멍이, 냥냥이
// 객체
const animal = { name: '멍멍이', color: 'white' };
const { name, color } = animal; 변수를 한 번 더 선언했음에도 불구하고, 에러가 나오지 않고 각기 다른 값이 출력되는 것을 볼 수 있다. 코드량이 많아지면 변수가 값이 변하는 것인지 변하지 않는 것인지를 알기가 어렵다.
3. 스프레드 연산자 (Spread Operator)
원본 배열을 바꾸지 않고, 배열에서 대괄호 ([ ]) 를 벗기고 개별적 요소들을 가져오는 것.
const arr = [1, 2, 3, 4, 5];
console.log(arr); // [ 1, 2, 3, 4, 5 ]
console.log(...arr); // 1, 2, 3, 4, 5 Before : 배열 끼리 조합할 때 concat함수 사용
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
console.log(array1 .concat(array2 )); // [ 1, 2, 3, 4, 5, 6 ] After : 스프레드 연산자로 조합할 때
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const newArray = [...array1, ...array2];
console.log(newArray); // [ 1, 2, 3, 4, 5, 6 ] 4. 화살표 함수 (Arrow Function)
화살표 함수는 function 키워드 없이도 함수를 만들 수 있으며, return을 사용하지 않아도 식을 계산한 값이 자동으로 반환된다. () 안에 인자가 들어가고, => 오른쪽에는 무언가를 반환하는 식이다.
() => {} Before : 일반 함수로 표현할 때
// 일반 함수
const 함수 = function (x) {
return x*2;
}
// 콜백함수
const 함수 = arr.map(function(x) {
return x*2;
}) After : 화살표 함수로 표현할 때
// 일반 함수
const 함수 = (x) => x*2;
// 콜백함수
const 함수 = arr.map(x => x*2) 일반 함수보다 구문이 짧고, 읽고 쓰기가 쉽다. 한줄 코드인경우 return 구문없이 자동으로 반환된다.
5. Fetch / Promise /Async-await 세트
비동기적 동작을 다룰 때 사용할 수 있는 패턴이 3가지가 있다. 그 중에서 비동기 처리 패턴 중 가장 최근에 나온 문법 Async-await를 사용한다.
기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있게 도와준다.
[참고] (https://medium.com/@constell99/자바스크립트의-async-await-가-promises를-사라지게-만들-수-있는-6가지-이유-c5fe0add656c)- async 함수에는 await식이 포함된다. 이 식은 async 함수의 실행을 일시 중지하고, 전달 된 Promise의 해결을 기다린 다음, async 함수의 실행을 다시 시작하고 완료후 값을 반환한다.
await 키워드는 async 함수에서만 유효하다. async 함수의 본문 외부에서 사용하면 SyntaxError가 발생한다.
Before : 비동기처리 순차처리 오류 발생
const id = getId();
const info = getInfo(id);
isUser(info);
const msg = isUser? "맞음" : "아님";
console.log(msg) getId, getInfo, isUser 이 3가지 함수는 서버와 비동기 통신을 하고 있다. 이런 상황에서 위와 같은 처리를 한다면 id가 undefined 인 채로 다음코드가 실행될 것이고,
내부에서 id 를 사용해야 하는 함수는 오류가 발생할 것이며 info 가 undefined인 채로 진행되고… 오류가 발생한다.
After : Async-await 사용시
function getId() {
...
}
function getInfo(id) {
...
}
function isUser (info, id) {
...
}
async function execute() {
const id = await getId()
const info = await getInfo(id)
const result = await isUser(info)
console.log(result.msg)
}
execute() 보기에도 훨씬 간단하고 직관적인 코드가 된다. 또한 오류가 발생하지 않는다.
마치며
오늘은 ES6의 수많은 문법들 중에서 가장 자주 쓰인다고 생각하는 문법들에 대해 알아보았습니다.
ES6를 사용하여 코드가 보기 편하게 정리되는 것을 보면 기분이 좋아집니다.
감사합니다.
