ES6가 뭔가요??
EcmaScript6의 준말로 뒤의 숫자는 자바스크립트의 버전을 의미한다. 'Ecma'는 정보와 통신 시스템을 위한 국제적 표준화 기구인 'ECMA International'을 의미한다. 따라서 'EcmaScript' 는 ECMA-262 기술 규격에 정의된 표준화된 스크립트 프로그래밍 언어이다.
Destructuring
디스트럭처링(Destructuring)은 구조화된 배열이나 객체를 비구조화/파괴 하여 개별적인 변수에 할당하는 것이다. 구조 분해 할당이라고도 한다.
const player = {
name: 'Lebrone James',
club: 'LA Lakers',
address: {
city: 'Los Angeles'
}
};만약 위 코드에서 'city'라는 데이터에 접근하려면
player.address.city이렇게 긴 코드가 나오게 된다. 별로 안 길어 보일수도 있지만, 계속해서 이 데이터에 접근할 일이 있다고 하면 코드가 좀 어지러워진다.
바로 이럴때 구조 분해 할당을 사용하게 되면, 앞의 저런 접근용 코드는 다 지우고 city라는 변수만 뽑아 사용할 수 있게 된다. 위의 player 라는 변수에 구조 분해 할당을 시행하게 되면,
const {name, club, address: {city}} = player;이런 형태의 코드가 나온다. player내부의 name, club, address:city 프로퍼티들을 이름이 동일한 변수에 분해하여 할당시키는 것이다.
console.log(player.name, player.club, player.address.city);
console.log(name, club, city);위의 코드 둘다 'Lebrone James LA Lakers Los Angeles' 라는 값이 나오게 된다. 구조 분해 할당을 사용하기 전과 후의 코드 길이가 상당히 많이 줄었다.
객체에서의 구조 분해 할당은 거의 필수라고 볼 수 있다.
Template Literal
템플릿 리터럴은 일반 문자열과 비슷해 보이지만, ‘ 또는 “ 같은 따옴표 문자 대신 백틱(backtick) 문자 ` 를 사용한다.
ES6 템플릿 리터럴은 일반적인 문자열과 달리 여러 줄에 걸쳐 문자열을 작성할 수 있으며 템플릿 리터럴 내의 모든 공백은 있는 그대로 적용된다.
또한 템플릿 리터럴은 + 연산자를 사용하지 않아도 간단한 방법으로 새로운 문자열을 삽입할 수 있는 기능을 제공한다. 이를 문자열 인터폴레이션(String Interpolation)이라 한다.
const name1 = 'Choi';
const name2 = 'Lee';
console.log('My name is ' + name1 + ' ' + name2 + '.'); //My name is Choi Lee
console.log(`My name is ${name1} ${name2}.`); //My name is Choi Lee
문자열 인터폴레이션은 ${ … }으로 표현식을 감싼다. 문자열 인터폴레이션 내의 표현식은 문자열로 강제 타입 변환된다.
console.log(`1 + 1 = ${1 + 1}`); // "1 + 1 = 2"함수(function)
자바스크립트에서는 함수도 하나의 타입(datatype)입니다. 따라서 함수를 변수에 대입하거나, 함수에 프로퍼티를 지정하는 것도 가능합니다. 또한, 자바스크립트 함수는 다른 함수 내에 중첩되어 정의될 수도 있습니다.
함수의 정의
자바스크립트에서 함수의 정의는 function 키워드로 시작되며, 다음과 같은 구성요소를 가진다.
-
함수의 이름
-
괄호 안에 쉼표(,)로 구분되는 함수의 매개변수(parameter)
-
중괄호({})로 둘러싸인 자바스크립트 실행문
function addressMaker(city, state) { //Seoul, Korea
const newAddress = { city: city, state: state };
//newddress = {Seoul: "Seoul", Korea: "Korea"}
console.log(newAddress);
}위의 함수는 데이터를 받아 객체 형태로 만들어주는 함수이다.
함수의 형태
Arrow function
ES6문법에서는 function 키워드는 사용한 함수 선언 방법 외에도 '화살표 함수(Arrow function)'라는 선언방법을 지원한다. 아래는 위의 함수를 화살표 함수 형태로 구현한 코드이다.
const addressMaker = (city, state) => {
const newAddress = { city: city, state: state };
console.log(newAddress);
}Anonymous function
화살표 함수 외에도 '익명함수(Anonymous function)'를 지원한다. 익명함수는 함수명 대신 변수명에 함수 코드를 저장하는 구현 방식이다.
const addressMaker = function(city, state) {
const newAddress = { city: city, state: state };
console.log(newAddress);
}Class
자바스크립트에서 클래스는 함수의 한 종류이다.
//클래스 선언 파일
export class Animal {
constructor(type, legs) {
this.type = type;
this.legs = legs;
}
makeNoise(sound = "Loud Noise") {
console.log(sound);
}
get metaData() {
return `Type: ${this.type}, Legs: ${this.legs}`;
}
static return10() {
return 10;
}
}
export class Cat extends Animal {
makeNoise(sound = "meow") {
console.log(sound);
}
}
//다른 파일
import { Animal, Cat } from "./aniaml";
console.log(Animal.return10());
const cat = new Cat("feline", 4);
cat.makeNoise();