Java Script ES5,6 차이

(노션에 있던 WIL을 가져오는중 입니다.)

Java Script의 ES란?

ES는 ECMASCRIPT의 약어를 뜻 하고 자바스크립트의 표준,규격을 나타내는 용어이다.

뒤에 숫자가 붙는건 버전을 뜻하는데 ES5(2009년)와 ES6(2015년) 사이에 시간 차이가 있는데

전 ES5에 많은 기능들이 추가 되어 ES6라는 이름으로 새로 나왔다

ES6는 이후에는 매년 업데이트가 되고 있다

ES6+(ES6 이후, 모던 자바스크립트라고 불린다)도 있다.

---

ES5기능과 ES6에 추가된 기능 차이점

• let, const 변수 키워드
  기존의 var 키워드는 함수 레벨 스코프를 가지며 암묵적 재할당이 가능 하였는데
  이것의 단점을 보완하기 위해 블록 레벨 스코프를 가지며 재할당이 가능한 let,const라는 키워드가 추가 되었다
  ※ 스코프(Scope)란?
  어떤 변수를 선언할때 그 변수를 사용할 수 있는 유효 범위를 스코프라고 부른다 변수에 접근할 수 있는 범위인것이다.
  
  • var: 함수 단위
  • let: block단위 (변수: let으로 선언한 변수는 값이 변할 수는 있다)
  • const: block단위 (상수: 한번 선언한 값은 바꿀 수 없다)
    
    ※예시 코드

function scope(){
	const a = 0;
	let b = 0;
	var c = 0;

	// {} 증괄호 안에 든 내용을 블럭이라고 표현한다.
	
	if(a === 0){
		const a = 1;
		let b = 1;
		var c = 1;
		console.log(a, b, c);
	} // 1 1 1
	console.log(a, b, c);
}// 0 0 1

	// var는 함수 단위라서 if문 밖에서 선언한 값이 변했고
	// let과 const로 선언한 겂은 if문 안쪽 내용이 바깥 내용에 영향을 끼치지 않는다

 

• 화살표 함수 (Arrow function)
  화살표 함수는 함수를 간결하게 나타낼 수 있다
  단, 화살표 함수에는 다른 함수와 다르게 사용 할 수 없는게 있다 ex) this함수
  
  ※예시 코드

// ES5 기존 함수
function Name(변수){
		객체
}
---------------------------------------
// ES6 화살표 함수
let do_something = (변수) => { 객체 }
// 화살표 함수는 return을 사용하지 않아도 되고
// 내장함수 map,filter등을 함계 사용이 가능하다
let arr2 = myArrary.map((item) => item);

 

• 템플릿 리터럴(Template Literals)
  전 ES5에는 문자열을 연결하기 위해 + 연산자를 사용했는데
  사용할 필요가 없어지고 템플릿 리터럴은 백틱(``)을 이용하여 문자열 내에 변수를 사용 할 수도 있다
  
  ※예시 코드

//ES5
function fun() {
		return '문자' + name + '연걸';
}console.log(fun('오잉'));
// 문자오잉연결

----------------------------

//ES6
const fun = (name) => {
	return `'문자${name}연결'`
}console,log(fun('오잉'));
// 문자오잉연결

• 프로미스(Promises)
  프로미스는 비동기 코드를 사용하는 방법이다 API데이터를 가져오거나 실행시 시간이 오래 걸리는 함수를 가져올때 사용 할 수 있다
  
  ※예시 코드

const fun = () =>{
	return new funPro((resolve,reject) => {
		resolve('새로운 프로미스 실행');
});
};

console.log(fun());
// funPro{<resolved>:'새로운 프로미스 실행'}

Promises는 2개의 매개 변수가 있다
resolves는 성공했을때 결과를 전달하는거고 reject는 실패했을때 에러를 전다하는 것이다

 

• Spread 연산자(문법)
  Spread는 어떤 객체 안에 있는 요소들을 객체 바깥으로 꺼내 준다
  
  ※예시 코드
  
  

et a1 = [1,2,3]

	let a2 = [3,4,5]

	let a3 = […a1,…a2]
	a3 = [1,2,3,4,5]
// ... <- 이 점 3개를 스프레드 문법이라고 부른다.
// 배열 안에 있는 항목들(요소들)을 전부 꺼내준다는 뜻이다.
// 즉 [...a1]은 a1에 있는 항목을 전부 꺼내 
// 새로운 배열([] => 이 껍데기가 새로운 배열을 뜻함)에 넣어주겠다는 뜻이다