ES6(ES2015) 에 관하여 알아보기

 

 

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 3

Math 함수

• 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
 
 

 

참고자료

•https://www.w3schools.com/js/js_versions.asp