본문 바로가기

Study/JavaScript

(23)
OOP | Prototype, Class What is Prototype? Prototype의 사전적 의미 프로토타입이라는 단어 자체를 살펴보자. prototype은 "원형"이라는 뜻을 가지고 있다. 즉 완성품이 아니라, 초기에 대략적인 디자인이나 기능을 구현해 놓은 모델을 말한다. a first, typical or preliminary model of something, especially a machine, from which other forms are developed or copied. ex) "Mercedes is prototyping a car sunroof which changes from clear to tinted" JS에서 Prototype의 의미 JavaScript에서 Prototype이란, 어떤 객체가 다른 객체가 가지..
Scope, Execution context, Closure Before Start "scope"란 범위, 영역을 뜻하는 용어이다. 이번 chapter에서는 scope가 어떤 범위와 영역을 말하는 것인지부터 호이스팅, 클로저, 실행 컨텍스트의 개념 등에 대해 함께 다루어 볼 것이다. 이 개념들은 scope라는 개념을 필요로 한다는 점에서 공통된 속성을 가지고 있기 때문이다. +) global scope은 코드의 전체 범위, 즉 어떤 변수를 전역에서 참조할 수 있음을 말한다. +) 반면 local scope은 어떤 변수를 특정한 지역 내에서만 참조할 수 있음을 말한다. 이 때 특정한 지역은 { 코드 블럭 }또는 함수를 말한다. 코드 블럭은 중괄호를 사용하는 대부분의 문(statement)을 말하는데, if( ) { 조건문 }, for( ) { 반복문 } 등이 있다...
Asynchronous | callBack, promise, async & await What is Asynchronous? JavaScript 언어 자체는 single thread 언어이지만, JS 엔진의 Event Loop와 Runtime Environment(코드가 실행되는 환경)의 협업을 통해, 한 번에 여러 줄의 코드를 실행하는 것이 가능한 것처럼 동작했다. setTimeout과 같은 비동기적(asynchronous)인 일을 수행해야 할 때 이런 협업이 필요하다. 비동기적인 일이란 정확히 무엇일까? Asynchronous meaning in CS is a specific operation begins upon receipt of an indication (signal) that the preceding operation has been completed. => 이전 작업이 완료되..
Call stack & Task que Before Start 어플리케이션을 실행시키면, 메모리에는 이 어플리케이션을 위한 저장 공간이 할당된다. 그리고 현재 실행 중인 어플리케이션, 즉 메모리를 할당받은 어플리케이션을 프로세스(process)라고 한다. 이 저장 공간은 4개로 나누어 지는데, 다음과 같다. code | 우리가 작성한 source code가 저장됨 data | 전역 변수(global var)에 저장된 데이터와 primitive type의 data, 즉 정적 타입(static type)의 데이터가 저장됨 stack | 지역 변수(local var)에 저장된 데이터가 저장됨 heap | 객체 타입(object type), 즉 동적 타입(dynamict type)의 데이터가 저장됨 +) 지역 변수는 코드 블럭 내부에서 선언된 변수를..
Modularization Before Start encapsulation(캡슐화)란 외부에서 접근 가능한 함수를 통해 객체의 상태(state)를 update하는 것인데, Javascript의 파일 단위로도 비슷한 기능을 수행할 수 있다. 즉, 어떤 js 파일에서 선언한 변수나 함수 등을 다른 파일에서 그대로 이용하는 것이 가능하다. 이를 "modularization"이라고 부른다. How to modularization? HTML html 내부에 script 태그를 작성해서 js파일을 html에 포함시킬 수 있다. 이 때 여러 개의 js파일이 포함되어 있다면, 나중에 분석(parse)된 js 파일이 먼저 parse된 js 파일 내부에 접근할 수 있다. 즉, 위의 예제 코드의 main.js 파일에서 별다른 키워드 없이도 count..
Iterable Before Start iterable이란 단어는 '순회가 가능한'의 의미를 갖는다. 이 때 순회라는 것은 '여러 곳을 돌아다님'의 의미를 갖는다. 즉 여러 곳을 돌아다니는 것이 가능하다는 의미가 된다. 이터러블은 복합데이터가 가지고 있는 데이터 하나, 하나를 돌아다닌다. 이 데이터를 하나씩 방문하면서 어떤 처리를 할 수 있다면 iterable이라고 할 수 있을 것 같다는 느낌이 든다. '데이터를 하나씩 방문하면서 어떤 처리를 한다'는 말을 들었을 때, 각 element에 콜백 함수를 실행하는 forEach나, 각 element가 어떤 조건이 맞는지 아닌지를 확인하고, 조건에 맞는 데이터만으로 이루어진 새로운 배열을 반환하는 filter 등 다양한 method가 떠올랐다. 그렇다면 배열과 맵, 셋은 it..
Map & Set Before Start Array와 마찬가지로, Map과 Set은 data structure 중 하나이다. 즉 map과 set이 서로 관계를 갖는 데이터 values와, 데이터에 사용되는 함수의 집합임을 의미한다. Set How to create Set? constructor function let set = new Set( iterable ) Set as a data structure Data 사이의 관계 set은 array와 달리 index가 없기 때문에, 데이터 간의 순서가 없다. 또 데이터의 중복을 허용하지 않는다. 이미 존재하는 데이터를 set에 추가하려고 하면 아무일도 일어나지 않는다. 배열의 중복을 제거해야 할 때에도 set을 자주 사용한다. Data에 자주 사용되는 functions let..
Array Before Start Data의 type에는 primitive와 object이 있다. 지금부터 살펴볼 Array의 data type은 object이다. 즉 Array는 다양한 Data를 하나로 묶어 보관하는 복합데이터라는 뜻이다. 그런 의미(복합데이터)에서 함수도 object라고 할 수 있는 것이다. 지금부터는 Array가 data type으로써가 아니라, 데이터 구조(data structure)로써 어떤 의미를 갖는지 알아볼 것이다. data type과 data structure는 다른 개념이다. data type이 단일 데이터인지, 복합데이터인지에 따라 primitive와 object로 나누어졌다면, data structure는 object(복합 데이터)를 어떻게 collect 했느냐에 따라 나누어..