Javascript/ECMAScript 2015 (ES6)
-
모듈 - 문법 | PoiemawebJavascript/ECMAScript 2015 (ES6) 2020. 3. 9. 18:53
[출처 : https://poiemaweb.com] 모듈이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다. 모듈은 세부 사항을 캡슐화하고 공개가 필요한 API만을 외부에 노출한다. 일반적으로 모듈은 파일 단위로 분리되어 있으며 애플리케이션은 필요에 따라 명시적으로 모듈을 로드하여 재사용한다. 즉, 모듈은 애플리케이션에 분리되어 개별적으로 존재하다가 애플리케이션의 로드에 의해 비로소 애플리케이션의 일원이 된다. 모듈은 기능별로 분리되어 작성되므로 코드의 단위를 명확히 분리하여 애플리케이션을 구성할 수 있으며 재사용성이 좋아서 개발 효율성과 유지보수성을 높일 수 있다. 자바스크립트는 웹페이지의 보조적인 기능을 수행하기 위해 한정적인 용도로 만들어진 태생적 한계로 다른 언어에 비해..
-
클래스(2) - 문법 | PoiemawebJavascript/ECMAScript 2015 (ES6) 2020. 3. 6. 18:38
[출처 : https://poiemaweb.com] 7. 정적 메소드 클래스의 정적(static) 메소드를 정의할 때 static 키워드를 사용한다. 정적 메소드는 클래스의 인스턴스가 아닌 클래스 이름으로 호출한다. 따라서 클래스의 인스턴스를 생성하지 않아도 호출할 수 있다. class Foo(){ constructor(prop){ this.prop = prop; } static staticMethod(){ // 정적 메소드는 this를 사용할 수 없다. // 정적 메소드 내부에서 this는 클래스의 인스턴스가 아닌 클래스 자신을 가리킨다. return "static method"; } prototypeMethod(){ return this.prop; } } // 정적 메소드는 클래스 이름으로 호출한다...
-
클래스(1) - 문법 | PoiemawebJavascript/ECMAScript 2015 (ES6) 2020. 2. 24. 20:13
[출처 : https://poiemaweb.com] 자바스크립트는 프로토타입 기반(prototype-based) 객체지향 언어다. 프로토타입 기반 프로그래밍은 클래스가 필요없는(class-free) 객체지향 프로그래밍 스타일로 프로토타입 체인과 클로저 등으로 객체 지향 언어의 상속, 캡슐화(정보 은닉) 등의 개념을 구현할 수 있다. # ES5에서는 생성자 함수와 프로토타입, 클로저를 사용하여 객체 지향 프로그래밍을 구현하였다. var Person = (function () { // Constructor (생성자) function Person(name) { this._name = name; } // public method Person.prototype.sayHi = function () { console..
-
디스트럭처링 - 문법 | PoiemawebJavascript/ECMAScript 2015 (ES6) 2020. 2. 18. 22:49
[출처 : https://poiemaweb.com] ※ 디스트럭처링(Destructuring) - 구조화된 배열 또는 객체를 Destructuring(비구조화, 파괴)하여 개별적인 변수에 할당하는 것이다. - 배열 또는 객체 리터럴에서 필요한 값만을 추출하여 변수에 할당하거나 반환할 때 유용하다. 1. 배열 디스트럭처링 (Array destructuring) ES6의 배열 디스트럭처링은 배열의 각 요소를 배열로부터 추출하여 변수 리스트에 할당한다. 이때 추출/할당 기준은 배열의 인덱스이다. var arr = [1, 2, 3]; // ES5 : 배열의 각 요소를 배열로부터 디스트럭처링하여 변수에 할당하기 위한 방법 var one = arr[0]; var two = arr[1]; var three = arr..
-
객체 리터럴 프로퍼티 기능 확장 - 문법 | PoiemawebJavascript/ECMAScript 2015 (ES6) 2020. 2. 17. 22:45
[출처 : https://poiemaweb.com] 1. 프로퍼티 축약 표현 ES6에서는 프로퍼티 값으로 변수를 사용하는 경우, 프로퍼티 이름을 생략(Property shorthand)할 수 있다. 이때 프로퍼티 이름은 변수의 이름으로 자동 생성된다. var x = 1, y = 2; // ES5 : 객체 리터럴의 프로퍼티는 이름과 값으로 구성된다. 프로퍼티의 값은 변수에 할당된 값일 수도 있다. var Object = { x: x, y: y } // ES6 : 프로퍼티의 값으로 변수를 사용할 경우, 이름은 생략 가능. *프로퍼티 이름 = 변수의 이름 const Object = { x, y }; console.log(Object); // {x: 1, y: 2} 2. 프로퍼티 키 동적 생성 문자열 또는 문자..
-
확장된 매개변수 처리 - 문법 | PoiemawebJavascript/ECMAScript 2015 (ES6) 2020. 2. 10. 21:59
[출처 : https://poiemaweb.com] 1. 매개변수 기본값 (Default Parameter value) 함수를 호출할 때 매개변수의 개수만큼 인수를 전달하는 것이 일반적이지만 그렇지 않은 경우에도 에러가 발생하지는 않는다. 함수는 매개변수의 개수와 인수의 개수를 체크하지 않는다. 인수가 부족한 경우, 매개변수의 값은 undefined이다. ① - 따라서 매개변수에 적절한 인수가 전달되었는 지 함수 내부에서 확인할 필요가 있다. ② - ES6에서는 매개변수 기본값을 사용하여 함수 내에서 수행하던 인수 체크 및 초기화를 간소화할 수 있다. 매개변수 기본값은 매개변수에 인수를 전달하지 않았을 경우에만 유효하다. // ① - ES5 function sum(x, y) { // 매개변수의 값이 fa..
-
화살표 함수 - 문법 | PoiemawebJavascript/ECMAScript 2015 (ES6) 2020. 2. 6. 01:07
[출처 : https://poiemaweb.com] 1. 화살표 함수의 선언 화살표 함수(Arrow function)는 function 키워드 대신 화살표(=>)를 사용하여 보다 간략한 방법으로 함수를 선언할 수 있다. 매개변수 지정 방법 () => { ... } // 매개변수가 없을 경우 x => { ... } // 매개변수가 한 개인 경우, 소괄호를 생략할 수 있다. (x, y) => { ... } // 매개변수가 여러 개인 경우, 소괄호를 생략할 수 없다. 함수 몸체 지정 방법 x => { return x * x } // single line block x => x * x // 함수 몸체가 한줄의 구문이라면 중괄호를 생략할 수 있으며 암묵적으로 return된다. 위 표현과 동일하다. () => { ..
-
템플릿 리터럴 - 문법 | PoiemawebJavascript/ECMAScript 2015 (ES6) 2020. 2. 1. 12:40
[출처 : https://poiemaweb.com] ES6는 템플릿 리터럴(Template literal)이라고 불리는 새로운 문자열 표기법을 도입하였다. 템플릿 리터럴은 일반 문자열과 비슷해 보이지만, ‘또는 “같은 통상적인 따옴표 문자 대신 백틱(backtick) 문자 `를 사용한다. 템플릿 리터럴은 작은따옴표(')와 큰따옴표(")를 혼용할 수 있다. 일반적인 문자열에서 줄바꿈은 허용되지 않으며 공백(white-space)를 표현하기 위해서는 백슬래시로 시작하는 이스케이프 시퀀스(Escape Sequence)를 사용하여야 한다. ES6 템플릿 리터럴은 일반적인 문자열과 달리 여러 줄에 걸쳐 문자열을 작성할 수 있으며 템플릿 리터럴 내의 모든 white-space는 있는 그대로 적용된다. con..