Prog. Langs & Tools/JavaScript

이전 포스팅 - 자바스크립트 콜백(Callback) 프로미스란 이번 시간에는 자바스크립트 프로미스에 대해서 알아보고자 한다. 이전 포스팅에서 자바스크립트가 비동기 처리를 하는 방법에 대해서 설명하면서 콜백을 소개했고, 콜백의 장단점을 설명하면서 콜백의 단점을 보완하기 위해 프로미스가 생겼다고 이야기 했었다. 조금 더 구체적으로 말하자면, 콜백으로 비동기성을 표현할 때 순차성(Sequentiality)과 믿음성(Trustability)이 결여되어 문제가 생긴다. 하나씩 살펴보자. 먼저 제어의 역전을 생각해 보자. 콜백 함수를 다른 곳으로 전달하게 되면 해당 프로그램의 진행은 그 곳에서 이루어지기 때문에 우리가 할 수 있는 일은 없고, 그저 무사히 잘 되기만을 바라는 방법밖에 없다. 이렇게 불안불안하게 코드..

지난 포스팅 : JS #7. 비동기성: 지금과 나중 지난 포스팅에서 비동기가 무엇인지, 단일 스레드 방식의 이벤트 큐가 무엇인지, 동시성 패턴 등등에 대해서 알아 보았다. 함수 안의 문은 예측 가능한 순서대로 (컴파일러 상위 수준에서) 실행되지만 함수 단위의 실행순서는 이벤트(비동기 함수 호출)에 따라 달라질 수 있다. 어떤 함수든 콜백(Callback) 역할을 한다. 왜냐하면 큐에서 대기 중인 코드가 처리되자마자 본 프로그램으로 '되돌아올' 목적지이기 때문이다. 콜백은 자바스크립트에서 비동기성을 관리하는 가장 일반적인 기법이자, 자바스크립트의 가장 기본적인 비동기 패턴이다. 물론 콜백에도 단점이 있고 이 단점을 보완하기 위해 새로운 개념들이 나오게 되었으나, 그 이전에 콜백의 실체를 정확하게 아는 것은..

자바스크립트 배열을 다룰 때 자주 사용하는 메서드들을 한 번 정리 해 보고자 한다. 실제로 지난 일주일동안 자바스크립트 기반 알고리즘 문제를 풀 때나, 프론트엔드 로직을 구현하는 기술과제를 할 때 많이 찾아보고 많이 사용했던 메서드들을 위주로 살펴보고자 한다. forEach 배열의 각 원소별로 순서대로 돌면서 함수를 실행한다. const array1 = ['a', 'b', 'c']; array1.forEach(element => console.log(element)); // expected output: "a" // expected output: "b" // expected output: "c" 참고로 forEach 메서드는 Object에서는 사용할 수 없지만 Map이나 Set 객체에서도 사용할 수가 있..

자바스크립트에서 일정 시간 동안 발생하는 프로그램의 움직임을 어떻게 표현하고 나타낼 것인지에 대해 그동안 많은 연구가 있었다. 오늘은 그러한 연구의 결과 중 하나인 비동기성(Asynchrony)에 대해서 알아보고자 한다. 프로그램에서 '지금'에 해당하는 부분 그리고 '나중'에 해당하는 부분 사이의 관계가 바로 비동기 프로그래밍의 핵심이다. 자바스크립트 프로그램은 .js 파일 하나로도 작성될 수 있지만 보통은 여러 개의 덩이(chunk), 곧 '지금' 실행 중인 프로그램 덩이 하나 + '나중'에 실행할 프로그램 덩이들로 구성된다. 가장 일반적인 프로그램 덩이 단위는 함수이다. 여기서 명심해야 할 부분은 프로그램은 '지금'과 '나중' 사이에 중단되지 않으며 이 때 작업이 비동기적으로 처리되어 단지 '지금' ..

오늘은 작동 위임에 대해서 정리해 보려고 한다. 이 책 Part 1의 마지막 챕터이다. 지난 프로토타입 에 대한 포스팅에서 프로토타입이 어떠한 역할을 하는지에 대해서 자세하게 알아보았다. 한 마디로 요약을 해 보면 [[Prototype]] 체계는 한 객체가 다른 객체를 참조하기 위한 내부 링크이며, 엔진은 이 링크를 따라 연결된 객체에 특정 프로퍼티/메서드가 있는지를 체크한다. 이와 같이 자바스크립트의 무한한 가능성을 이끌어 낼 가장 중요한 핵심 기능이면서 실질적인 체계는 전적으로 '객체를 다른 객체와 연결하는 것'에서 비롯된다. 위임 지향 디자인 [[Prototype]]의 사용방법을 쉽게 이해하기 위해서는 [[Prototype]]이 클래스와 근본적으로 다른 디자인 패턴이라는 사실을 인지해야 하며, 기존..

자바스크립트 객체와 클래스에 대한 포스팅에 이어 이번에는 프로토타입에 대해서 정리해 보려고 한다. [[Prototype]] 자바스크립트 객체는 [[Prototype]]이라는 내부 프로퍼티가 있고 다른 객체를 참조하는 단순 레퍼런스로 사용한다. [[Prototype]]은 어디에 쓰이는 걸까? 객체 프로퍼티를 참조할 때(myObject.a), 객체는 기본적으로 객체 자체에 해당 프로퍼티가 있는지를 찾고, 만약 있다면 그 프로퍼티를 사용한다. 하지만 만약에 myObject에 a라는 프로퍼티가 없다면 그 다음에는 이 객체의 [[Prototype]] 링크다. 두 번째 예제에서 connectObject는 anotherObject와 [[Prototype]]이 링크되었다. 분명히 connectObject.a 라는 프로..

이번 포스팅에서는 자바스크립트 클래스에 대해서 정리해 보려고 한다. 클래스 이론 클래스와 상속은 특정 형태의 코드와 구조를 형성하며 실생활 영역의 문제를 소프트웨어로 모델링 하기 위한 방법이다. 객체 지향 또는 클래스 지향 프로그래밍에서 데이터는 자신을 기반으로 하는 실행되는 작동(behavior)과 연관되므로 데이터와 작동을 함께 잘 감싸는(캡슐화) 것이 올바른 설계라고 강조한다. 예를 들어, 일련의 문자들은 보통 String이라는 단어를 나타낸다. 여기서 데이터는 문자들인데, 우리는 이 데이터를 가지고 원하는 작업을 하는 것이 관심사이므로 데이터에 적용 가능한 작동들을 모두 String 클래스의 메서드로 설계한다. 그래서 어떤 문자열이 주어지더라도 데이터와 작동이 잘 포장된 String 클래스의 인스..

이번 포스팅에서는 자바스크립트 객체에 대해서 공부한 내용을 정리해 보려고 한다. 객체 타입 객체는 선언적(Declarative, 또는 Literal) 형식과 생성자 형식, 두 가지로 정의한다. 그리고 객체는 언어 타입(Language Types)이라 불리는 7개의 주요 타입 중 하나를 가지고 있다. null undefined boolean number string object symbol(ES6에서 추가) 참고로 여기에서 단순 원시타입(Simple Primitives) 5개(string, number, boolean, null, undefined)는 객체가 아니다. 그리고 복합 원시타입(Complex Primitives)이라는 독특한 객체 하위 타입도 존재한다. 예를 들면 function 타입이 여기에 ..