ECMAScript2015(ES6)

ECMAScript

넷스케이프(NE)는 javascript를 지원했고 인터넷익스플로러(IE)는 Jscript를 지원 했었습니다. 윈도우즈에 끼워팔기 신공으로 점차 득세를 하기 시작한 인터넷익스플로러는 그만 자만심에 빠져 Jscript를 표준이 아닌 적당히 자기만의 기능을 추가하기 시작했습니다. 점유율이 높으니 모든 브라우저들이 내가 만든 기준을 따라 올 거라 생각을 했던 것입니다.
하지만 넷스케이프는 자신이 밀고 있던 javascript의 핵심 개발 언어를 ECMA 인터내셔널에 제출하고 표준화를 시도 하였고 1996년에 ECMA-262(ES1)으로 명명된 표준 스크립트 기술 규격이 발표되었습니다.
이때부터 ES3 -> ES5 -> ES6(ES2015) -> ES7(ES2016)로 표준을 발표했고 우리가 알고있는 javascript는 이 표준 언어를 적용하여 개선을 하기 시작했습니다.
파이어폭스, 크롬, 오페라, 사파리 등.. 다양한 웹브라우저들이 이 표준을 적용해 나가시 시작했고 웹표준이 대세로 자리를 잡으면서 결국 IE도 더이상 버티지 못하고 IE7부터 서서히 표준을 따라가기 시작했습니다.

ECMAScript 버전이 계속 업데이트되고 있기는 하지만 현재 시점에서 대부분 개발은 ECMAScript 2015버전을 많이 사용합니다.

ECMAScript 2015 (ES6)개발 시 새롭게 등장한 기술 대표 9가지 요소가 있습니다.

모듈

ES2015부터 javascript가 모듈이라는 개념을 도입함에 따라 대규모 프로젝트를 진행할 수 있는 토대가 되었습니다. 모듈은 보통 기능별 또는 화면별로 분리해서 js파일로 따로 따로 만들어 저장해 놨다가 필요할 때 마다 import하여 사용할 수 있게 하는 기술입니다. 그러한 특성 때문에 모듈을 재활용 할 수 있어서 프로젝트 진행 할 때 쉽고 빠르게 구축을 할 수 있게 되었습니다.
모듈은 export와 import로 구성이 되어 있습니다. 모듈을 만들고 남들이 불러와 사용할 수 있기를 바라는 변수, 함수, 객체, 클래스에 대해서 export를 써주면 다른 모듈에서 import로 불러다 사용할 수 가 있습니다.

Export 설정 시

copy javascript// 저장한 파일명은 aaa.js
export let a = "반가워요";
export function add(a, b) { return a + b }

Import로 불러오기

copy javascriptimport {a, add} from './aaa.js'; //확장자인 .js는 생략 가능합니다. 

console.log(a);             // => 반가워요
console.log(add(100, 50));  // => 150

클래스

ES2015버전에서 CLASS를 공식 제정하였습니다. 기존 버전에서는 CLASS를 사용할 수 없어서 유사 CLASS로 편법으로 사용 했었습니다. 이제는 공식적으로 지원이 가능합니다.

copy javascriptclass Sayings {
  constructor(a, b) {
    this.a = a;
    this.b = b;
  }

  static getSay() { return this.a; }

  toSaying() {
    return `a=${this.a} 이고 b=${this.b} 입니다.`; 
  }
}

let c1 = new Sayings('dog', 'cat');
console.log(c1.getSay());     // => 'dog'
console.log(c1.toSaying());   // => a=dog 이고 b=cat 입니다.

또한 상속도 지원합니다.

copy javascriptclass Animal extends Sayings { }

let와 const

기존의 javascript에서 변수를 선언할때는 무조건 var을 사용했었습니다.
그러나 var는 Hosting, 블록단위 스코프 미지원, 중복선언 허용 등 몇가지 문제가 있었습니다.

copy javascriptvar msg = "TEST";

let

이러한 문제를 인식하고 ES2015에서 let와 const를 재정했습니다.
그래서 let키워드를 사용함으로써 호이스팅 문제도 해결했고, 블록단위 스코프를 지원하게 되었습니다. let이 제정되었어도 var도 같이 사용가능합니다. 하지만 가능하면 let를 사용할 것을 추천합니다.

copy javascriptlet msg = "TEST";

const

const 는 상수처럼 한번 값이 지정되면 변하지 않는 변수를 선언하며, 블록 스코트도 지원을 합니다.

copy javascriptconst msg = "TEST";

기본 파라미터와 가변 파라미터

함수를 사용 시 Function이 받는 파라미터에 대해 기본과 가변의 파라미터를 지정할 수 있습니다.

기본 파라미터

보통 함수를 호출할 때 기존에 지정된 함수와 동일하지 않은 갯수의 파라미터로 호출을 할 경우 오류가 발생했었는데, ES2015에서 기본 파라미터를 제정하여 더 적은 파라미터로 함수를 호출할 경우 미리 지정한 기본 파라미터 값으로 자동 대체되어 이런 문제를 해결하였습니다.

copy javascriptfunction addFn(a, b, c="없음", d="없음") {  }

addFn("나무", "숲"); // 정상                   => c, d가 "없음"으로 자동 입력
addFn("나무", "숲", "언덕"); // 정상           => d가 "없음"으로 자동 입력
addFn("나무", "숲", "언덕", "바람");  // 정상  => 기존 버전과 동일

여기에서 addFn()호출 시 c와 d의 값을 넣지 않은 경우 기본 값인 "없음"이 자동으로 들어가게 됩니다.

가변 파라미터

만약 함수 호출 시 저정된 파라미터의 갯수보다 많게 요청될 시에는 기본 파라미터 외의 넘어온 파라미터는 배열로 묶어서 별도로 받을 수 있게 해 줍니다.
사용법은 ...과 변수명을 붙혀서 사용하면 됩니다.

copy javascriptfunction addFn(a, b, ...etc1) {

}

addFn("나무", "숲"); // 정상                        => c, d가 "없음"으로 자동 입력
addFn("나무", "숲", "언덕"); // 정상                => etc1 = ["언덕"]
addFn("나무", "숲", "언덕", "바람");  // 정상       => etc1 = ["언덕", "바람"]
addFn("나무", "숲", "언덕", "바람". "돌");  // 정상 => etc1 = ["언덕", "바람", "돌"]

위의 함수에서 a와 b 파라미터 외의 넘어온 파라미터 값들은 배열형태로 etc1로 들어가게 됩니다.

구조 분해 할당

구조 분해 할당은 배열이나 객체로 저장되어 있는 값을 한번에 자동으로 지정된 변수에 나누어서 할당해 주는 것을 말합니다.

배열의 구조분해 할당

copy javascriptlet a = [10, 20, 30, 40, 50];
let [b, c, d] = a; // ==> b=10, c=20, d=30 으로 할당됨

객체의 구조분해 할당

copy javascriptlet a = {bb:10, cc:20, dd:30};
let {bb:b, cc:c, dd} = a; // ==> b=10, c=20, dd=30 으로 할당됨

화살표 함수

화살표 함수는 기존의 함수 표현식을 간결하게 줄여주며, 해당 함수 상위의 this를 그대로 받아서 처리를 할 수 있습니다.
원래는 함수에서 상위의 this를 받아서 사용하려면 bind, apply, call 등의 메서드를 사용했었어야 했는데 화살표함수에서는 바로 this를 받을 수 있습니다.

copy javascriptlet a1 = () => { return "test" };      
let a2 = (c, d) => { return c + d };   
let a3 = (c, d) => c + d;             

a1();         // => a1 = "test";
a2(10, 20);   // => a2 = 30;
a3(10, 20);   // => a3 = 30;

템플릿 리터럴

템플릿 리터럴은 문자열에 변수를 표현할 때 예전에는 힘들게 작성하던 것을 간결하고 보기 쉽게 해주는 기능입니다.
문장을 역따옴표 로 묶고 변수에 대해 ${변수명}으로 표시하여 작성할 수 있습니다.

copy javascriptlet a = "홍길동";
let b = "월매";
let c = 50;
let d = 80;

// 기존방식 (복잡함) 
var str = a + "와 " + b + "의 나이를 합산하면 " + (c + d) + "살 입니다.";

// 템플릿 리터럴 사용 방식 (간결함)
let str = `${a}와 ${b}의 나이를 합산하면 ${c + d}살 입니다.`;

Map과 Set

ES2015에서 추가된 요소 중 Map과 Set도 있습니다.
Map은 객체와 비슷하고 Set은 배열과 비슷한 모습을 하고 있습니다.

Map

Map은 객체와 비슷하게 간단한 키와 값으로 서로 매핑을 시켜 저장해 놓고 필요할때 쉽게 불러 사용할 수 있습니다.

copy javascriptvar sayings = new Map();
sayings.set("dog", "woof");
sayings.set("cat", "meow");
sayings.set("elephant", "toot");
sayings.size;         // 3
sayings.get("fox");   // undefined
sayings.has("bird");  // false
sayings.delete("dog");

for (var [key, value] of sayings) {
  console.log(key + " goes " + value);
}
// "cat goes meow"
// "elephant goes toot"

Set

Map이 객체와 비슷하다면 Set은 배열과 비슷하다고 보시면 됩니다.
Set의 특징은 배열과 달리 중복된 값을 허용하지 않습니다. set내에서는 값이 하나만 존재하게 됩니다.

copy javascriptvar mySet = new Set();
mySet.add(1);
mySet.add("some text");
mySet.add("foo");

mySet.has(1); // true
mySet.delete("foo");
mySet.size; // 2

for (let item of mySet) console.log(item);
// 1
// "some text"

배열과 Set는 서로 상호변환이 가능합니다.

copy javascriptArray.from(mySet);
[...mySet2];

mySet2 = new Set([1,2,3,4]);

Set은 기본적으로 합집합의 요소를 가지게 되며 교집합, 차집합은 filter로 구현을 할 수 있습니다.

copy javascriptlet a = new Set(["dog", "cat", "elephant"]);
let b = new Set(["fox", "dog", "bird"])


// 합집합(기본) => Set {"dog", "cat", "elephant", "fox", "bird"}
let union = new Set( [...a.value()], [...b.value()] );

// 교집합 => Set {"dog"}
let intersection = new Set( [...a.value()].filter(e => b.has(e)) );

// 차집합 => Set {"cat", "elephant", "fox", "bird"}
let diff = new Set( [...a.value()].filter(e => !b.has(e)) );

Promise

AJAX로 비동기 처리를 할때 콜백지옥에 빠지지 않고 보기좋게 처리하기 위해 Promise를 제정하였습니다.
보통 Promise와 then으로 구성하게 됩니다. 그리고 오류를 받아 처리하기 위해 catch도 세트로 사용합니다.
Promise설정시 resolve와 reject 파라미터를 사용하게 되는데, resolve()는 then이 받고 reject()는 catch가 받게 됩니다.

copy javascriptvar promise1 = new Promise(function(resolve, reject) {

  setTimeout(function() {
    resolve('foo'); // then으로 넘김
  }, 300);

  reject('error'); 
});

promise1.then(function(value) { // resolve()로 넘긴 값을 value로 받음
  console.log(value); 
  // expected output: "foo"
});

promise1.catch(function(value) { // reject()로 넘긴 값을 value로 받음
  console.log(value); 
  // expected output: "error"
});

console.log(promise1);
// expected output: [object Promise]

'프로그래밍 개발 > 프론트엔드 개발자 기본 지식' 카테고리의 다른 글

Webpack 웹팩 (0)	2022.04.12
Npm (0)	2022.04.12
DOM API (Web API) and Concept (0)	2022.04.10
JavaScript의 동작 원리 (0)	2022.04.10
Git과 GitHub (0)	2022.04.10

ECMAScript2015(ES6)