ES, ECMAScript 는 무엇일까요?

ECMAScript 는 Ecma 인터내셔널의 ECMA-262 기술 규격에 정의된 표준화된 스크립트 프로그래밍 언어입니다. 자바스크립트를 표준화하기 위해서 만들어졌으며 꼭 자바스크립트가 아니더라도 어도비 플래시를 사용하는 소프트웨어에서 사용하는 액션스크립트, MS 사의 인터넷 익스플로러에 쓰이는 J스크립트 등 다른 구현체들 역시 포함하고 있습니다.

ES 가 등장하게 된 배경을 살펴보면 1990년대로 거슬러 올라갑니다. Netscape 회사는 웹 디자이너들과 파트타입 프로그래머들이 이미지, 플러그인 등의 요소를 쉽게 조합해줄 언어를 필요로 하게 되었고 이를 위해 Brendan Eich 를 영입하게 됩니다. Brendan Eich 는 모카라는 새로운 언어를 만들고 이 이름은 라이브스크립트로 다시 자바스크립트로 이름을 바꾸게 됩니다. 이름을 지은데에는 이 언어가 자바 언어에서 파생되었다는 마케팅적인 이유가 있다고 생각하고 있습니다.

자바스크립트가 성공하자 경쟁사인 MS 는 이를 견제하기 위해 J스크립트를 개발하게 됩니다. 당시 웹브라우저에서 압도적인 점유율을 차지하던 IE 에서 J스크립트를 지원하기 시작하자 두 비슷한 스크립트 언어가 사람들에게 혼란을 야기하게 됩니다. 따라서 이 둘 뿐 아니라 여러 스크립트 언어들에 대한 표준이 필요하다고 생각했고 ES 가 등장하게 되었습니다.

따라서 ES 는 프로그래밍 언어가 아닌 스크립트 언어들에 대한 표준, 규격입니다.

왜 ES6 인가

• 현재 2019년 12월 기준으로 ES10 까지 나왔습니다. 1997년 6월에 1판을 시작으로 불규칙적이게 개정되던 것이 2015년 부터는 매년 6월에 규칙적으로 개정이 되고 있습니다.
• ES6 에서는 ES5 이하 명세에서 문제가 되었던 부분들이 해결되었고 많은 기능들이 추가되었습니다. 이는 가독성과 유지보수성 향상으로 이어졌습니다.
• React 나 Vue 등 유명 라이브러리들도 이에 맞춰 개발 환경을 ES6로 바꾸게 되었습니다.

  판	출판일	이름	이전 판과의 차이점
  1	1997년 6월		초판
  2	1998년 6월		ISO/IEC 16262 국제 표준과 완전히 동일한 규격을 적용하기 위한 변경.
  3	1999년 12월		강력한 정규 표현식, 향상된 문자열 처리, 새로운 제어문 , try/catch 예외 처리, 엄격한 오류 정의, 수치형 출력의 포매팅 등.
  4	버려짐		4번째 판은 언어에 얽힌 정치적 차이로 인해 버려졌다. 이 판을 작업 가운데 일부는 5번째 판을 이루는 기본이 되고 다른 일부는 ECMA스크립트의 기본을 이루고 있다.
  5	2009년 12월		더 철저한 오류 검사를 제공하고 오류 경향이 있는 구조를 피하는 하부집합인 "strict mode"를 추가한다. 3번째 판의 규격에 있던 수많은 애매한 부분을 명확히 한다.
  5.1	2011년 6월		ECMA스크립트 표준의 제 5.1판은 ISO/IEC 16262:2011 국제 표준 제3판과 함께 한다.
  6	2015년 6월	ECMAScript 2015 (ES2015)	6판에는 클래스와 모듈 같은 복잡한 응용 프로그램을 작성하기 위한 새로운 문법이 추가되었다. 하지만 이러한 문법의 의미는 5판의 strict mode와 같은 방법으로 정의된다. 이 판은 "ECMAScript Harmony" 혹은 "ES6 Harmony" 등으로 불리기도 한다.
  7	2016년 6월	ECMAScript 2016 (ES2016)	제곱연산자 추가, Array.prototype.includes
  8	2017년 6월	ECMAScript 2017 (ES2017)	함수 표현식의 인자에서 trailing commas 허용, Object values/entries 메소드, async/await 등.
  9	2018년 6월	ECMAScript 2018 (ES2018)	Promise.finally, Async iteration, object rest/spread property 등.
  10	2019년 6월	ECMAScript 2019 (ES2019)	Object.fromEntries, flat, flatMap, Symbol.description, optional catch 등.

Default Parameters in ES6

③ Default Parameters
인자가 없거나 'undefined'인 경우에 들어갈 기본값을 설정해 놓아야 한다
ES6에서는 기본 매개 변수(Default Parameters)를 제공하고, 매개변수가 없을 경우 지정한 기본값을 인자로 전달한다

Template Literals in ES6

② Template Literal

ES5
console.log('Hi' + user + 'Today is' + date);
ES6
console.log(`Hi ${user} Today is ${date}`);

` 백틱(back-ticked)으로 문자열과 값을 간단하게 사용 가능하다

Multi-line Strings in ES6

④ Multi-line Strings

` 백틱을 이용해서 여러 줄의 문자열을 처리하기 수월해졌다

ES5
var content = 'Hi,\n\t'
	+ 'My name is SHAB\n\t'
ES6
var content = `Hi,
	My name is SHAB`

Destructuring Assignment in ES6

⑤ Destructuring Assignment

비구조화 할당, 배열이나 객체의 요소를 해체하여 별개의 변수로 추출할 수 있다

ES5
var res = $('body').data(),
   first = res.first,
   second = res.second
ES6
var { first, second } = $('body').data();

[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); 10
console.log(b); 20
console.log(rest); [30, 40, 50]

## Enhanced Object Literals in ES6
⑥ Enhanced Object Literals
>객체 정의 방식이 개선됐다

⑴ 속성과 값이 같으면 1개만 기입 가능
```javascript
var language = 'js
var langs = {
  language: language,		ES5
  language			ES6
};
console.log(josh);	{language: "javascript"}

⑵ 속성에 함수 정의할 때 function 생략 가능

const shab = {
  coding() {		coding: function() { 생략
    console.log('Hello World');
  }
};
shab.coding();		Hello World

Arrow Functions in ES6

① Arrow Function
this, prototype, arguments 세 가지가 없다
익명 함수로만 사용할 수 있다
lambda식과 같은 방식

⑴ this
일반 함수는 호출할 때 어떻게 호출되는지에 따라 this에 바인딩할 객체가 동적으로 결정되지만, 화살표 함수는 선언할 때 this에 바인딩할 객체가 정적으로 결정된다 화살표 함수의 this는 항상 상위 scope의 this를 말한다 자신만의 this를 생성하지 않는 익명 함수다 (Lexical this)

ES5
var _this = this
$('.btn').click(function(event){
  _this.sendData()
})
ES6
$('.btn').click((event) =>{
  this.sendData()
})

⑵ prototype
생성자 함수로 사용할 수 없다 new 사용 시 오류 발생한다

var Foo = () => {};
var foo = new Foo();		TypeError

⑶ arguments
매개변수를 지정하지 않아도 arguments 프로퍼티가 함수에 자동으로 생성되어 사용 가능했었으나, arguments가 없어졌다 대신 args가 생겼다

const myFunction = () => {
	console.log(arguments);		Uncaught ReferenceError
}

const myFunction = (...args) => {
	console.log(args);		
}

myFunction(1, 2, 3, 4)		[1, 2, 3, 4]

@ 호이스팅(hoisting) 될 수 없다
호이스팅(hoisting)
= 들어올리다
코드에 선언된 변수 및 함수를 코드 상단으로 끌어올리는 것
선언 부분만 호이스팅 한다 할당 부분은 호이스팅하지 않는다
함수 내에서 선언한 함수 범위(function scope)의 변수는, 해당 함수 최상위로 호이스팅 된다

function hoistingTest() {
   console.log(x);			// undefined
   var x = 100;
   console.log(x);			// 100
}

첫 번째 콘솔 로그에 출력된 undefined는 x의 값이 할당되지 않았다는 의미다
x값 할당 후 두 번째 콘솔 로그에는 할당한 값이 출력된다

함수 밖에서 선언한 전역 범위(global scope)의 전역 변수는, script 단위의 최상위로 호이스팅 된다

hoistingTest();

function hoistingTest() {
   console.log("test");
}

hoistingTest() 함수 위에서 먼저 호출해도 "test"가 콘솔 로그에 출력되는 것을 볼 수 있다

hoisting();

const hoisting = () => {
   console.log("test");
}

=> Error: Cannot access 'hoisting' before initialization

하지만 arrow function는 호이스팅되지 않기 때문에 이와 같이 함수 위에서 먼저 호출하면 에러가 발생한다

arrow funciton을 사용하면 안 되는 경우

⑴ 객체의 메소드에서 사용 시
arrow function은 상위 scope의 this를 계승하기 때문에 이 경우 전역 객체를 가리키게 된다

const person = {
  name: 'Lee',
  sayHello: () => console.log(`Hi ${this.name}`)
};
 
person.sayHello();		Hi undefined

⑵ addEventListener의 콜백 함수

const btn = document.getElementById('btn');
 
btn.addEventListener('click', () => {
    console.log(this);			window    
});

Promises in ES6

⑦ Promises
비동기를 위한 객체, 어떤 일의 진행 상태를 나타내는 객체로 상태와 값이라는 속성을 갖고 있다 resolve, reject를 호출하여 진행 상태를 결정할 수 있다 promise의 값은 resolve, reject를 호출할 때 넘긴 인자에 의해 결정된다 then(), catch()는 일의 진행 상태를 나타내는 객체다 promise가 fullfilled일 때 then()에 등록한 함수를 실행하고, promise가 rejected일 때는 아무것도 하지 않는다

⑴ 동기
요청과 응답이 동시에 일어난다 설계가 간단하고 직관적이지만 응답이 있을 때까지 대기해야 한다
ex) 은행 계좌이체

⑵ 비동기
요청과 응답이 동시에 일어나지 않는다 응답이 오기 전까지 다른 요청이나 작업이 가능하다

ES5
setTimeout(function(){
  console.log('Yay!')
}, 1000)
ES6
var wait1000 = () => new Promise((resolve, reject) => {
   setTimeout(resolve, 1000)
   }
)
wait1000()
    .then(function() {
        console.log('WOW!')
        return wait1000()
    })
    .then(function() {
        console.log('WOWWOW!')
    });

Block-Scoped Constructs Let and Const

⑧ Block-Scoped Constructs Let and Const
대부분의 프로그래밍 언어는 블록 레벨 스코프(Block-level scope)지만, Java Script는 함수 레벨 스코프(Function-level scope)를 따른다 블록 레벨 스코프를 따르는 변수를 선언하기 위해 let, const를 제공한다
let vs const
재할당 자유롭다 vs 상수를 위해 사용, 재할당이 안 된다

⑴ 블록 레벨 스코프(Block-level scope)
모든 코드 블록 내에서 선언된 변수는 코드 블록 내에서만 유효하고 코드 블록 외에서는 참조할 수 없다

⑵ 함수 레벨 스코프(Function-level scope)
함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다 즉, 함수 내부에서 선언한 변수는 지역 변수이며 함수 외부에서 선언한 변수는 모두 전역 변수이다

ES6에서 var 키워드는 사용하지 않도록 하고, const 키워드를 사용하도록 하자

Classes in ES6

⑨ Classes
new 키워드로 Class 생성 가능, constructor() 생성자 함수로 속성 설정 가능, 메서드 정의, 상속, 부모 메서드 호출 가능한 Class를 사용할 수 있다 프로토 타입과 클래스가 다르지 않다 = 프로토 타입으로 상속을 구현했을 경우데 클래스 문법을 사용할 수 있다

class Note {
	constructor(text) {	
		this.text = text;
	}
}

Modules in ES6

⑩ Modules

import sayHi from "module.js";
sayHi("hi");

import * as myModule from "module.js";
myModule.sayHi("hi");

import { sayHi as A } from "module.js";

한주동안 배운것/ 느낀것/ 아쉬웠던것

배운것

알고리즘

느낀것

알고리즘을 처음 접해봤는데 만만하게 볼것이 아니였다
처음에는 그냥 로직만 어느정도 구현할수있으면 되겠지라는 생각이였는데
하나씩 하니씩 풀면서 어느정도만해서는 되는것이 아니였다...

아쉬웠던것

챌린지까지 총 40문제 였는데 마지막날에 흐지부지가 되어 마지막 문제를 풀지못한것이 제일 아쉬웠다.
앞으로 남은 일정을 마무리 해나가면서 시간적 여유가 생길 때 남은 알고리즘을 풀어 블로그에 올려야겠다.. 올지지 않으면 완성 하지 못한 찝찝함이 계속 남아있을거기 때문에
하루라도 빨리 털어버리기 위해 어서빨리 처리를 해야겠다