ES6(ECMAScript6)란 ?
2009년에 ECMAScript 5(ES5 또는 ES2009) 버전을 발표했던 Ecma International은 2015에 ECMAScript 6 개정판을 발표하는데 이를 줄여서 ES6 라 부릅니다. 간혹 발표한 년도를 이용해 ES2015라 하기도 합니다. 변수를 var 에서 let, const 로 구분해 선언하고 함수 정의를 간결하게 할 수 잇는 화살표함수 등의 새로운 기능을 제공하였습니다.
ES6의 주요기능
• let & const 키워드
• 화살표 함수
• Map & Set 객체
• promise(프로미스)
• String 함수 (includes,startswith,endswith)
• Default Parameter
• Array 함수 (from,find,findIndex,keys)
• Math Methods (trunc,sign,cbrt,log2,log10)
• Object 함수 (entries)
Let & Const
es6 이전에는 전역범위와 함수범위 만 있었습니다.
es6에는 두가지 새 키워드인 let & const가 도입되었습니다.
let/const 변수의 경우 var 변수와 다르게 변수의 선언 단계와 초기화 단계 사이에 일시적 사각 지대(TDZ)가 존재하고, TDZ에서 관리 중일 때(let 변수의 선언 또는 const 변수의 선언 및 할당 코드가 나오기 전)에 사용하려 한다면 RferenceError를 발생 시킴
// 사용가능 result = volvo
alert(carName) ;
var carName = 'volvo';
// 사용 불가능 X
alert(carName) ;
const carName = 'volvo';
// 사용가능 result = 'volvo';
const carName = 'volvo';
alert(carName);이 두 키워드는 JavaScript에서 블록 범위를 제공합니다.
블록 내부에 선언된 변수는 블록 외부에서 엑세스 할 수 없습니다.
var x= 10;
{
let x = 2;
//result x = 2;
}
//result x = 10;JavaScript const 변수는 선언될 때 값을 할당해야 합니다.
Const 는 상수 값을 정의하는것이 아니라 값에 대한 상수 참조를 정의합니다.
// 선언 하면서 할당 O
const Pie = 3.14159265359;
// 선언 후 할당 X
const Pie ;
Pie = 3.14159265359** 이 때문에 다음 행위를 할 수 없습니다.
• 상수 값 재할당
• 상수 배열 재할당
• 상수 개체 재할당
const cars = ['bmw','volvo','benz'];
// 배열 재할당 x
cars = ['toyota','volvo','audi']
하지만 이것들은 가능합니다.
• 상수 배열의 요소 변경
• 상수 객체의 속성 변경
const cars = ['bmw','volvo','benz'];
// 요소 변경 가능
cars[0] = 'toyota';
// 추가 가능
cars.push('audi');
화살표 함수(Arrow Function)
화살표 함수 표현(Arrow Function Expression)은 정통적인 함수표현(function)의 간편한 대안입니다. 하지만 화살표 함수는 몇 가지 제한점이 있고 모든 상황에 사용할 수는 없습니다.
• this나 super에 대한 바인딩이 없고, methods로 사용될 수 없습니다.
• yield를 화살표 함수 내부에서 사용할 수 없습니다.
(generator로서 사용될 수 없음)
• function , return 키워드 및 중괄호는 필요하지 않습니다.
• 화살표 함수는 hoisting되지 않습니다.
//ES5
var x = function(x,y){
return x * y;
}
//ES6
const x = (x,y) => x * y;
//ES5
function good(v){
return 'good'+v;
}
console.log(good('day')); result = 'goodday'
//ES6
const good = (v) => `${v}day`
console.log(good('day')); result = 'goodday'인자가 없을시
const good = () => { }
인자가 하나일시 소괄호 생략 가능
const good = v =>{}
인자가 하나 이상일시 소괄호 생략 불가능
const good = (x,y,z) => x*y*z
함수 파라메터와 줄바꿈 불가능
const func = (a,b,c)
=> 1; • new,target 키워드가 없습니다.
• 생성자(Construtor)함수로 사용할 수 없습니다.
생성자로서 사용 불가능 new와 함께 사용하면 오류 발생
function User(name,age){
this.name = name;
this.age = age ;
}
let user1 = new User('tae',28);
console.log(user1) result = {name: 'tae', age: 28}
//화살표 함수
const User = (name,age) => {this.name = name; this.age = age }
let user1 = new User('tae',29);
Uncaught TypeError: User is not a constructor
Map & Set
Map객체는 key - value을 서로 연결(매핑)시켜 저장하며 저장된 순서대로 각 요소들을 반복적으로 접근할 수 있도록 한다.
모든값은 key 또는 value 으로 사용 할 수 있습니다.
Object와 Map의 비교
• Object는 key는 String이며, Map의 key는 모든 값을 가질 수 있다.
• Object는 크기를 수동으로 추적해야하지만, Map은 크기를 쉽게 얻을 수 있다.
• Map은 삽인된 순서대로 반복된다.
• 실행 시까지 key를 알수 없고, 모든 key가 동일한 type이며 모든 값들이 동일한 type일 경우에는 objects를 대신해서 map을 사용
• 각 개별 요소에 대해 적용해야 하는 로직이 있을 경우에는 objects를 사용
Map Method
• new Map()
• set()
• get()
• clear()
• delete()
• has()
• entries()
• keys()
• values()
• size
//new Map()
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
//set
fruits.set("orange",100)
//get result = 500
fruits.get("apples");
//size result = 3
fruits.size
//clear result = Map(0) {size:0}
fruits.clear();
//has result = true
fruits.has("apples") ;
//delete result = Map(2) {'bananas' => 300, 'oranges' => 200}
fruits.delete("apples");
//keys result = {"apples","bananas","oranges"}
fruits.keys();
//values result = {500,300,200}
fruits.values();
//entries result = MapIterator {"apples" => 500,"bananas" => 300,"oranges" => 200}
fruits.entries();
Set
Set 객체는 값 콜렉션으로, 삽입 순서대로 요소를 순회할 수 있습니다. 하나의 Set내 값은 한 번만 나타낼수 있습니다. Set내의 값은 유일해야 하기 때문에 값이 같은지 검사를 수행합니다.
Set Method
• new Set()
• add()
• delete()
• has()
• clear()
• keys()
• values()
• entries()
• size
//new Set()
const letters = new Set(["a","b","c"]);
//add() result = Set(4) {'a', 'b', 'c', 'd'}
letters.add('d');
//delete() result = Set(3) {'a', 'b', 'c'}
letters.delete('d');
//values() result = SetIterator {'a', 'b', 'c'}
letters.values();
//keys()
letters.keys() result = SetIterator {'a', 'b', 'c'}
//entries()
letters.entries() result = SetIterator {'a' => 'a', 'b' => 'b', 'c' => 'c'}
Promise
JavaScript Promise 객체에는 생성코드(producing code)와 소비코드(consuming code) 에 대한 호출이 모두 포함됩니다.
Promise.then() 은 성공을 위한 콜백과 실패를 위한 다른 두개의 인수를 취합니다
둘다 선택사항이므로 필요한것만에 대해서만 콜백을 추가할 수 있습니다.
let x = 0;
let testPromise = new Promise((resolve,reject)=>{
if(x==0){
resolve("Success");
}else{
reject("Error");
}
})
testPromise.then(
function(value){console.log(value);}
function(error){console.log(error)}
)STRING 함수
• String.includes()
• String.startsWith()
• String.endsWith()
let text = "Hello world , welcome to the universe.";
includes()
text.includes("world") // true
text.includes("abcd") // false
startsWith()
text.startsWith("Hello") // true
text.startsWith("world") // false
endsWith()
text.endsWith("universe.") // true
text.endsWith("Hello") // false
Array 함수
• Array.from()
• Array.keys()
• Array.find()
• Array.findIndex()
Array.from()
Array.from('ABCDEF') // ['A','B','C','D','E','F']
let Array = [4, 9, 16, 25, 29]
//Array.keys()
let key = Array.keys() ;
for (let i of key){
console.log(i);
} // result 1 2 3 4
//Array.find()
Array.find((value,index,array)=>{
return value > 18;
}) // result 25
//Array.findIndex
Array.findIndex((value,index,array)=>{
return value > 18 ;
}) // result 3Math 함수
• Math.trunc()
• Math.sign()
• Math.cbrt()
• MAth.log2()
• MAth.log10()
Math.trunc()
ex) Math.trunc(4.9) // 4
Math.trunc(4.1) // 4
Math.trunc(-4.2) // -4
Object 함수
• Object.entries()
참고자료
