FrontEnd/ES6
-
06. Spread OperatorFrontEnd/ES6 2021. 9. 7. 10:31
Spread Operator (...)는 배열표현식 또는 0개 이상의 인수(함수 호출의 경우) or 요소(배열 리터럴의 경우)가 기대되는 장소에서 확장된 문자열과 같은 반복을 허용한다. 스프레드 오퍼레이터, 스프레드 연산자, 전개 구문, 펼침 연산자라고도 불린다. [MDN] ES5 ES6 let name = { first name: 'gil-dong', last name: 'kim' }; let person = { nation: 'korea', first name: 'gil-dong', last name: 'kim' } let name = { first name: 'gil-dong', last name: 'kim' }; let person = { nation: 'korea', ...name }
-
05. 모듈화(Modules)FrontEnd/ES6 2021. 9. 4. 11:10
Modules는 JavaScript 모듈 로더(AMD, CommonJS)의 패턴을 코드화한 것으로 호출되기 전까지는 코드 실행과 동작을 하지 않는 특징이 있습니다. 재사용성이 뛰어난 기능들을 모듈화해서 사용이 가능하며 파일별로 Scope를 가져 변수의 Scope 충돌을 방지할 수 있습니다. libs/math.js main.js export function sum(x, y) { return x + y; } export var pi = 3.141593; import * as math from 'libs/math'; alert("2π = " + math.sum(math.pi, math.pi)); ----------------------------------------------------------------..
-
04. 향상된 객체 리터럴(Enhanced Object Literals)FrontEnd/ES6 2021. 9. 4. 10:50
1. 객체의 속성을 메서드로 사용할 때 function 예약어를 생략하고 생성이 가능합니다. var obj = { num: 100, // ES5 findNum: function() { console.log("find number"); }, // ES6 findNum() { console.log("find number"); } } 2. 객체의 속성명과 값 명이 동일할 때 축약이 가능합니다. var num = 10; var obj = { // num: num, num };
-
03. 화살표 함수(Arrow Function)FrontEnd/ES6 2021. 9. 4. 10:40
화살표 함수(Arrow Function)는 함수를 정의할 때 function 키워드를 사용하지 않고 =>로 대체하는 것입니다. 흔히 콜백 함수의 문법을 간결화할 때 사용합니다. ES5 ES6 var sum = function(a, b) { return a + b; }; var sum = (a, b) => { return a + b; } var arr = ["a", "b", "c"]; arr.forEach(function(value) { console.log(value); // a, b, c }); arr.forEach(value => console.log(value));
-
02. const & letFrontEnd/ES6 2021. 9. 4. 10:35
const & let은 새로운 변수 선언 방식입니다. ES5는 Hoisting으로 인해 변수의 유효범위(Scope)가 {}에 상관 없이 설정되지만, ES6는 {} 단위로 변수의 유효범위(Scope)가 설정됩니다. 1. const const는 한번 선언한 값에 대해서 변경할 수 없는 상수입니다. 하지만, 객체나 배열의 내부는 변경할 수 있습니다. 아래 코드의 obj 객체의 num이란 속성 추가가 가능하며, arr 배열에 요소를 추가(push)하거나 빼낼(pop) 수 있습니다. 2. let let은 값 변경이 가능한 변수입니다. 다만, 한번 선언한 값에 대해서 다시 선언할 수 없습니다. 3. ES5 Hoisting Hoisting(끌어 올리기)이란 js해석기가 코드의 라인 순서와 관계 없이 함수선언식과 변수..
-
01. ECMAScript 6(ES6)FrontEnd/ES6 2021. 9. 4. 08:45
1. ECMAScript ECMAScript는 ECMA International에 의해 제정된 ECMA-262 기술 규격에 의해 정의된 표준화된 스크립트 프로그래밍 언어입니다. ECMAScript는 스크립트 언어가 준수해야 하는 규칙, 세부 사항 및 지침을 제공합니다. [전문] 2. JavaScript ECMAScript 사양을 준수하는 범용 스크립트 프로그래밍 언어. 3. ECMAScript 6(ES6) ECMA-262 표준의 제 6판이며, ES5(2009년) 이후 2015년에 첫 메이저 업데이트가 승인되었습니다. 그러므로 ES6, ES2015, ECMAScript 2015는 동의어입니다. ES5에 비해 문법이 간결해졌으며 최신 Front End Framework인 React, Angular, Vue에..