{"componentChunkName":"component---src-templates-blog-post-js","path":"/javascript/es6-vs-es5/","result":{"data":{"site":{"siteMetadata":{"title":"Bottlehs Tech Blog","description":"웹·앱·AI 개발자 전병훈(bottlehs)의 기술 블로그. AI·LLM, JavaScript·Vue, Spring Boot, 알고리즘, 블록체인 실무 가이드를 다룹니다","siteUrl":"https://www.bottlehs.dev","author":{"name":"Jeon Byung Hun","summary":"개발을 즐기는 bottlehs - Engineer, MS, AI, FE, BE, OS, IOT, Blockchain, 설계, 테스트"},"social":{"github":"bottlehs","codepen":"bottlehs"}}},"markdownRemark":{"id":"0f23c63c-9b15-5b60-97aa-9a32cbeae468","excerpt":"2009년에 발표된 ES(ECMAScript 5)는 웹 어플리케이션 부터 소셜게임 까지 다양한 곳에서 활용이 되었다. 그 이후, 기존에 자바스크립트의 여러 문제점을 해결하고 개선한 ES6(ECMAScript 2015)이 2015년 여름에 발표 되었다. ES6은 ECMAScript…","html":"<p>2009년에 발표된 ES(ECMAScript 5)는 웹 어플리케이션 부터 소셜게임 까지 다양한 곳에서 활용이 되었다. 그 이후, 기존에 자바스크립트의 여러 문제점을 해결하고 개선한 ES6(ECMAScript 2015)이 2015년 여름에 발표 되었다. ES6은 ECMAScript 2015라도고 불리고, 기존 여러 기능을 개선한 버전이다.</p>\n<p><img src=\"/assets/ecmascript_2015_language_specification_%E2%80%93_ecma-262_6th_edition.png\" alt=\"ES6\" title=\"최신 ECMAScript 스팩\"></p>\n<p><a href=\"https://www.ecma-international.org/ecma-262/6.0/\"></a>그림-1. 최신 ECMAScript 스팩 (<a href=\"https://www.ecma-international.org/ecma-262/6.0/\">https://www.ecma-international.org/ecma-262/6.0/</a>)</p>\n<p>ES6의 핵심 기능 중 하나는 ES5(ECMAScript 5) 버전을 기반으로 개발된 웹 페이지가 동작가능 하도록 하위 호환성을 지원하는 것이다.</p>\n<p>ES6에 추가된 주요 기능은 다음과 같다.</p>\n<ul>\n<li>\n<p><strong>let &#x26; cont</strong> : 변수 선언용 let, 상수 선언용 const 키워드 추가</p>\n<ul>\n<li><a href=\"/javascript/es6-let-cont/\" title=\"ES6 let &#x26; cont\">ES6 let &#x26; cont</a></li>\n</ul>\n</li>\n<li>\n<p><strong>화살표 함수</strong> : 함수 정의를 위한 화살표 함수 추가</p>\n<ul>\n<li><a href=\"/javascript/es6-%ED%99%94%EC%82%B4%ED%91%9C-%ED%95%A8%EC%88%98-arrow-function/\" title=\"ES6 화살표 함수 (arrow function expression)\">ES6 화살표 함수 (arrow function expression)</a></li>\n</ul>\n</li>\n<li>\n<p><strong>클래스</strong> : 클래스 키워드 추가</p>\n<ul>\n<li><a href=\"/javascript/es6-%ED%81%B4%EB%9E%98%EC%8A%A4-class/\" title=\"ES6 클래스 (Class)\">ES6 클래스 (Class)</a></li>\n</ul>\n</li>\n<li>\n<p><strong>템플릿 문자열</strong> : 역따옴표를 이용한 문자열 기능 추가</p>\n<ul>\n<li><a href=\"/javascript/es6-%ED%85%9C%ED%94%8C%EB%A6%BF-%EB%AC%B8%EC%9E%90%EC%97%B4-template-string/\" title=\"ES6 템플릿 문자열 (template string)\">ES6 템플릿 문자열 (template string)</a></li>\n</ul>\n</li>\n<li>\n<p><strong>디스럭처링</strong> : 변수를 매핑하여 할당 가능</p>\n<ul>\n<li><a href=\"/javascript/es6-%EB%94%94%EC%8A%A4%ED%8A%B8%EB%9F%AD%EC%B2%98%EB%A7%81-destructuring/\" title=\"ES6 디스트럭처링(Destructuring)\">ES6 디스트럭처링(Destructuring)</a></li>\n</ul>\n</li>\n<li>\n<p><strong>함수 인자 기능</strong> : 인자 기본값 설정, 가변 인자 기능 추가</p>\n<ul>\n<li><a href=\"/javascript/es6-spread-rest-%EC%97%B0%EC%82%B0%EC%9E%90/\" title=\"ES6 Spread &#x26; Rest 연산자\">ES6 Spread &#x26; Rest 연산자</a></li>\n</ul>\n</li>\n<li>\n<p><strong>Iterator &#x26; for-of</strong> : 배결의 Iterator 속성 정의 및 for-of 키워드 추가</p>\n<ul>\n<li><a href=\"/javascript/es6-for-of-%EB%A3%A8%ED%94%84/\" title=\"ES6 For ... Of 루프\">ES6 For … Of 루프</a></li>\n</ul>\n</li>\n<li>\n<p><strong>Map &#x26; Set</strong> : Map, Set 키워드 추가</p>\n<ul>\n<li><a href=\"/javascript/es6-map-set/\" title=\"ES6 Map &#x26; Set\">ES6 Map &#x26; Set</a></li>\n</ul>\n</li>\n<li>\n<p><strong>모듈 기능</strong> : import, export 키워드 추가</p>\n<ul>\n<li><a href=\"/javascript/es6-%EC%9E%84%ED%8F%AC%ED%8A%B8-import-%EC%99%80-%EC%9D%B5%EC%8A%A4%ED%8F%AC%ED%8A%B8-export-%EB%AA%A8%EB%93%88/\" title=\"ES6 임포트(import)와 익스포트(export) 모듈\">ES6 임포트(import)와 익스포트(export) 모듈</a></li>\n</ul>\n</li>\n<li>\n<p><strong>Promise</strong> : Promise 모듈 추가</p>\n<ul>\n<li><a href=\"/javascript/es6-%ED%94%84%EB%9D%BC%EB%AF%B8%EC%8A%A4-promise/\" title=\"ES6 프라미스(Promise)\">ES6 프라미스(Promise)</a></li>\n</ul>\n</li>\n<li><strong>Proxy</strong> : Proxy 패턴의 기능을 기본 표준으로 추가</li>\n<li><strong>Symbol</strong> : 새로운 Symbole 추가</li>\n</ul>\n<p>다음에는 추가된 주요 기능을 상세하게 다뤄볼 것이다.</p>","tableOfContents":"","wordCount":{"words":203},"fields":{"slug":"/javascript/es6-vs-es5/","image":"/assets/ecmascript_2015_language_specification_–_ecma-262_6th_edition.png","faq":[]},"frontmatter":{"title":"ES6 vs ES5","date":"2020년 10월 9일","dateISO":"2020-10-09T09:06:14.444Z","updatedISO":null,"category":"javascript","description":"기존 자바스크립트의 여러 문제점을 해결하고 개선한 ES6 (ECMA6) 에 대해 알아 본다","tags":["ES6","ECMAScript 2016","Javascript","ES5","ECMAScript 5"]}}},"pageContext":{"slug":"/javascript/es6-vs-es5/","previous":null,"next":{"fields":{"slug":"/javascript/es6-let-cont/"},"frontmatter":{"title":"ES6 let & cont","tags":["JavaScript","ES6","ECAMScript 2015","Let","Const","Var"]}}}},"staticQueryHashes":["213619243","3262363727"]}