처음부터 차근차근

Set과 Map의 특징 Map과 Set 모두 Hash를 통해 구현합니다. 두 가지의 자료구조 특징 중 하나는 우리가 자주 사용하는 Array나 Object에 비해 데이터 삽입, 삭제, 조회를 할 경우 시간복잡도가 낮다는 점이 장점입니다. Optimizing hash tables: hiding the hash code · V8 ECMAScript 2015 introduced several new data structures such as Map, Set, WeakSet, and WeakMap, all of which use hash tables under the hood. This post details the recent improvements in how V8 v6.3+ stores the keys i..

Prototype의 사전적 의미 prototype : 무언가 제품을 만드는 과정에서 시험용으로 미리 만들어보는 물건을 의미. ※ 시제품이나, Test를 진행하기 위한 Prototype 제작 등 Javascript에서 Prototype 의미 자바스크립트는 프로토타입 기반 언어이다. 프로토타입 기반 언어에서는 어떤 객체를 원형으로 삼고 이를 복제(참조)함으로써 상속과 비슷한 효과를 얻는다. ES5까지 자바스크립트는 Class라는 개념이 없었다. 기본적으로 프로토타입 언어이기 때문에 어떠한 Object를 원형(시제품)으로 삼고 이를 복제함으로써 Class와 비슷한 효과를 얻었다. 먼저 예제와 도식을 보자. var instance = new Constructor(); 어떤 생성자 함수(Constructor)를 ..

1. 숫자 타입 Javascript는 독특하게 하나의 숫자 타입만 존재한다. 정수, 실수, 2진수, 8진수, 16진수 리터럴은 모두 메모리에 배정밀도 64비트 부동소수점 형식으로 2진수로 저장된다. Javascript는 2진수, 8진수, 16진수를 표현하기 위한 데이터 타입을 제공하지 않기 때문에 이들 값을 참조하면 모두 10진수로 해석된다. var integer = 10; // 정수 var double = 10.12; // 실수 var negative = -20; // 음의 정수 var binary = 0b01000001; // 2진수, 65 var octal = 0o101; // 8진수, 65 var hex = 0x41; // 16진수, 65 console.log(binary === octal); /..

1. 값 값(value) : 식(표현식)이 평되어 생성된 결과를 말한다. // 변수에는 10 + 20이 평가되어 생성된 숫자 값 30이 할당된다. var sum = 10 + 20; 모든 값은 데이터 타입을 가지며, 메모리에 bit의 나열로 저장된다. 변수 : 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름. 따라서, 변수에 할당되는 것은 값이다. 2. 리터럴 리터럴 : 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법(notation)을 말한다. 위 그림의 3은 단순한 아라비아 숫자가 아니라 숫자 리터럴이다. 사람이 이해할 수 있는 아라비아 숫자를 사용해 숫자 리터럴 3을 코드에 기술하면, 자바스크립트 엔진은 이를 평가해 숫자..

1. 변수는 무엇인가? 왜 필요한가?? 애플리케이션은 데이터를 입력(input)받아 처리하고, 그 결과를 출력(output)하는 것이 전부다. 그렇다면 변수란?? 프로그래밍 언어에서 데이터를 관리하기 위한 핵심 개념 변수 : 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말한다. → 간단히 말하자면, 변수는 값의 위치를 가리키는 상징적인 이름 변수 이름(변수명, 식별자) : 메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름 변수값 : 변수에 저장된 값 할당(assignment 대입, 저장) : 변수에 값을 저장하는 것 2. 식별자 식별자(변수 이름) : 어떤 값을 구별해서 식별할 수 있는 고유한 이름 값은 메모리 공간에 저장 → 식별자는 메모리..

자바스크립트 동작 구조 먼저 JS의 전체적인 동작 구조를 살펴보자. 자바스크립트를 실행하기 위해서는 JS 엔진이 필요하며, 대표적으로는 Chrome의 V8엔진이 있다. 아래 그림은 자바스크립트를 실행할 수 있게 해 주는 V8 엔진을 간략하게 표현한 그림이다. 자바스크립트 엔진 자체는 싱글 스레드로 구성되어 있으며, Memory Heap과 Call Stack으로 구성되어 있다. Memory Heap : 메모리 할당이 일어나는 장소(Ex 선언한 변수, 함수 등이 담겨져 있다) Call Stack : 코드 실행에 따라 스택이 하나씩 쌓이는 장소 JS는 콜 스텍을 통해 명령문을 실행하는데, 하나의 스레드에서 하나의 콜 스텍으로 모든 명령을 순차적으로 실행하기 때문에 싱글 스레드 언어라고 볼 수 있다. 즉, 한 ..

Closure에 대한 정의 : A closure is the combination of a function and the lexical environment within which that function was declared(클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합니다.) - MDN 이걸 알기 위해서는 함수가 선언된 렉시컬 환경에 대하여 자세하게 알 필요가 있다. 아래의 예시를 보자. const x = 1; function outerFunc() { const x = 10; function innerFunc() { // x는 어디서 참조할까요?? // 함수가 선언된 렉시컬 환경!!! // 함수가 선언될 당시의 외부 변수 등의 정보! console.log(x); // 10 } innerFu..

다른 언어에서도 많이 쓰이는 Class란 무엇인가?? Class Class : 객체 지향 프로그래밍(OOP)에서 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 일종의 틀(template)이다. (Wiki 백과) 간단히 설명하면, Class는 학교에서 다양한 종류의 책상을 만드는 설계도와 비슷하다. Class로 만들어지는 Instance?? instance는 이 설계도를 보고 만들어지는 실제 책상이라고 생각할 수 있다. 결론 : 객체 지향 프로그래밍에서 Class는 객체를 찍어 내기 위한 틀이다. 그렇다면 Class를 쓰는 이유는?? 빠르고, 정확하고, 다량으로 객체를 생성 할 수 있기 때문이다. 아래 예시를 보자. // 클래스라는 설계도를 만들어봅시다. class Person { // 우리는 사람이..

DOM이란?? DOM : Document Object Modeling 이것만 가지고는 이해하기 힘들다. DOM의 기본 개념부터 알아보자. DOM의 기본 개념 DOM을 이해하기 위해서는, 웹 브라우저가 어떻게 동작하는지 알아야 한다. 1. Javascript가 왜 생겼는가?? - 브라우저에서 쓰려고 만들어진 언어 - 본연의 역할 : 웹 페이지를 동적으로 만들기 위해! (클릭하면 버튼이 이동한다던가, 리스트가 변한다던가..) → 즉, HTML문서를 조작해서 생명력을 불어넣어주기 위해 만들어진 언어. 2. 웹 페이지가 뜨는 과정 1) 사용자가 브라우저에 어떠한 주소를 입력한다. (여기서 사용자 = 브라우저 = 클라이언트, 같은 의미로 생각하면 된다) → 클라이언트가 서버에게 요청(request) 2) HTML..

Callback(콜백함수)이란?? 프로그래밍에서 Callback 또는 Callback function이란 다른 코드의 인수로서 넘겨주는 실행 가능한 코드를 말한다. 콜백을 넘겨받은 코드는 이 콜백을 필요에 따라 즉시 실행할 수도 있고, 나중에 실행할 수도 있다. 간단한 예시로, setTimeout, 혹은 forEach 메소드를 통해 알아보자. // setTimeout setTimeout(function() { console.log("Hello, world!"); }, 1000); // forEach const numbers = [1, 2, 3, 4, 5]; numbers.forEach(function(number) { console.log(number); }); 여기서 봤을 때 Callback은 Call..