JavaScript ES6
JavaScript의 주요 업데이트인 ECMAScript 2015(ES6)는 다양한 새로운 기능과 개선 사항을 도입했다.
1. let과 const
let은 블록 스코프 변수를 선언하는 데 사용되며, const는 읽기 전용 상수를 선언하는 데 사용된다.
let x = 10;
if (x === 10) {
let x = 20; // 다른 범위
console.log(x); // 20
}
console.log(x); // 10
const PI = 3.14;
console.log(PI);2. 화살표 함수(Arrow Functions)
화살표 함수는 간결한 문법을 제공하며, 자신의 this, arguments, super 또는 new.target을 바인딩하지 않는다.
const arr = [1, 2, 3, 4];
const squares = arr.map(x => x * x);
console.log(squares); // [1, 4, 9, 16]3. 클래스(Class)
프로토타입 기반 상속에 대한 문법적인 sugar coating일뿐이지만 객체 지향 패턴을 좀 더 쉽게 구현할 수 있게 해준다.
* sugar coating (프로그래밍에서 복잡한 코드나 로직을 간결하고 읽기 쉬운 형태로 변환하는 것, 원래의 코드나 개념이 제공하는 기능은 그대로 유지하면서도 사용자가 더 쉽게 이해하고 사용할 수 있도록 만드는 것)
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(this.name + ' makes a noise.');
}
}
class Dog extends Animal {
speak() {
console.log(this.name + ' barks.');
}
}
var dog = new Dog('Rex');
dog.speak(); // Rex barks.4. 모듈(Module)
ES6에서는 코드를 모듈로 나눌 수 있는 공식적인 방법이 도입되었다.
// lib/math.js
export function sum(x, y) { return x + y; }
export var pi = 3.141593;
// app.js
import * as math from "lib/math";
console.log("2π = " + math.sum(math.pi, math.pi));5. Promise와 async/await
비동기 처리를 위한 Promise 객체가 도입되었다. async/await 구문도 후속 버전에서 추가되어 Promise를 보다 쉽게 다룰 수 있게 되었다.
let promiseToCleanTheRoom = new Promise(function(resolve, reject){
let isCleaned = true;
if(isCleaned){
resolve('clean');
} else{
reject('not clean');
}
});
promiseToCleanTheRoom.then(function(fromResolve){
console.log('the room is ' + fromResolve);
}).catch(function(fromReject){
console.error('the room is ' + fromReject);
});
// Async/Await example
async function asyncFunc() {
const resultValue= await promiseToCleanTheRoom;
}
asyncFunc();6. 구조분해할당(Destructuring)
배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있는 표현식이다.
let [a,,b] = [1,2,3];
console.log(a); // "1"
console.log(b); // "3"
let { foo: baz }= { foo: 'aaa', bar: 'bbb' };
console.log(baz); //"aaa"7. 스프레드 연산자(Spread Operator)와 Rest Parameter
스프레드 연산자(...)를 이용해 배열이나 문자열 같은 형태의 데이터를 요소별로 분리할 수 있으며, Rest Parameter도 이와 비슷한 방식으로 작동한다.
function sum(x,y,z) { return x+y+z;}
var numbers=[1,2,3];
console.log(sum(...numbers));
function myFunction(name,...params) {
console.log(name,params);
}
myFunction("John", "welcome", "to", "earth"); //"John" ["welcome","to","earth"]8. 기본 매개변수(Default Parameters)
함수 매개변수에 기본값 설정이 가능해졌다.
function multiply(a,b=1)
{
return a*b;
}
console.log(multiply(5,2)); // 10
console.log(multiply(5)); // 59. Template Literals
문자열 내부에 변수나 표현식을 직접 삽입할 수 있는 리터럴이다. ${} 형태
let name = "John";
console.log(`Hello, ${name}!`); // Hello, John!10. Symbol Type
심볼 타입은 프로그램 내에서 유일한 값으로서 주로 객체 속성의 key 값으로 사용된다.
let sym1 = Symbol();
let sym2 = Symbol("symbol2");
console.log(sym1); // Symbol()
console.log(sym2); // Symbol(symbol2)이외에도 ES6는 많은 개선사항과 새로운 기능들을 포함하고 있다.
JavaScript ES6의 장점
- 코드의 간결성: 화살표 함수, 템플릿 리터럴, 디스트럭처링 등의 기능을 사용하면 코드가 더욱 간결해지고 읽기 쉬워진다.
- 비동기 처리의 편리성: Promise와 async/await를 사용하면 비동기 코드를 동기적인 방식으로 작성할 수 있어 로직이 복잡해지는 것을 방지할 수 있다.
- 모듈화: ES6 모듈 시스템을 이용하면 코드를 모듈로 분리하여 관리할 수 있어, 대규모 애플리케이션에서 코드 구조화에 도움이 된다.
- 변수 스코핑 개선: let과 const는 블록 레벨 스코핑을 지원하여 변수 호이스팅 문제를 완화시킨다.
- 객체 지향 프로그래밍 용이성: 클래스와 상속 구문 등으로 객체 지향 프로그래밍(OOP)가 보다 쉬워진다.
- 더 나은 데이터 조작: 스프레드 연산자와 디스트럭처링을 통해 배열과 객체 데이터를 보다 효율적으로 조작할 수 있다.
- 기본 매개변수(Default Parameters): 함수에 기본값 설정이 가능해져서 매개변수 값 전달에 대한 유연성이 증가한다.
- 새로운 데이터 타입과 자료구조 : Map, Set, Symbol 같은 새로운 데이터 타입 및 자료구조들도 추가되었다.
- 확장된 내장 메서드 및 기능 : Array.includes(), Object.assign() 등과 같은 다양한 내장 메서드와 String.repeat(), Number.isInteger() 등의 추가된 기능들로 인해 보다 다양한 작업을 간단하게 처리할 수 있게 되었다.
따라서 ES6는 JavaScript 언어 자체의 단점들을 해결하는데 중요한 역할을 하며, 보다 나은 개발 생산성 향상을 제공해준다.
