N

리스트 순회 ES5 까지는 기본적인 for, for...in, forEach 메소드 등 다양한 방법으로 순회가능했다. ES6 에서부터는 for...of 문으로 array, set, map, 문자열을 간단하게 순회할 수 있다. 순회 가능한 자료구조를 이터러블로 통일하여 for...of, 스프레드 문법([...arr]), 구조 분해 할당의 대상으로 사용할 수 있도록 일원화했다. 이터러블 프로토콜(iterable protocol) Well-know Symbol(JS가 기본 제공하는 빌트인 심볼 값)인 Symbol.iterator를 프로퍼티 키로 사용한 메소드를 직접 구현하거나 프로토타입 체인을 통해 상속받은 Symbol.iterator 메소드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환한다. 이러..

일급 객체 다음의 조건을 만족하는 객체 무명의 리터럴로 생성 가능(런타임에 생성 가능) 변수나 자료구조에 저장 가능 함수의 매개변수에 전달 가능 함수의 반환값으로 사용 가능 일급 함수 JS에서 함수는 일급객체다. 함수를 객체와 동일하게 사용할 수 있다. 객체는 값이므로 함수는 값과 동일하게 취급할 수 있다. 따라서 함수는 값을 사용할 수 있는 곳(변수 할당문, 객체의 프로퍼티 값, 배열의 요소, 함수 호출의 인수, 함수 반환문)이라면 어디서든지 리터럴로 정의할 수 있으며, 런타임에 함수 객체로 평가된다. 특징 일반 객체와 같이 함수의 매개변수에 전달 가능 함수의 반환값으로 사용 가능 일반 객체는 호출할 수 없지만, 함수 객체는 호출할 수 있다. 일반 객체에는 없는 함수 고유의 프로퍼티를 소유한다.(arg..

HTML Hyper Text MarUp Language 로직이 실행되지 않기 때문에 HTML은 언어가 아니다.(계산이 되지 않는다!) 스타일의 수정 사항이 발생했을 때, 각각의 파일을 수정해야 했기 때문에 오랜 시간이 걸렸다. 그러나 CSS를 통해 HTML의 스타일을 한꺼번에 수정할 수 있다.(HTML 파일과 CSS 파일을 분리하여 수정 가능) HTML5 영상과 음성을 처리하기 위한 멀티미디어 요소가 추가되었다.(audio, video, canvas) 구조적인 요소가 추가되었다.(header, nav, article, section 등..) 표현을 담당하던 태그 대신 의미를 담은 태그가 추가되었다. CSS HTML에 스타일을 추가하여 더욱 더 동적이고 멋진(?) 웹을 표현할 수 있다. HTML은 문서 구..

그래프(Graph) 정점과 정점 사이를 연결하는 간선으로 이뤄진 비선형 자료구조. 정점 집합과 간선 집합으로 표현할 수 있다. 지하철 노선도나 인물 관계도를 떠올리면 쉽게 이해할 수 있다. 정점은 여러 개의 간선을 가질 수 있다. 방향 그래프와 무방향 그래프가 존재. 간선은 가중치를 가질 수 있다. 사이클이 발생할 수 있다. JS에서 인접 행렬, 인접 리스트로 그래프를 표현할 수 있다. 무방향 그래프 간선으로 이어진 정점끼리는 양방향으로 이동이 가능. ex) (A, B) == (B, A) 방향 그래프 간선에 방향성이 존재하는 그래프. 양방향으로 갈 수 있어도 와 는 다른 간선으로 취급된다. 코드 // 인접 행렬 const graph = Array.from(Array(5), () => Array(5).fi..

해시 테이블(Hash Table) 키와 값을 받아 키를 해싱(Hashing)하여 나온 index 값을 저장하는 선형 자료구조. 삽입은 O(1)이며, 키를 알고 있다면 삭제와 탐색도 O(1)로 수행한다. 해시 함수를 통해 키를 특정 범위 내 숫자로 변경한다. 키로 "name"이 주어진다면, 컴퓨터에서는 해시 함수를 통해 1239593로 바꿔 데이터를 저장한다. 즉, 사람의 입장에서는 name이지만 컴퓨터의 입장에서는 1239539가 된다. value가 저장되는 공간을 bucket이라 한다. JavaScript에서 객체(Object)가 해시 테이블에 해당한다. 해시 충돌(Hash Collision) 만약 해시 함수의 결과가 기존에 있던 값과 같게 된다면 충돌이 발생한다. 이를 해결하기 위해서 "분리 연결법"..

큐(Queue) First In First Out(FIFO)라는 개념을 가진 선형 자료구조. 먼저 들어간 데이터가 먼저 출력된다. 식당에서 대기번호 표를 받았을 때를 생각하면 쉽게 이해할 수 있다. 큐의 가장 앞에 있는 원소의 인덱스(위치)는 front로 나타내며, 가장 뒤에 있는 원소의 인덱스(위치)는 rear라고 한다. 데이터 추가 enqueue 큐의 가장 마지막에 데이터를 추가한다. 데이터를 추가할수록 rear 값이 1 증가한다. 데이터 삭제 dequeue 큐의 맨 앞에 있는 원소(front)가 삭제된다. 데이터 삭제를 하면 front 값이 1 증가한다. 코드 JS에서는 큐가 제공되지 않기 때문에 배열 형태로 큐를 구현한다. class Queue { constructor() { this.queue ..

스택(Stack) Last In First Out(LIFO) 개념을 가진 선형 자료구조 프링글스 과자를 연상하자! 가장 먼저 들어간 과자는 바닥에 위치하며, 가장 마지막에 들어간 과자는 맨 위에 있다. 그렇기 때문에 가장 마지막에 들어간 과자부터 차례대로 먹을 수 있다! 스택은 배열이나 연결 리스트로 구현 가능하다. JS의 배열은 기본적으로 스택으로 구현된다.(push(), pop() 존재) 데이터 추가 push는 스택에 데이터를 추가한다. 배열의 가장 마지막에 데이터를 저장한다. 데이터 삭제 pop은 스택의 가장 마지막 데이터를 삭제한다. 코드 const stack = []; stack.push(1); stack.push(2); stack.push(3); console.log(stack); stack...

Doubly Linked List 양방향으로 이어지는 연결 리스트. Singly Linked List보다 메모리 크기가 조금 더 크다.(이전 노드를 가리키는 메모리가 있어야 하기 때문이다!) 데이터 추가 31을 6과 2 사이에 추가해보자. 우선 새롭게 만든 31의 다음 노드를 6의 다음 노드인 2로 연결한다. 2의 이전 노드는 31을 가리키도록 한다. 6의 다음 노드를 31로 연결한다. 31의 이전 노드를 6으로 연결한다. 단방향 연결 리스트보다 복잡하게 느껴지겠지만, 이해한다면 쉽게 다룰 수 있다! 데이터 삭제 6을 지웠을 경우다. 31의 이전 노드를 6의 이전 노드인 1을 가리키도록 한다. 1의 다음 노드를 31로 바꾼다. 6을 삭제한다. 코드 class Node { constructor(value)..