-
항해99 2주차 WIL -ES란?카테고리 없음 2021. 11. 14. 16:49
2주차 알고리즘 문제를 풀어보면서 잘 알지 못했던 함수 등 검색 할 때 ES6, ES5등의 문구가 많이 보였다.
ES에 대해 공부하고 정리해보자.
ES: ECMA Script
Ecma International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어
ES의 탄생배경
1. 1993년 NCSA사에서 사용자들의 접근이 용이한 UI 를 추가한 Mosic Web Browser를 출시한다.
2. 모자이크 웹개발팀을 이끌던 Marc Andreessen은 netscape설립을 하게되고 조금 더 UI요소가 더해진 Netscape Navigator를 출시한다.(정적 웹사이트)
3. 동적 웹사이트를 만들고 싶었던 Marc Andreessen은 scripting언어를 추가하기로 했다.
당시 인기를 끌었던 자바를 사용하기에는 무겁고 어려운 언어였기 때문에 새로운 언어가 필요했다.
4. Brendan Eich에게 scheme script를 변형해서 열흘만에 출시 할 것을 요구 했고,
이렇게 출시 된 언어가 프로토타입 베이스의 모카(Mocha)이다.
5. 모카는 추후 Live script로 개명을 하면서 Live Script Engine인 interperter를 추가하게 된다.(브라우저의 돔 요소 조작이 가능해진다)
6. 1995년 당시 각광받고 인지도 있는 언어였던 Java의 유명세를 마케팅으로 이용하고자 Live script를 Java script로 또다시개명하게된다.
7. 같은 해인 1995년 MS사에서도 브라우저를 출시하고자했고 Netscape Navigator를 reverse engineering해서 (거의 베껴서) 본인들의 언어인 J Script를 출시한다.
8. 이렇게 개발자들은 너무 다른 두 브라우저에서 잘 동작하는 웹사이트를 만들어야했고 결국 Netscape에서 ECMA International에 표준어 제안을 하게된다.
9. 1997년 07월 ECMASCRIPT 1이 나오게된다. (문법등 사항을 정리한 문서)
10. ES는 이후 꾸준히 업데이트 되었다.
1998 ES2
1999 ES3 -error handling방식에 관련된 문법, 관계연산자 추가
11. 2000년 ES4가 나올 때쯤 되자 다양한 아이디어 제안이 들어왔는데,
이때 MS의 Internet Explorer 시장점유율이 95%에 다다르면서 MS사는 자신들의 Internet Explorer가 표준임을
주장하게되고, ES표준안에 참가하지 않겠다고 선언하면서 표준화 진행이 더뎌지게 되었다.
12. 2004 Mozilla에서 브라우저 Firefox를 출시하고 본인들이 제작한 Actionscript3/Tamarin engine으로 표준 검토제안을 하게되지만 기존과 너무 다른 체계였기 때문에 등록이 어려워진다.
13. 2008년 Google의 Chrome브라우저가 JIT(Just In Time complition)라는 강력엔진을 포함하여 출시된다.
이에 자극을 받은 다른 브라우저 회사들은 표준화를 만들기 위한 커뮤니케이션을 하게된다.
14. 2009 ES5가 드디어 나오게 된다.
15. 2015 ES6가 나오게 된다.
class, arrow function, const, let
16. 이후에도 해마다 새로운 버전들이 나오고 있지만 ES5와 ES6에서 거의 모든 것이 정의되었다.
ES5/ES6문법 차이
1.fuction
ES6에서 arrow함수가 추가 되었다.
(화살표 함수)
- function 키워드 대신 화살표(=>, far arrow) 사용
- 더 간략하게 함수 정의
- 내부 동작도 간략해졌다.
2.변수 선언
- Block Scope를 따르는 let, const 사용
- let: block scope로 일반 변수 생성시 사용 , 중복 선언시 Type Error를 발생시킨다.
장점은 잘못된 변수 사용으로 인해 발생하는 오해의 소지를 줄여주기 때문에 정확한 사용이 가능하다.- const - block scope로 JavaScript에서 상수용 변수로 사용된다 , 처음 생성시 초기값을 지정해주어야 한다.
주의할 점은 변수에 담긴 값이 불변이라기보다는 재할당이 불가능하다는 의미이다.*** 블록 레벨 스코프(Block-level scope)
모든 코드 블록 내에서 선언된 변수는 코드 블록 내에서만 유효하고 코드 블록 외에서는 참조할 수 없다
*** 함수 레벨 스코프(Function-level scope)
함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다 즉, 함수 내부에서 선언한 변수는 지역 변수이며 함수 외부에서 선언한 변수는 모두 전역 변수이다
3.템플릿 엔진 문자열
- (백틱 or 억음 부호) 와 ${}를 통해 한줄로 표현가능하며 Single quotation 과 Double quotation을 자유롭게 사용할 수 있다.
4.string method(includes, startsWith,ednsWith)
- 문자열 메서드 추가.
5. Default Parameters
인자가 없거나 'undefined'인 경우에 들어갈 기본값을 설정해 놓아야 한다
ES6에서는 기본 매개 변수(Default Parameters)를 제공하고, 매개변수가 없을 경우 지정한 기본값을 인자로 전달한다
ES5 function sayHello(name, greeting) { name = (typeof name !== 'undefined') ? name : 'Student'; greeting = (typeof greeting !== 'undefined') ? greeting : 'Welcome'; return `${greeting} ${name}!`; } ES6 function sayHello(name = 'Student', greeting= 'Hi') { return `${greeting} ${name}!`; } greet(); Hi Student!6. 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]7. Classe
new 키워드로 Class 생성 가능, constructor() 생성자 함수로 속성 설정 가능, 메서드 정의, 상속, 부모 메서드 호출 가능한 Class를 사용할 수 있다 프로토 타입과 클래스가 다르지 않다 = 프로토 타입으로 상속을 구현했을 경우데 클래스 문법을 사용할 수 있다
class Note { constructor(text) { this.text = text; } }***더 공부할 것***
생성자 함수, this, 프로토타입, argument객체
한 주 동안 정신없이 배우고 사용해보고를 반복했던 것 같다. 알고리즘 문제를 풀면서 정말 답답하기도 무기력해지기도 했는데 무엇보다 생각보다 못하는 나 자신에 대한 자괴감이나 열등감이 심했던 것 같다.
그렇지만 열등감은 나를 성장시키는 밑거름이 될 수도 있다. 지나치게 좌절하지 않도록 주의하고 더 열심히 하려는 원동력으로 삼아 앞으로 계속 성장하는 개발자가 되도록 노력할 것이다.