📚 ES2015, ES2016
JavaScript는 브라우저 전용의 스크립트 언어이다. JavaScript도 프로그래밍 언어인 만큼 버전이 있고 매년 업그레이드 되고 있다. ECMA라는 단체에서 기존의 결점을 보완하여 표준 자바스크립트 버전을 매년 발표한다. 그 중 자바스크립트(ES5)에 비해 많이 달라진 ES2015와 상대적으로 큰 변화가 없는 ES2016에 대해 말해보려고 한다.
✏ ES2015
2015년 6월에 채택된 제 6판, ECMAScript2015이며 ES6이라고도 불린다.
class 명령의 도입으로 클래스의 정의가 가능import/export 명령으로 코드의 모듈화를 지원- 함수 구문의 개선 (
애로우 함수,인수의 기본값,가변길이 인수등) let/const 명령에 의한 블록 스코프의 도입반복자(lterator)/생성자(Generator)에 의한 열거 가능한 객체의 조작이 가능- 내장형 객체의 확충(
Promise,Map/Set,Proxy) String/Number/Array 등 기존 내장형 객체도 기능 확장for ~ of 명령에 의한 값의 열거
✏ ES2016
- 배열 내장 함수 includes 메소드 추가 Array.prototype.includes
: 배열에 아이템이 존재하는지Boolean 값을 반환한다.
['a', 'b', 'c'].includes('a') // true- 제곱 연산자 기능 확장 Exponentiation operator
: 기존에 Math의 pow 함수를 이용했지만 이제는 간단하게**연산자로 가능하다.
let num = 2;
Math.pow(num, 10); // 1024
2 ** 10; // 1024
num **= 10;
num; // 1024📚 Const, let
✏ let
변수를 선언하기 위한 명령으로 ES2015에 새롭게 추가된 let 명령이다.
1) 동일한 이름을 갖는 변수의 중복을 허가 하지 않는다.
let msg = 1234;
console.log(msg);
let msg = 5678; // Identifier 'msg' has already been declared
console.log(msg); 
2) 변수 선언 및 초기화 이후 반복해서 다른 값을 재할당 할 수 있다.
let msg = 5678;
msg = 0000;
console.log(msg); // 0000
3) 블록 스코프를 인식한다.
✏ Const
상수를 선언하기 위한 명령으로 ES2015에 새롭게 추가된 Const 명령이다.
1) 동일한 이름을 갖는 변수의 중복을 허가 하지 않는다.
const b = 10;
const b = 20; // Identifier 'b' has already been declared
2) 값의 재할당이 불가능한 상수이다. 반드시 처음 선언할 때 초기화(값 할당)를 해주어야 한다.
const b = 20;
b = 10; // Assignment to constant variable.
📚 스코프
: 변수에 접근할 수 있는 범위이다.
- 전역 스코프(Global Scope)
전역에 선언되어있어 어느 곳에서든지 해당 변수에 접근할 수 있다. - 지역 스코프(Local Scope)
해당 지역에서만 접근할 수 있어 지역을 벗어난 곳에선 접근할 수 없다.- 함수 스코프(function-scoped)
함수 몸체에 선언한 변수는 해당 함수 몸체 안에서만 접근할 수 있다.
- 함수 스코프(function-scoped)
let c = 1; // 전역(글로벌) 스코프
function print() { // 지역(로컬,함수) 스코프
let c = 111;
console.log(c); // 결과 : 111
}
print();
console.log(c); // 결과 : 1
📚 애로우 함수( =>)
: 기존 함수 리터럴을 애로우 함수(Arrow Function)를 이용함으로써 간결하게 기술 할 수 있다.
: function 키워드를 사용하지 않으며 대신=>로 인수와 함수 본체를 연결한다.
let v = (x, y) => { return x + y * 2 }; // 애로우함수
console.log(v(3, 23)); // 결과 : 49
- return 명령 생략 가능 -> 문장의 반환값이 그대로 반환값으로 간주
- 본체가 한 문장인 경우, 블록을 나타내는 { } 생략 가능
let vv = (x, y) => x + y * 2 ; // return 명령 생략 가능, 본체가 한문장일 경우 {} 생략 가능
console.log(vv(3, 23)); // 결과 : 49
- 인수가 한개일 경우, 인수를 감싸고 있는 괄호 생략 가능
let vvv = x => x * 2 ; // 인수가 한개일 경우 () 생략 가능
console.log(vvv(23)); // 결과 : 49
- 인수가 없는 경우, 괄호 생략 불가능
let s = () => { ... }➕ 애로우 함수 : const로 선언, 함수 내용에 맞게 이름 설정
const sum = (x, y) => { return x + y * 2 }; // 애로우함수
console.log(sum(3, 23)); // 결과 : 49
const sum = (x, y) => x + y * 2 ; // return 명령 생략 가능, 본체가 한문장일 경우 {} 생략 가능
console.log(sum(3, 23)); // 결과 : 49
const sub = x => x * 2 ; // 인수가 한개일 경우 () 생략 가능
console.log(sub(23)); // 결과 : 49
