Computer Science/JavaScript 23

자바스크립트 Chapter 30 Inheritance, Polymorphism and Code Reuse

자바스크립트 핵심 컨셉 33가지 Chapter 30 Inheritance, Polymorphism and Code Reuse 상속, 다형성 그리고 코드 재사용에 대하여 알아보겠습니다. 자바스크립트는 프로토타입 기반 언어입니다. 그래서 다른 언어와 다르게 상속을 프로토타입으로 구현하는데 이 부분이 중요한지 지속적으로 다루고 있습니다. 2019/05/06 - [Computer Science/JavaScript] - 자바스크립트 Chapter 14 Factories and Classes 자바스크립트 Chapter 14 Factories and Classes 자바스크립트 핵심 컨셉 33가지 Chapter 14 Factories and Classes 이번 장에서는 Factories와 Classes를 살펴보자. 자..

자바스크립트 Chapter 26 async / await

모든 자바스크립트 개발자가 알아야 하는 33가지 개념 Chapter 26 async / await 이번 장에서는 async / await 알아보자. async / await을 이용하면 프로미스를 좀 더 편하게 다룰 수 있다. 즉 항상 프로미스(promises)를 반환한다는 것이다. // 함수 정의 앞에 async 키워드를 사용하면 함수 내에 await를 사용할 수 있다. async function myAsyncFunction() { try { const fulfilledValue = await promise } catch (rejectedValue) { } } async function e() { return 2; } e().then(console.log); // 2 명시적으로 프로미스를 반환할 수 있다..

자바스크립트 Chapter 25 Promises

모든 자바스크립트 개발자가 알아야 하는 33가지 개념 Chapter 25 Promises 이번 장에서는 프로미스에 대해 알아보자. Promises 프로미스는 비동기 조작의 최종 완료나 실패를 표현해주는 객체이다. 비동기 작업이 성공하거나 실패한 뒤에 then()을 여러번 사용하여 여러 개의 콜백을 추가할 수 있고 각각의 콜백은 주어진 순서대로 실행된다. 프로미스의 가장 큰 장점은 위의 chaining(연쇄)이다. Promise.prototype.then(), Promise.prototype.catch() 메서드는 다른 프로미스를 반환하기 때문에 서로 연결할 수 있다. 그럼 프로미스의 생성부터 종료까지를 살펴보자. 대기(pending): 이행되거나 거부되지 않은 초기 상태. 이행(fulfilled): 연산..

자바스크립트 Chapter 24 Collections and Generators

모든 자바스크립트 개발자가 알아야 하는 33가지 개념 Chapter 24 Collections and Generators 이번 장에서는 자바스크립트 컬렉션과 제너레이터를 살펴보자. Collections Map, Set, WeakMap and WeakSet을 공부해보자. Map Map은 Object와 마찬가지로 key로 지정된 데이터 항목의 Collection이다. Object와 다르게 Map은 모든 유형의 키를 허용한다. 메서드를 알아보자. new Map() - map을 생성한다. map.set(key, value) - 키(key)로 값(value)을 저장한다. map.get(key) - key에 의해 값을 반환하고, key가 map에 없으면 undefined 반환한다. map.has(key) - key..

자바스크립트 Chapter 23 Recursion

모든 자바스크립트 개발자가 알아야 하는 33가지 개념 Chapter 23 Recursion 자바스크립트 재귀에 대해 알아보자. 재귀란? 프로그래밍의 주요 개념 중 하나다. 재귀는 함수가 특정 상태에 도달할 때까지 함수를 호출할 때 발생한다. 즉 함수가 함수 자신을 호출하는 것을 의미한다. 재귀 함수에는 세 가지 주요 기능이 있어야 한다. 종료 조건 = 오류 방지 (Termination) 기본 조건 = 재귀 중지 (Base) 재귀 (Recursion) 코드로 살펴보면, function factorial(a) { // 종료 조건 if (a < 0) return; // 기본 조건 if ( a === 0) return 1; // 재귀 return a * factorial(a - 1); } factorial(4)..

자바스크립트 Chapter 22 High Order Functions

모든 자바스크립트 개발자가 알아야 하는 33가지 개념 Chapter 22 High Order Functions HOF(고차 함수)에 대해 알아보자. 고차 함수(High Order Functions)에 대해 알기 전에 Functional Programming(함수형 프로그래밍) First-Class Functions(일급 함수) 알아보자. 함수형 프로그래밍이 뭘까? 함수를 다른 함수에 매개 변수로 전달하고 값으로 반환할 수 있는 프로그래밍 형식이다. First-Class Functions(일급 함수) 자바스크립트 함수에서는 특별한 유형의 함수 객체가 있다. function hello() { console.log('Hello'); } hello(); // Hello 함수가 객체를 증명하기 위해 hello.n..

자바스크립트 Chapter 21 Closures

모든 자바스크립트 개발자가 알아야 하는 33가지 개념 Chapter 21 Closuers 자바스크립트 클로저에 대해 알아보자. Chapter 6에서 스코프(Scope)를 다시 보고 클로저를 보자. 2019/04/22 - [Computer Science/JavaScript] - 자바스크립트 Chapter 6 Scope 자바스크립트 Chapter 6 Scope 자바스크립트 핵심 컨셉 33가지 챕터 1 ~ 5는 이전 글에서 간단하게 정리하였고 2019/03/15 - [Computer Science/Vanilla-JS, ES6] - 자바스크립트 핵심 컨셉 33개 자바스크립트 핵심 컨셉 33개 자바스크립트 개.. jeongw00.tistory.com 클로저란? 함수와 그 함수가 선언된 어휘(lexical) 환경의..

자바스크립트 Chapter 20 Pure Functions, Side Effects and State Mutation

모든 자바스크립트 개발자가 알아야 하는 33가지 개념 Chapter 20 Pure Functions, Side Effects and State Mutation Pure Functions부터 살펴보자. Pure Functions 순수 함수의 정의는 동일한 인수가 전달되면, 항상 동일한 결과를 반환한다. 프로그램 실행중에는 상태나 데이터에 의존하지 않고 입력 인수에만 의존해야한다. 또한 side effects(네트워크 요청, 데이터 변이 등)을 유발하지 않는다. 사이드 이펙트(side effects)를 좀 더 살펴보면, 함수 밖의 변수를 변경하는 것부터 함수 내에서 다른 메서드를 호출하는 것까지 될 수 있고 HTTP 요청 데이터 변이 화면 또는 콘솔로 출력 DOM 쿼리 / 조작 Math.random() 현재..

자바스크립트 Chapter 19 map, reduce, filter

모든 자바스크립트 개발자가 알아야 하는 33가지 개념 Chapter 19 map, reduce, filter Chapter 17에서 프토토타입 상속과 체인을 다룰 때 Array.prototype을 살펴본 적이 있다. Array.prototype // [constructor: ƒ, concat: ƒ, copyWithin: ƒ, fill: ƒ, find: ƒ, …] 크롬 개발자 도구(F12) Console에서 Array.prototype을 찍어보면 Array.prototype에 수많은 메서드들이 있다. 우리는 위의 수많은 메서드들을 정의 한 적이 없지만 미리 정의해놓은 메서드들을 Array.prototype에서 상속해주기 때문에 사용할 수 있다. 이번 장에서는 map, reduce, filter을 살펴보자...

자바스크립트 Chapter 18 Object.create and Object.assign

모든 자바스크립트 개발자가 알아야 하는 33가지 개념 Chapter 18 Object.create and Object.assign 이번 장에서는 Object 메서드 create(), assign()을 살펴보자 Object.create() 기존 객체를 새로 만든 객체의 프로토타입으로 사용하여 새 객체를 만든다. const original = { name: 'any' } const copy = Object.create(original) copy.name // any original.hasOwnProperty('name') // true copy.hasOwnProperty('name') // false hasOwnProperty 메서드는 객체가 지정된 속성(property)을 자신의 속성으로 상속하는지 여부를..