반응형 Javascript14 [ES 6] 모듈이란? 1. ES6 새로운 모듈 구현 방법 ES6 모듈은 ES6부터 신설된 모듈 시스템이고 자바스크립트 언어 자체에 내장된 표준 모듈이다. 비교적 구문이 간결하고 성능이 우수하며 많은 최신 API가 ES6 모듈로 패키징되고 있다. A. 모듈 Export - ES6 모듈은 변수, 함수, 클래스, 기타 엔티티를 익스포트할 수 있다. 모듈에서 익스포트 시 사용하는 export 구문은 아래와 같은 형식들이 있다. export {a}; // 1 export {a, b}; // 2 export {a as variableA}; // 3 export {a as default}; // 4 export default function () {}; // 5 export {c, d} from "myAnotherModule"; // 6.. 2017. 9. 19. [ES 6] Class 구문과 상속 1. class 구문 ES6의 클래스는 기존 모델에 단지 새롭게 추가된 구문일 뿐, 새로운 객체 지향 모델은 아니다. 단순히 생성자와 상속을 좀 더 간단하고 명확한 구문으로 다룰 수 있게 해주는 구문이다. 클래스는 사실은 함수이며 생성자로 사용한 함수를 생성하는 새로운 구문의 일원이다. 다음은 클래스를 선언하는 방법이다. class User { constructor(name, age) { this._name = name; } } let user = new User("유저"); console.log(user._name); User클래스를 생성 후 그 안에 constructor 메소드를 정의했다. 그리고 클래스의 새 인스턴스, 즉 name 프로퍼티가 있는 객체를 생성했다. 클래스 바디 안의 모든 코드는 기본.. 2017. 9. 19. [ES 8] async/await 2017/09/15 - [Javascript/ECMAScript 2015 (ES6)] - [ES 6] Promise 비동기 요청 1. async/await Promise 패턴의 then 체이닝도 복잡하다! 더욱 간단한 방법이 async/await입니다. async/await은 프로미스 객체를 아래 예제처럼 다양한 함수식에서 쓰일 수 있습니다. async function getUser(userIdx) { try { let user = await Database.query(`query`); return user; } catch(e) { console.log(e.message); } } let getUser = async function (userIdx) { let user = await Database.qu.. 2017. 9. 15. [ES 6] Promise 패턴을 사용한 http request 요청 Promise 패턴은 이벤트/콜백 패턴의 골칫거리(콜백헬)를 해소하고 비동기 코드를 마치 동기 코드처럼 표현하는 것을 말한다. 1. Promise 생성자 Promise 생성자는 Promise 인스턴스를 생성한다. 이 때 비동기 작업에 해당하는 실행자 콜백을 넘기는데, 실행자는 귀결(resolve)콜백과, 버림(reject)콜백 두 파라미터를 가진다. 작업이 성공하면 resolve, 실패하면 reject콜백이 실행된다. 아래 예제를 보자. function httpRequest(url, method) { return new Promise((resolve, reject) => { let request = new XMLHttpRequest(); request.open(method, url); request.ad.. 2017. 9. 15. [ES 6] Symbol 1. Symbol Symbol은 ES6에서 처음 선보인, 완전히 새로운 원시 타입으로, 심볼값은 유일하며 변경할 수 없다. 심볼은 리터럴 형식이 없고 Symbol() 함수로 생성한다. 이 함수는 호출할 때마다 유일한 심볼을 반환한다. 또한 심볼에 관한 서술을 선택인자로 줄 수 있다. 심볼 자체에 접근하려는 시도는 아니고 단지 디버깅 용이다. 서술이 동일해도 심볼까지 동등하진 않다. let a = Symbol(); let b = Symbol(); let c = Symbol('설명'); console.log(a === b); // false 자바스크립트에서 객체의 프로퍼티 키는 보통 문자열 타입이었지만, ES6부터는 문자열과 심볼 둘 다 가능하다. let obj = null; let a = null; let.. 2017. 9. 11. [ES 6] Arrow Function - 화살표 함수 1. 화살표 함수 (Arrow Function) ES6부터 '=>' 연산자로 함수를 생성하는, 화살표 함수가 처음 생겼다. 화살표 함수는 보다 간결한 구문을 지닌 익명 함수이다. let add = (x, y) => { return x + y; }; let result = add(1, 2); console.log(result); // 3; 문이 하나 밖에 없는 화살표 함수는 {}를 생략할 수 있다. let add = (x, y) => x + y; 2. 화살표 함수에서의 this 화살표 함수에 this 값은 해당 스코프의 this 값과 같다. 여타 함수에서 this가 콘텍스트 객체를 가리키는 것과는 대조적이다. var obj = { func : function() { console.log(this); // .. 2017. 9. 11. [ES 6] 블록 스코프 let과 상수 const 1. 블록 스코프 변수 선언 - let let 키워드로 선언한 변수를 블록 스코프 변수라고 한다. 함수 밖에서 선언하면 함수 스코프 변수처럼 쓸 수 있다. 블록 안에서 선언하면 자신을 정의한 블록 또는 하위 블록에서만 접근 가능하며 블록 밖에서는 볼 수 없다. let a = 1; function myFunction() { console.log(a); // 1 let b = 2; if(true) { let c = 3; console.log(b); // 3 } console.log(c); // Reference Error Exception } myFunction(); 기존의 함수 스코프 변수 var과는 다르게 마지막 변수 c를 찍을 때에 에러가 발생한다. 기존 var를 사용하면서 스코프를 착각할 일이 있었던.. 2017. 9. 11. [Javascript] Javascript 바인딩 1. 기본 바인딩 첫 번째 규칙. 가장 평범한 함수 호출인 '단독 함수 실행'에 관한 규칙으로 다른 나머지 규칙에 해당하지 않 을 경우 적용되는 this의 기본 규칙이다. function foo() { console.log(this.a); } var a = 2; foo(); // 2 위 예제 var a = 2처럼 전역 스코프에 변수를 선언하면 변수명과 동일한 이름의 전역 객체 프로퍼티가 생성된다. foo() 함수 호출 시 this.a는 전역 객체 a다. 기본 바인딩이 적용되어 this는 전역 객체를 참조한다. 하지만 엄격 모드에서는 전역 객체가 기본 바인딩 대상에서 제외된다. 2. 암시적 바인딩 두 번째 규칙. 호출부에 콘텍스트 객체가 있는지, 즉 객체의 소유/포함 여부를 확인하는 것이다. functio.. 2017. 8. 31. [Javascript] Javascript 프로토타입 (Prototype) 1. Javascript 프로토타입 (prototype)? 명세에 따르면 자바스크립트 객체는 [[prototype]]이라는 내부 프로퍼티가 있고 다른 객체를 참조하는 단순 레퍼런스로 사용한다. 2017/08/31 - [Javascript] - [Javascript] Javascript 프로퍼티 서술자 (Getter/Setter) 위 링크 글 exObject.a처럼 객체 프로퍼티 참조 시 [[Get]]이 호출된다고 했었다. 또한 exObject에 a라는 프로퍼티가 없으면 [[prototype]] 링크를 따라가면서 찾는다고 했었다. 아래의 예제에서 Object.create(..) 함수는 특정 객체의 [[Prototype]]링크를 가진 객체를 생성한다. var anotherObject = { a: 2 }; /.. 2017. 8. 31. 이전 1 2 다음 반응형
