ECMAScript 2015(ES6)

ES6

최근에 공부하기 시작했던 script 버전이 2015년에 출시한 es6 였다.
let/const, 화살표 함수, Promise, import/export, Class, default Parameter 등등..
아무래도 새로운 버전이 나오는데 시간이 오래 걸려서 인지 작정하고 여러가지가 나오기 시작한거 같다..

let / const

var 에 이어서 새로운 변수 선언. var 로 선언한 변수는 hoisting이 가능했지만, let / const 로 선언한 변수는 hoisting 이 불가능하고, 선언한 블럭 내에서만 유효하다. 또한 let 은 값을 변경할 수 있는 변수, const 는 값을 변경할 수 없는 상수로 정의할 수 있다.

Arrow Functions

기존의 function 구문을 간단하게 표현할 수 있는 방식. 코드는 짧아지고 간결하지만, 익명 함수라 화살표 내에서의 this 구문은 사용할 수 없다. 아니 사용할 수 없다기 보다, 자기 자신을 바라보지 않는다. function 구문 안에서 화살표 함수를 사용하여 this 를 사용한다면, function 구문을 바라보고 있다. 하지만 화살표 함수 안에서 화살표 함수를 사용하여 this 를 사용한다면 전역객체를 바라본다? this에 관한 개념은, es5 에 도입된 내용으로 es6 이후에는 따로 변수로 선언하여 사용하는 방법이 있다? 

Class

자바에서의 class 와 같이, 상위 클래스를 상속받는 하위 클래스 구조로 만들 수 있다. 하위 클래스는 상위 클래스의 선언값을 모두 사용할 수 있다. 클래스 생성시에는 생성자(constructor) 는 필수가 아닌듯 하다.. 그래도 비어있는 생성자라도 있는게 좋겠다..

Promise

비동기 방식의 객체. Promise 객체 생성시 resolve, reject 를 인자로 넘겨준다.
resolve 는 then 의 callback 함수, reject 는 catch 의 callback 함수를 실행한다. 보통 Promise 내부 함수가 정상적으로 끝나면 resolve 를, 에러 발생시 reject 를 반환한다. 또한 Parameter 를 전달할 수도 있다.

Symbol

고유한 객체. 같은 값으로 Symbol 을 생성해도 비교해보면 다른값? 이다.
하지만 지금 MDN 에서 Properties 의 iterator 와 method 의 for() 구문을 제외하고는 거의 모든게 Translate 상태.. 

Default Function Parameter 

함수의 매개변수에 기본값을 지정한다. 인자가 없거나 undefined 일 때, 기본값으로 초기화 한다.


Rest Parameter

동적인 매개변수를 사용하여 함수에 인자를 전달할때, 배열 형태로 값을 받을 수 있다.

Array.find()

배열 각각의 요소에 대하여 주어진 함수에 통과하는 요소의 값을 반환한다. 통과하는 요소가 없다면 undefined 를 반환한다.

Array.findIndex()

배열 각각의 요소에 대하여 주어진 함수에 통과하는 요소의 인덱스를 반환한다. 통과하는 요소가 없다면 -1 를 반환한다.

Number 관련 속성, 함수

  • Number.EPSILON => 한번도 사용한적이 없다.. 하지만 이런 상수도 있다..
  • Number.MIN_SAFE_INTEGER, Number.MAX_SAFE_INTEGER => Javascript 에서 표현할 수 있는 안전한 최소, 최대의 정수값.
  • Number.isInteger() => 주어진 값이 정수인지 판별.
  • Number.isSafeInteger() => 주어진 값이 안전한 정수인지 판별.
  • Number.isNaN() => 주어진 값이 NaN 인지 판별.. 전역 함수보다 엄격하게 판별..

전역 함수

  • isFinite() => 주어진 값이 유한수인지 판별.

구조 분해 할당

객체 및 배열에 대하여 원하는 값만을 키값으로 하여 꺼내올 수 있다. 객체 구조가 복잡해도 키값만 잘 매칭 한다면 편하게 사용할 수 있다. 게다가 꼭 키값이 아닌 다른 이름의 변수로도 할당할 수 있어서 객체형태의 변수를 사용하기에 편하다.. let/const, default Parameter, rest Parameter 와 함께 ES6 의 주요 기능 중 하나라고 생각한다. 하지만 '구조 분해 할당' 이라는 어휘가 한번에 인식되지가 않는다... 그냥 본능적으로 사용할 뿐..

iterator

Iterator 에 관하여서는 MDN 에서 제공하고 있지 않다... 한글 버전의 MDN 에서 링크는 있지만 페이지가 존재하지 않고, 영어 버전의 MDN 에서는 링크 자체도 존재하지 않는다.. 더 찾아봐야 할듯..

generator

한번도 사용해 본적도 들어본적도 없는.. 함수에 미리 반환할 n개의 결과값을 yield 로 지정하고, 함수를 객체화 하고 사용하는 듯.. 카운팅이나 뭐 그럴때 쓸것도 같지만.. 현재는 사용처가 떠오르지 않는다.. 그래도 알아놔서 나쁠건 없을듯..

import / export

script 가 모듈화 되면서 html 에서 참조하지 않고, script 파일에서 다른 script 를 참조할 수 있다. 하지만 export 가 되어진 파일이나 함수, 변수만 참조할 수 있다. 각각 역할이 다른 함수들을 모듈화 하여 하나로 묶는것도 가능하다. 하나의 파일에서 보기도 힘들게 코딩하지 않아도 된다! 이것도 ES6 의 주요 기능 중 하나라고 생각한다..

댓글

댓글 쓰기

이 블로그의 인기 게시물

ECMAScript 2009 (ES5) 이전

이미지
ES3 기본적인 JavsScript 문법.. var 를 통한 변수 선언. var 변수는 hoisting 현상 발생 ** hoisting 이란 변수를 선언하기 전에 변수를 먼저 사용하는 것. ES4 es4에 대한 정보는.. 없어졌다는 이야기도 있고 es3.1 버전이 es5가 되면서 es6으로 되었다는 설도 있다.. ES5 배열에 대한 여러가지 함수, JSON 등등이 추가 되었다. 참조: ES5 - w3school 'use strict' 문법을 더 엄격한 모드로 변경.. 보통 최신 버전의 스크립트에서는 따로 사용할 일이 없을듯... 아직까지는 사용하는것을 보지는 못했지만, 평소에는 그냥 넘어가는 오류같은것을 에러로 만드는 등의 동작을 하는듯 하다.. 1. 스크립트 전체에 strict 모드     => 스크립트 최 상단에 'use  strict' 를 추가 2. 함수에만 strict 모드     => 함수 내부 최 상단에 'use  strict' 를 추가 3. 모듈에 strict 모드     => 모듈로 정의된 스크립트에는 자동으로  strict 모드가 추가되어 있다. 참조: use strict - MDN String.trim()  앞뒤의 공백을 제거 참조: String.trim() - MDN Array.isArray()  배열 타입인지를 검사(boolean) 참조: Array.isArray() - MDN Array.forEach()  배열의 요소를 순차적으로 실행 참조: Array.forEach() - MDN Array.map()  배열 각각의 요소에 대하여 주어진 함수를 호출한 새로운 결과를 반환한다. 참조: Array.map() - MDN Array.filter()  배열 각각의 요소에 대하여 주어진 함수에 통과하는 요소들의 결과를 반환한다. 참조: Array.filter() - MDN   Array.reduce()...
자세한 내용 보기

ECMAScript 2018

ECMAScript 2018 아직은 전체적으로 다 이해하고 있지는 않지만, 이번 버전에서 중요한 것은, rest / spred 기능과 Promise 에 finally 가 추가 되었다는 거 같다.. 2018 부터는 w3school 에 작성되어 있지 않다.. D2 와 함께했다. 참조: ECMAScript 2018 - D2 async iteration 아직 정확한 내용은 모르겠다... 더 찾아봐야 하겠다! MDN 에도 찾아볼수가 없다.. 내가 못찾는건지..?? rest / spred (전개 구문) 신박한 확장? 방식이다. 객체나 배열을 복사를 넘어서 추가도 수정도 할 수있다. 물론 복사만 한다면 내부 함수를 사용할 수 있지만, 복사를 하면서 값을 수정 또는 추가를 할 수는 없다. 그런 점에서는 객체에 관련하여 더 강력해졌다. 참조: 전개 구문 - MDN 정규 표현식 정규 표현식에 관하여 기능이 강화 되었다. 원하는 패턴에 따라 이름을 지정하여 그룹에서 이름으로 값을 참조할 수 있다. 또한 여러가지 문법? 패턴들이 추가되었다. 해당 패턴들에 대해서는 종류가 많다.. 필요할 때 마다 MDN 을 참조해야 하겠다. 어차피 이 전의 표현식에 관하여는 몰랐으니 그냥 알면 되겠다.. 참조: 정규 표현식 - MDN Promise resolve 의 then, reject 의 catch 에 이어서 finally 가 추가되었다. 다른 finally 와 기능은 같다. Promise 의 상태에 관계없이 무조건 실행되는 구문? 블록? 이다.
자세한 내용 보기

ECMAScript 2019

ECMAScript 2019 ES2019 에서는 크게 변화한 것이 없다. 내장 함수 몇개와 catch 구문에 대하여, 또한 JSON 과 toString, Symbol 의 성능의 개선? 정도이다. 참조: ECMAScript 2019 - D2 Object.fromEntires() Object.entires() 의 반대 버전. [key, value] 형태의 2차원 배열을 객체로 만들어 준다. 꼭 [key, value] 형태가 아니어도 되는듯 하다. 빈 배열도, key 값만 있어도, 3개의 인덱스를 가지고 있어도 객체로 만들어는 준다. 누락되거나 undefined 거나 하면 되니까... 참조: Object.fromEntries() - MDN Array.flat() 다차원 배열을 1차원 배열로 만들수 있다. 기본값은 1이지만, depth 를 넣어주면 1차원 배열로 만들수 있다.  참조: Array.flat() - MDN Array.flatMap() Array 의 Map 함수와 flat 함수의 통합형. Map 함수 기능인 callback 함수를 수행하고, 결과에 flat 으로 평탄화 작업을 한다. 하지만 1레벨의 평탄화밖에 하지 못한다. 참조: Array.flatMap() - MDN String.trimLeft(), String.trimStart() 주어진 문자열의 왼쪽 공백을 제거한다. MDN 은 영문만 제공된다. 둘이 같은 기능을 담당한다.  참조: String.trimStart() - MDN String.trimRight(), String.trimEnd() 주어진 문자열의 오른쪽쪽 공백을 제거한다. MDN 은 영문만 제공된다. 둘이 같은 기능을 담당한다.  참조: String.trimEnd() - MDN catch 구문의 파라미터 생략 catch 구문에서 에러에 관하여 사용하지 않을 때, 에러 파라미터 없이 catch 문을 구현 가능하다. 물론 무슨 에러가 발생했는지는 모르겠지.. 참조: catch - MDN 성능의 개선에 대하여는 그냥 더...
자세한 내용 보기