반응형

TIL/JavaScript 8

[ECMASciprt6+ Features] 7. Promise

Promise 개요 computer science 에서는 보통 동기 프로그램을 작성할 때 future, promise, delay, deferred 로 아직 실행되지 않은 구문을 작성한다. 웹에서 요청과 응답이 많아 지면서, 동기 프로그램을 작성해야 하는 상황이 많이 발생하였다. 이를 해결하기 위해 ECMAScript6 부터 Promise 패턴이 추가되었다. Promise는 3가지 상태가 존재한다. pending : 대기상태 fulfilled : 성공상태 rejected : 실패상태 // pending 대기상태 var pending = new Promise((resolve) => {}); console.log(pending); // pending // [[PromiseStatus]]: "pending" ..

TIL/JavaScript 2021.07.22

[ECMASciprt6+ Features] 6. import, export

import, export import : 다른 스크립트의 특정 함수, 객체, primitives를 사용하기 위해 들여오는 키워드이다. export : 반대로 스크립트 내의 특정 함수, 객체, primitive를 내보내는 키워드이다. // module.js export var port = 3000 export function getAccounts(url) { ... } main.js 파일에서는 import를 사용해서 module.js 모듈을 불러올 수 있다. import {port, getAccounts} from 'module' console.log(port) // 3000

TIL/JavaScript 2021.07.22

[ECMASciprt6+ Features] 5. Arrow Functions

Arrow Functions 함수는 간결해지고 코드는 짧아졌다. ES5 문법 this 예제1 let function_ES5 = function(param){ return param; } let function_ES6 = (param) => { return param; } ES6 문법 this 예제2 function NumberEx2() { this.num = 0; setInterval(() => { this.num++; // this is from NumberEx console.log(this.num); }, 500) } ES5 문법 this 예제3 function NumberEx3() { this.num = 0; console.log("NumberEx3() this : " + this.num); con..

TIL/JavaScript 2021.07.22

[ECMASciprt6+ Features] 4. let & const

let & const let은 블록 범위이며 재할당은 가능하지만 재선언은 불가능하다. function test() { let let_ = "test_let_"; let_ = "test_let_reassignment"; // let let_ = "test_let_2"; // SyntaxError: Identifier 'let_' has already been declared if (true) { let let_ = "if_let_"; console.log(let_); // if_let_ } console.log(let_); // test_let_reassignment } test(); 결과 출력 > if_let > test_let_reassignment var의 이슈를 let이 해결 const var_fu..

TIL/JavaScript 2021.07.22

[ECMASciprt6+ Features] 3. Class

Class Class 문법을 제공한다. constructor 메소드도 사용할 수 있고 extends를 통해서 클래스 상속도 가능하다. class Person { constructor (id, name) { this.id = id this.name = name } toString() { return `(${this.id}, ${this.name})` } } class Student extends Person { constructor (id, name, age) { super(id, name) this.age = age } toString() { return super.toString() + ' and ' + this.age } } Setter/Getter class Person { constructor (..

TIL/JavaScript 2021.07.21

[ECMAScript6+를 위한 보충학습] 2. Callback

콜백함수(Callback Function)란? 파라미터로 함수를 전달받아, 함수의 내부에서 실행하는 함수이다. 함수를 파라미터로 만들어 전달하는 경우는 대부분 비동기 프로그래밍 방식으로 코드를 만들 때이다. 예를 들어 더하기 함수를 실행한 후 결과 값이 반환될 때까지 기다리지 않고 그 다음 코드를 실행하려면 비동기 방식으로 코드를 만들어야 한다. 즉, 더하기 함수를 실행하는 데 시간이 걸릴 수 있기 때문에 그 다음 코드를 바로 실행한다. 그리고 나서 연산이 끝났을 때 파라미터로 전달한 함수가 실행될 수 있다면 그 시점에 결과를 처리할 수 있으므로 효율적인 프로그램을 만들 수 있다. 이때 파라미터로 전달되는 함수를 콜백함수(Callback Function)라고 한다. 콜백함수는 함수가 실행되는 중간에 호출..

TIL/JavaScript 2021.07.21

[ECMAScript6+를 위한 보충학습] 1. EventLoop

EventLoop 개요 자바스크립트는 기본적으로 단일쓰레드에서 동작한다. 하지만 주로 웹에 쓰이는 언어다보니, 단일쓰레드에서 동기적으로만 동작한다면 이런저런 문제가 발생할 수 있다. 외부에서 용량이 큰 데이터를 받아서 띄워주는 경우를 예로 들어보자. 만약 데이터를 받는 시간이 밀리세컨드 단위라면 동기적으로 실행되어도 큰 문제는 없을 것이다. 하지만 받는 시간이, 1, 2초나 그 이상의 시간이 걸리는 경우, 최악의 경우엔 데이터 파일 하나 때문에 웹페이지 전체를 띄우지 못하는 경우가 생길 수 있다. 이러한 문제 상황에 대비해서, 자바스크립트에서는 단일쓰레드에서도 비동기적인 프로그래밍이 가능하도록 몇 가지 장치를 해두었는데, 그것이 Event Queue와 Event Loop이다. Call Stack Call..

TIL/JavaScript 2021.07.21

ECMAScript6+

ECMAScript란? ECMAScript is a standard script language 자바스크립트 언어의 표준이다. 히스토리 넷스케이프에서 자바스크립트를 지원하면서 자바스크립트가 성공하자 마이크로소프트가 J스크립트를 개발했다. 넷스케이프는 표준화를 위해 자바스크립트 기술 규격을 ECMA 인터내셔널에 제출하였고 ECMA-262라는 표준이 생겨났다. 넷스케이프의 Brendan Eich가 JavaScript를 개발하였으며 Javascript는 처음에는 Mocha 라는 이름으로 후에는 LiveScript 최종적으로 Javascript라는 이름이 됐다. 개요 ECMAScript6(ES6, ES2015)는 2015년 6월에 업데이트 되었다. ECMAScript의 6번째 에디션이다. 2021년 현재는 ES..

TIL/JavaScript 2021.07.21
반응형