이번주 키워드는 1.JavaScript의 ES란? 2.ES5/ES6 문법 차이이다 하나씩 알아보자
1.JavaScript의 ES란?
결론 부터 말하면 ES는 자바스크립트 표준 규격이라고 할 수 있다.또한 ECMA에서는 자바스크립트의 표준만 내리는 게 아니라 다른 표준안도 정하기 때문에 그와 구분하기 위해 숫자를 붙였는데 262다.
1.ES5/ES6문법 차이
2009년에 업데이트된 ES5 2015년에 업데이트된 ES6 사이에서 큰 변화가 있었고 그 이후 버전들은 ESNext라 칭한다. 이제 시장에서는 ES6이상을 원하지만 이전에 남겨진 코드들을 이해하려면 그 전 버전 역시 어느정도 알고 있어야 한다.1. let, const
기존의 var 키워드는 함수 레벨 스코프를 가지며 암묵적 재할당이 가능했었다.
하지만 let은 동일한 이름으로 선언될 수 없으며 재할당은 가능하다. const는 한번 초기화된 변수해 재할당, 재선언 모두 불가능하다 그리고 이 둘(let,const)은 블록 레벨 스코프를 가져 외부에서 참조할 수 없다. 또한 var와 달리 TBZ의 제약을 받아 변수 초기화 전에 엑세스 하려고 하면 오류를 뱉는다
2. 화살표 ( => )함수
기존 함수를 표현하는 방법은 함수 선언문과 함수 표현식이 있다
// 함수 선언
function foo() { }
// 함수 표현식
const foo = function() { } // 익명함수를 변수에 할당이 둘의 다른 점은 함수 선언은 호이스팅의 영향을 받으며 함수 표현식은 호이스팅 되지 않는다 즉 함수 표현식을 한언하기 전에는 함수를 호출할 수 없다
const func1 = () => { }; // 화살표 함수화살표 함수는 function키워드를 생략할 수 있으며 만약 파라미터가 하나라면 괄호()를 생략할 수 있다 또 함수 내에 표현식이 하나라면 중괄호와 rutrun을 생략할 수 있다
3. Template literals
기존에는 표현식 사이에 문자열을 넣을 때 "저는 " + (a + b) + "살이고 " + c + "이런식으로 표현했다 ES6이후 부터는 백틱()을 이용하여 저는 ${a+b}살이고 ${c}를 좋아합니다.`;이렇게 표현식과 텍스르를 함께 리턴할 수 있다.
4. 클래스
ES6이전에는 없던 문법으로 이전 Class의 개념이 없었을 때 Class의 형태를 구현하려면 prototype을 이용해 구현했어야 했다 같은 객체 생성자 함수를 사용하는 경우, 특정 함수 또는 값을 재사용 할 수 있는데 바로 프로토타입이라고 한다
//prototype
function Dog(name) {
this.name = name;
}
Dog.prototype.say = function(){
console.log('귀여운 '+ this.name )
}
var dog = new Dog('푸들');
dog.say() // 결과 : 귀여운 푸들
//Class
class Dog {
constructor(name){
this.name = name;
}
say(){ c
onsole.log('귀여운 '+ this.name )
}
}
const dog = new Dog('푸들'); dog.say() // 결과 : 귀여운 푸들
5. this
ES6에서의 this 는 자신을 둘러싸고 있는 this를 바라보기 때문에 따로 바인딩이나 변수에 담을 필요가 없고 화살표 함수를 사용하면 선언된 스코프에 자동 바인딩된다
6. 모듈
기존에는 name-space 방식 또는 requrejs 같은 라이브러리로 글로벌 레벨 스코프의 변수 오염을 보완했었다 ES6이후에는 import, export를 사용하여 하나의 함수 또는 변수를 관리함으로 다른 파일에서도 이를 활용할 수 있다
7. 객체 비구조화 할당(객체 구조 분해)
비구조화 할당 문법을 사용하면 객체 안에 있는 값을 추출해서 변수 혹은 상수로 바로 선언해줄 수 있고 함수의 파라미터에서도 가능하다
벨로퍼트님의 객체 자료
8. string메서드 추가
includes() : 괄호안의 내용이 포함 되어있다면 true를 없다면 false를 리턴함
startsWith() : 괄호안의 내용으로 시작된다면 true를 아니라면 false를 리턴함
endsWith() : 괄호안의 내용으로 끝난다면 true를 아니라면 false를 리턴함
9. Spread연산자(...)
연산자의 대상 배열 또는 이터러블을 개별요소로 분리한다
10. rest파라미터
Spread연산자(...)를 이용하여 함수의 파라미터를 작성한 형태로 Spread연산자를 이용하면 파라미터로 오는 값을 배열로 전달받을 수 있다
더 많은 차이가 있고 이후에 하나씩 추가하고 수정해 나갈 예정이다 : ]
