ES6의 특징

TEDDY·2022년 11월 15일
0

CODECAMP

목록 보기
11/53
post-thumbnail
post-custom-banner

ES6

:ES란, ECMAScript의 약자이며 자바스크립트의 표준, 규격을 나타내는 용어이다.그리고 뒤에 숫자는 버젼을 의미한다. 그냥 쉽게 전체다 버젼이라고 생각하면 될 것 같다.

이전 버젼인 es5은 2009년에 나왔고, es6는 2015년에 나왔으며, 몇가지 추가된 기능들이 있다.

1. 키워드 추가

원래 버젼에선 var 라는 재할당, 재선언이 가능 한 변수선언키워드 뿐이였지만,
지금은 재할당은 가능하지만 재선언은 불가능한 let과 재선언 재할당 둘다 불가능한 const 라는 상수키워드도 추가 되었다. 이로써 변수,상수키워드를 적재적소에 잘 사용해서 예측 불가능한 코드들을 줄일 수 있다.

2. 템플릿 리터럴

사용법은 백틱 으로 감싸주면되고, 중간에 $()으로 표현식이 가능하며, 전버젼보다 가독성이 좋고 코드작성에도 편리하다.


let str1 = 1
let str2 ="입니다."
let str3 = `당신의 순위는 ${str1}등 ${str2}`

console.log(str3)

이런식으로 사용이 가능하다.

3. 화살표 함수

함수 표현식을 화살표 함수로 표현할 수도 있다.
화살표 함수가 추가되어 함수를 간결하게 나타낼 수 있게 되어 가독성 및 유지 보수성이 올라갔다.
만약 함수의 본문(body)에 return만 있는 경우 화살표 함수는 return과 {}를 생략할 수 있다. 단, 같이 생략해야한다.
return문에서 소괄호는 사용가능하다.

const sumNum = (a, b) => {
  return a + b;
}

화살표함수는 이런식으로 작성이 가능하다.

4. 구조분해할당

구조화 되어 있는 배열, 객체와 같은 데이터를 분해(destructuring) 시켜, 각각 변수에 담는 것이다.

5. Promise

자바스크립트에서 비동기 처리를 기존에는 콜백 함수를 사용한, 콜백 패턴을 사용하였다.그러자 콜벡헬에 빠졌고, 이를 해결하기 위해 프로미스가 도입되었고, 프로미스 후속처리 메소드를 이용해 에러 처리를 효과적으로 할 수 있게 되었다.
1.fulfilled : 요청이 성공한 상태
2.pending : 요청에 대한 응답을 기다리고 있는 상태
3.rejected : 요청이 실패한 상태

6. Class

자바스크립트는 프로토타입 기반의 객체 지향 언어이다.
클래스 기반의 객체 지향 프로그래밍도 할 수 있게 Class 키워드를 도입하였다.
자바스크립트에서 클래스는 내부적으로 프로토타입을 이용해서 만들어졌다.
클래시는 사실 특별한 함수이다. 클래스는 호이스팅이 let, const 키워드 처럼 동작한다.

7. String Method (includes, startsWith, endsWith)

포함되어있는지(includes), 시작하는지(startsWith), 끝나는지(endsWith)
boolean 타입을 return 해준다.
const str = 'Hello World teddy';
str.includes("Wolrd"); // true
str.startsWith("Hello"); // true
str.endsWith("teddy"); // true

8. module

모듈이란, 재사용하기 위한 코드 조각을 뜻하며, 세부사항은 캡슐화 시키고, API 부분만 외부에 노출시킨 코드이다. type에 module을 추가시키고 확장자를 mjs로 변경하여 사용한다. 모듈은 모듈 스코프를 가지며, import와 export 키워드를 이용하여 사용한다.

이와 같은 많은 특징들이 있다. 열심히 익혀서 자유자재로 사용하는날이 왔으면 좋겠다.
𓂃𓂃𓂃𓊝𓄹𓄺𓂃𓂃𓂃
𓆉𓆝𓆟𓆟𓆞𓆡𓆜𓇼𓂂

post-custom-banner

0개의 댓글