🪴 ES6 란?
ECMAScript 2015로도 알려져 있는 ECMAScript 6는 ECMAScript 표준의 가장 최신 버전이다.
ES6의 새로운 기능들
- const and let
- Arrow functions(화살표 함수)
- Template Literals(템플릿 리터럴)
- Default parameters(기본 매개 변수)
- Array and object destructing(배열 및 객체 비구조화)
- Import and export(가져오기 및 내보내기)
- Promises(프로미스)
- Rest parameter and Spread operator(나머지 매개 변수 및 확산 연산자)
- Classes(클래스)
🪴 문법 정리
const and let
const 는 변경 불가능한 변수이다.
// ES5
var MyBtn = document.getElementById('mybtn');
// ES6
const MyBtn = document.getElementById('mybtn');let 은 변경 가능한 변수이다.
let name = '철수';
name = '영희';let 과 const 는 동일하게 모두 블럭 범위이다.
Arrow functions(화살표 함수)
// ES5
function myFunc(name) {
return '안녕' + name;
}
// ES6
const myFunc = (name) => {
return `안녕 ${name}`;
}
// return 생략 가능
const myFunc = (name) => `안녕 ${name}`;화살표 함수를 map 과 filter , reduce 등 내장 함수와 함께 사용할 수 있다.
// ES5
const myArrary = ['진수', '영철', '영희', 5];
let arr1 = myArrary.map(function(item) {
return item;
});
// ES6
let arr2 = myArrary.map((item) => item);Template Literals(템플릿 리터럴)
백틱을 사용하여 문자열 내에서 변수를 사용할 수 있다.
// ES5
var infromation = '안녕' + name + '너의 나이는' + age + '살 이다!';
// ES6
const infromation = `안녕 ${name}, 너의 나이는 ${age}살 이다!`;Default parameters(기본 매개 변수)
매개 변수를 기본값에 정의하여 매개 변수를 쓰지 않은 경우에도 정의되지 않은 오류가 반환되지 않는다.
const myFunc = (name, age = 22) => {
return `안녕 ${name} 너의 나이는 ${age}살 이니?`;
};
// 안녕 영희 너의 나이는 22살 이니?Array and object destructing (배열 및 객체 비구조화)
비구조화를 통해 배열 또는 객체의 값을 새 변수에 더 쉽게 할당할 수 있다.
const contacts = {
famillyName: '이',
name: '영희',
age: 22
};
// ES5
let famillyName = contacts.famillyName;
let name = contacts.name;
let myAge = contacts.age;
/// ES6
let { famillyName, name, age } = contacts;속성 이름과 동일하지 않은 변수를 할당하면 undefined가 반환된다.
변수의 이름을 바꾸려면 콜론 을 대신 사용할 수 있다.
let { famillyName, name: ontherName, age } = contacts;배열의 경우,,
const arr = ['광희', '지수', '영철', 20];
let [value1, value2, value3] = arr;Import and export (가져오기 및 내보내기)
JavaScript 응용프로그램에서 import 및 export를 사용하면 성능이 향상됩니다. 이를 통해 별도의 재사용 가능한 구성요소를 작성할 수 있다.
// detail.js
export default function detail(name, age) {
return `안녕 ${name}, 너의 나이는 ${age}살 이다!`;
}// home.js
import { detail, userProfile, getPosts } from './detailComponent';
console.log(detail('영희', 20));둘 이상의 모듈을 가져오려면 중괄호 에 넣으면 된다.
Promises (프로미스)
Promise는 ES6의 새로운 특징이다. 비동기 코드를 쓰는 방법이다. 예를 들어 API에서 데이터를 가져오거나 실행하는데 시간이 걸리는 함수를 가지고 있을 때 사용할 수 있다.
const myPromise = () => {
return new Promise((resolve, reject) => {
resolve('안녕하세요 Promise가 성공적으로 실행했습니다');
});
};
cosole.log(myPromise());
// Promise {<resolved>: "안녕하세요 Promise가 성공적으로 실행했습니다"}참고 : fetch 함수는 Promise 자체를 반환한다.
const url = 'https://jsonplaceholder.typicode.com/posts';
const getData = (url) => {
return fetch(url);
};
getData(url).then(data => data.json()).then(result => console.log(result));Rest parameter and Spread operator (나머지 매개 변수 및 확산 연산자)
Rest parameter 는 배열의 인수를 가져오고 새 배열을 반환하는데 사용한다.
const arr = ['영희', 20, '열성적인 자바스크립트', '안녕', '지수', '어떻게 지내니?'];
// 비구조화를 이용한 값을 얻기
const [ val1, val2, val3, ...rest ] = arr;
const Func = (restOfArr) => {
return restOfArr.filter((item) => {return item}).join(" ");
};
console.log(Func(rest)); // 안녕 지수 어떻게 지내니?Spread operator 는 인수뿐만 아니라 배열 자체를 가진다. for 반복문이나 다른 메서드를 사용하는 대신 Spread operator를 사용하여 배열의 값을 가져올 수 있다.
const arr = ['영희', 20, '열성적인 자바스크립트', '안녕', '지수', '어떻게 지내니?'];
const Func = (...anArray) => {
return anArray;
};
console.log(Func(arr));
// 출력 => ["영희", 20, "열성적인 자바스크립트", "안녕", "지수", "어떻게 지내니?"]Classes (클래스)
class를 만들려면 class 키워드 뒤에 두 개의 중괄호가 있는 class 이름을 사용한다.
class myClass {
constructor() {
}
}이제 new 키워드를 사용하여 class 메서드와 속성에 액세스할 수 있다.
class myClass {
constructor(name, age) {
this.name = name;
this.age = age;
}
}
const user = new myClass('영희', 22);
console.log(user.name); // 영희
console.log(user.age); // 22다른 class에서 상속하려면 extends 키워드 다음에 상속할 class의 이름을 사용한다.
class myClass {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHello() {
console.log(`안녕 ${this.name} 너의 나이는 ${this.age}살이다`);
}
}
// myClass 메서드 및 속성 상속
class UserProfile extends myClass {
userName() {
console.log(this.name);
}
}
const profile = new UserProfile('영희', 22);
profile.sayHello(); // 안녕 영희 너의 나이는 22살이다.
profile.userName(); // 영희