- ES
ES는 ECMA(European Computer Manufacturer's Association) Script 의 약자이다.
ECMA는 정보통신 분야에서 국제적으로 통용되는 표준을 관장하는 기구로
ECMA Script 는 ECMA에서 만든 스크립트 언어의 표준이다.
다시 정리하자면 ES는 전세계 어디서나 통할 수 있도록 스크립트 언어의 규칙을 정한 표준이다.
Java Script는 ES를 기반으로 한 스크립트 언어의 한 종류이다.
웹브라우저의 동적인 영역을 구성하기 위한 언어로
다양한 브라우저에서 Java Script가 잘 작동되도록 표준 규격이 필요했고 그 규격이 ECMA Script이다.
비유하자면 ECMA Script는 스크립트언어의 규칙을 지정한 설명서이며,
JavaScript ES6 : ES 버전6를 바탕으로 한 JavaScript 라는 뜻이다.
*스크립트 언어 : 컴퓨터는 0, 1 만으로 이루어진 기계어만 알아들을 수 있다.
기계어도 프로그래밍 언어라고 할 수 있지만, 사람이 알아듣기에는 너무 복잡하기 때문에
프로그래밍 작업을 위해서 사람이 알아들을 수 있는 언어를 사용한다.
그 중 한 종류가 스크립트 언어이다.
( 컴파일언어, 인터프리터언어, 스크립트언어.. 종류가 무척 다양했지만 아직 구분하기 어렵다.)
이러한 사람의 언어에 가까운 언어로 작성된 코드는 일종의 번역 과정을 거쳐 기계어로 컴퓨터에 전달된다.
- ES5 / ES6
ES5는 2009년, ES6는 2015년에 출시된 ES의 버전이다.
새로운 버전이 나온 만큼 기존의 기능이 개선되고 새로운 기능이 나왔는데
나는 애초에 ES6가 출시된 후 로도 한참 뒤에 프로그래밍 공부를 시작했기 때문에
내가 많이 접했던 문법을 위주로 ES5 => ES6의 변화된 부분을 확인해봤다.
- let, const
구글링을 해보면 오래된 문서들은 보통 var, 최근글에는 let, const가 많다.
let과 const로 변수를 선언한 코드였는데 ES6에서 처음 추가된 키워드였다.
let과 const가 등장한 후 이전에 사용되었던 var는 이제 쓰이지 않는다.
기본적으로 const를 사용하는 것이 변수의 안정성을 높일 수 있고
let은 재할당이 필요한 경우에 한해 부분적으로 사용하는 것이 좋다고 한다.
var :
- function scope로 함수 내에서 선언하면 해당 함수 내에서는 어디서든 참조할 수 있다.
- 값을 재할당할 수 있으며, 1 특성과 맞물려 어디서든 값이 재할당된다. ( var a = 3 을 선언한 뒤 a = 5가 가능하다. )
- 2와 마찬가지로 어디서든 재선언할 수 있다. ( var a = 3 을 선언한 뒤 var a = 5가 가능하다. )
- 호이스팅이 발생한다.
*호이스팅: 선언하기 전인 변수를 참조하면 에러가 아닌 undifined가 발생한다.
즉, 아래에서 선언된 변수가 선언 전부터 마치 변수는 선언했으나 할당되지 않은 값처럼 인식한다.
let, const :
- Block scope 이다. 스코프를 작게 가져가 해당 블록에서만 참조가 가능하며
변수를 참조하는 과정에서의 검색, 메모리를 차지하는 측면에서도 유리하다고 한다. - let은 제한적으로 선언된 block안에서 재할당이 가능하다. const는 불가능하다.
- 재선언 할 수 없다. 한 번 선언한 let a , const a 는 다시 선언할 수 없다.
- let은 호이스팅이 발생하지만, 1과 맞물려 block내에서 지역변수 let이 선언되기 전에는
ReferenseError 가 발생한다. ( 일시적 사각지대 : block 시작 지점 ~ let 선언 전 까지의 구간 )
const는 한 번 선언한 후 어디서도 재선언할 수 없기 때문에 해당사항이 없다.
참고: var와 let, const의 차이 https://poiemaweb.com/es6-block-scope
참고: 호이스팅에 관한 자세한 설명 https://hbsowo58.tistory.com/411
- Template literal
처음 템플릿 리터럴을 사용하면서 '정말 편한데 왜 항상 쓰지는 않는 걸까?' 라는 생각이 들었는데
이 또한 ES6에 처음 추가된 기능이라고 한다.
(백틱)안에 문자열과 ${변수}를 함께 적을 수 있으며,
별도의 '' 표시 없이 띄어쓰기가 가능하고,
문자열이 길어도 ＼n 없이 줄바꿈이 가능하다.
- Arrow function
아직 쓰는 방법이 익숙하지 않은 화살표 함수이다.
함수를 간결하게 나타내 가독성이 좋아지고, 이후의 유지 보수 측면에서도 좋다고 한다.
- 매개변수가 하나일 경우 ( ) 를 생략할 수 있다. 없거나 두 개 이상인 경우 표기해야 한다.
- 한 줄의 코드를 바로 반환할 때 { } 와 return도 생략할 수 있다. 단 객체 리터럴을 반환하는 경우에는 생략할 수 없다.
- 실행 컨텍스트 생성 시 this 바인딩을 하지 않는다.
- this 와 class
객체(object)는 어떤 것(물질, 사물, 추상적인 것 뭐든 상관없다.)의 속성을 나열해 다른 것들과 구분한 결과물이다.
서로 연관된 변수와 메소드의 집합이 객체인데, 변수와 메소드를 집합할 때 class 키워드를 사용한다.
일반적인 객체지향언어가 class기반인데 반해 JS는 prototype 기반의 언어라고 한다.
es6에서는 클래스 기반의 언어와 유사한 class 키워드가 새로 도입되었다.
*객체지향: 서로 관련이 있는 메소드와 변수를 그룹화해서 객체를 만들고, 객체를 필요한 상황에 꺼내 쓰는 것이 객체지향이다.
객체를 만들기 위해 사용되는 것이 class 키워드로 객체의 속성(property)과 메소드를 정의할 수 있다.
1. constructor(생성자) : 생성할 객체의 property를 정의한다. 이를 초기화한다고 한다.
2. method: 해당 객체에서 사용할 수 있는 함수이다.
class 키워드로 객체의 틀을 정의하고 나면, 틀을 사용해 새 객체를 만들 수 있다.
이 때 그 틀의 property와 method는 틀을 사용해 만든 객체에 모두 상속된다.
- Promise 도입
기존의 비동기 처리를 위한 콜백 함수는 콜백 헬과 에러 처리의 어려움이라는 두 가지 큰 단점이 있다.
promise는 ES6에서 추가된 표준 빌트인 객체로 promise 생성자 함수로 호출된 비동기 함수의 결과로 반환하는 객체이다.
Promise 생성자 함수는 비동기 처리를 수행하는 콜백 함수를 인수로 받으며,
콜백 함수는 resolve, reject 함수를 인수로 받는다.
비동기 처리가 성공하면 resolve함수를 반환하며, 실패하면 reject함수를 반환한다.
- 비구조화 할당
객체 내 속성 또는 값을 해체해 각각 변수에 담아 사용하는 비구조화 할당의 표현을 사용할 수 있다.
코드가 간결하고 직관적이다.
-
스프레드 연산자
객체 또는 배열의 값을 다른 객체 또는 배열에 옮길 때 용이하게 사용할 수 있다. -
기본 매개변수
매개변수의 default 값을 설정해, 인수가 할당되지 않은 매개변수의 값을 지정할 수 있다.
