ES6
자바스크립트를 표준화하기 위해 만들어진 스크립트 프로그래밍 언어
1. let, const, var
기존 변수 선언 방식
var 재정의 가능하고 재선언도 가능하다. 단점은 코드 관리 측면에서 let에 비해 부적합함.
ES6 변수 선언 방식
let 가변변수로 재정의가 가능하지만 재선언은 불가능
const 불변변수로 재선언과 재정의 모두 불가능합니다.
var x = 2
let y = 2;
const z = 2;
// 재정의
x = 4; // posible
y = 4; // posible
z = 4; // error
// 재선언
var x = 3 // posible
let y = 3; // error
const z = 3; // error
document.write(x);
document.write(y);
document.write(z);
2. 모듈화 Import - Export
모듈
프로젝트 규모가 커질수록 관리하기 편하게 모듈화 한다.
여러 기능들에 관한 코드가 모여있는 하나의 파일로 다음과 같은 것들을 위해 사용한다.
모듈화의 장점
- 유지보수성: 모듈화되면 의존성이 줄어들어, 개선하거나 수정할 때 편하다.
- 네임스페이스화: 전역변수가 저장된 전역공간과 분리되어 저장됨.
- 재사용성: 똑같은 코드를 반복하지 않고 모듈을 불러다 사용할 수 있다.
모듈화 적용하기
moduleA.js : default export 사용해서 내보낸 모듈A
const A = () => {};
export default A;
moduleB.js : named export로 내보낸 모듈B는 사용할 때 중괄호 { }로 불러야 함.
export const B = () => {};
index.js
import A from 'moduleA';
import { B } from 'moduleB';
3. 템플릿 리터럴
Template literals
템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴로 런타임 시점에 일반 자바스크립트 문자열로 처리/변환된다.
표현식/문자열 삽입, 여러 줄 문자열, 문자열 형식화, 문자열 태깅 등 다양한 기능을 제공
프론트엔드에서는 HTML을 데이터와 결합해서 DOM을 다시 그려야 하는 일이 빈번하기 때문에, 템플릿을 좀 더 쉽게 편집하고 작성해야 할 필요성으로 등장하였다.
기존 문자열 사용 방식
+ 기호 사용
ES6 문자열 사용 방식
템플릿 리터럴은 작은따옴표(')나 큰따옴표(") 대신 백틱(`)(grave accent)로 감싸준다.
$와 중괄호{}를 사용하여 표현식을 표기할 수 있다.
var variable = "변수";
console.log(`이건 ${variable}입니다.`);
* enter 줄바꿈 인식함.
* escapte문자 (/) 필요없음.
4. 화살표 함수
기존 함수 선언 방식
function 함수 명(인자) {
// 코드 선언
}
ES6 함수 선언 방식
(1) 화살표 함수(arrow function)
함수 표현식(ES5)보다 단순하고 간결한 문법으로 함수를 만들 수 있는 방법
// ES5
var pow = function (x) { return x * x; };
// ES6
const pow = x => x * x;
화살표 함수 선언 방식
() => { ... } // 매개변수가 없을 경우
x => { ... } // 매개변수가 한 개인 경우, 소괄호를 생략할 수 있다.
(x, y) => { ... } // 매개변수가 여러 개인 경우, 소괄호를 생략할 수 없다.
참고 링크
this
(1) 기존 일반 함수(ES5) 내에서의 this
일반 함수(ES5)로 정의한 함수 내에서 this는 전역객체를 가리킨다.
아래 코드에서 this.title을 출력하면 window를 this로 참조하기 때문에 group의 title을 못가져 온다.
let group = {
title: "1모둠",
students: ["보라", "호진", "지민"],
showList() {
this.students.forEach( // this === group
function(student) { alert(this.title + ': ' + student) } // this ==== window
);
}
};
group.showList();
// undefined : 보라
// undefined : 호진
// undefined : 지민
(2) 화살표 함수(ES6) 내에서의 this
화살표 함수로 정의된 스코프 내에는 this가 존재하지 않는다.
따라서 this로 접근하면 상위 스코프를 가리킨다.
아래 코드에서 this.title을 출력하면 상위 this(여기선 group)를 참조하기 때문에 group의 title을 가져올 수 있게 된다.
/* 화살표 함수로 쓸 경우 */
/* 화살표 함수의 this는 상위의 this를 그대로 가져온다. */
let group = {
title: "1모둠",
students: ["보라", "호진", "지민"],
showList() {
this.students.forEach( // this === group
student => alert(this.title + ': ' + student) // this === group
);
}
};
group.showList();
// 1모둠 : 보라
// 1모둠 : 호진
// 1모둠 : 지민
참고링크
5. 클래스
기존 클래스 선언 방식: function
class가 없을 땐 function 키워드와 prototype 속성을 이용해 클래스를 구현해야 했다.
function Model(name, age) {
this.name = name
this.age = age
}
// class가 없을 땐 prototype으로 클래스를 구현해야 했다.
Model.prototype.getInfo = function() {
console.log(this.name, this.age)
}
// 선언은 new로
var model = new Model('elice', 5)
model.getInfo()
ES6 클래스 선언 방식: class
Class
Class 등장 이후, 프로토타입 없이도 클래스 내부에 변수 뿐만 아니라 함수도 선언 가능해졌다.
아래 코드는 Model이라는 클래스를 생성하고, 생성자(Constructor)로 정의한다.
또한 클래스 내에 정의한 메서드 getInfo()는 프로토타입에 저장된다.
// class 내부에 변수 뿐만 아니라 함수도 선언 가능해졌다.
class Model {
constructor(namem age) {
this.name = name;
this.age = age;
}
getInfo() {
console.log(this.name, this.age);
}
}
// 선언은 new로
const model = new Model('elice', 5);
model.getInfo();
참고 링크
6. forEach ( )
forEach ( 함수 )
반복작업을 가능하게 한다.
즉, 배열 요소 각각에 대해 함수를 반복실행할 수 있다.
기존 for 반복문
var fruits = ["apple", "orange", "cherry"];
function myFunction(item, index) {
document.write(index + ":" + item + "<br>");
}
for (i = 0; i < 3; i++) {
document.write(i);
document.write(":" + fruits[i] + "<br>");
}
// 출력
// 0:apple
// 1:orange
// 2:cherry
arr.forEach(function() { }) 사용
var fruits = ["apple", "orange", "cherry"];
function myFunction(item, index) {
document.write(index + ":" + item + "<br>");
}
fruits.forEach( function (item, index) {
myFunction(item, index)
})
arr.forEach(화살표 함수) 사용
var fruits = ["apple", "orange", "cherry"];
function myFunction(item, index) {
document.write(index + ":" + item + "<br>");
}
fruits.forEach((item, idx) => {
myFunction(item, idx)
})
7. map( )
map( )
배열을 변형하거나 재정렬하는 메서드
Object.map(함수)
var persons = [
{ firstname: 'Malcom', lastname: 'Reynolds' },
{ firstname: 'Kaylee', lastname: 'Frye' },
{ firstname: 'Jayne', lastname: 'Cobb' },
];
function getFullName(item) {
var fullname = item.firstname + ' ' + item.lastname + '<br>';
document.write(fullname);
}
persons.map(getFullName);
// 출력
// Malcom Reynolds
// Kaylee Frye
// Jayne Cobb
Array.map(함수)
var numbers = [4, 9, 16, 25];
var x = numbers.map(Math.sqrt);
document.write(x);
// 출력
// 2,3,4,5
8. reduce ( )
reduce
forEach 처럼 반복작업을 한다는 점은 비슷하나, 배열을 기반으로 값 하나를 도출할 때 사용한다.
map은 각각의 요소를 변형시킨다면, reduce는 배열 자체를 변형시킨다.
Array. reduce(누적값, 현잿값, 인덱스, 요소) => { return 결과 }, 초기값);
함수의 인자는 총 4개를 가진다.
1. 누산기(Accumulator)
2. 현재값(Current)
3. 현재 인덱스(Index)
4. 원본배열(Source)
var numbers = [175, 50, 25];
document.write(numbers.reduce(myFunc));
function myFunc(total, num, index, arr) {
document.write(total+"<br>")
document.write(num+"<br>")
document.write(index+"<br>")
document.write(arr+"<br>")
document.write("<br>")
return total - num;
}
// 출력
// 175
// 50
// 1
// 175,50,25
// 125
// 25
// 2
// 175,50,25
// 100
9. destructing
객체 내 변수를 쉽게 꺼내는 방법
기존
// 객체의 경우
var obj = {name: 'elice', age:5};
var name = obj.name;
var age = obj.age;
//배열의 경우
var arr = ['some', 'values'];
var first = arr[0];
var second = arr[1];
ES6
// 객체일 때
const obj = {name: 'elice', age: 5};
const {name, age} = obj;
const {name:n1, age:a1} = obj; // 이름 바꿔서 선언하고자 할 때
// 변수일 때
const arr = ['some', 'values'];
const [first, second] = arr;
