003_코어 자바스크립트 챌린지_1

@코어 자바스크립트

 

시작하기 앞서

 엘리스 AI 트랙이 끝난지도 벌써 보름이 넘었다. 지난 6개월을 돌아보자면 프론트엔드, 백엔드, 데이터분석, AI까지 정말 방대한 분야를 엘리스 AI 트랙을 수강하며 접했던 시간이었다. 하지만 이렇게 다양한 분야를 짧은 시간 듣다보니 깊이있는 지식을 얻어가기엔 다소 부족한 시간이 아니었나 싶다. 특히 내가 가고자 하는 방향인 프론트엔드 파트에 대해 얼마나 학습했나 돌아본다면, '어찌저찌 프로젝트에서 기여한 수준' 정도에 머물 정도만큼 학습하지 않았나 싶다. 그래서 이 챌린지를 시작하기로 했다! 프론트엔드의 가장 근간이 되는 자바스크립트부터 제대로 학습하는 것부터 시작해야 이후의 다른 기술들을 배우는데 무리 없이 진행할 수 있다는 생각이 들었고, 늘어지지 않기 위해 '챌린지' 를 붙여 책을 읽고 학습하고자 한다. 

---

제 1챕터: 데이터 타입

01. 데이터 타입

  자바스크립트의 데이터 타입에는 크게 두 가지가 있다. 바로 기본형과 참조형이다.

자바스크립트 데이터 타입

1. 기본형 (primitive type)

• 기본형은 불변성(immutablility) 를 띈다.
• 기본형은 값이 담긴 주솟값을 바로 복제한다.
• 기본형에는 숫자(number), 문자열(string), 불리언(boolean), null, undefined 등이 있으며, ES6에서 심볼(symbol)이 추가됐다.

2. 참조형 (reference type)

• 참조형은 객체(object), 배열(array), 함수(function), 날짜(date), 정규표현식(RegExp) 등과 ES6에서 추가된 Map, WeakMap, Set, WeakSet 등이 있다.
• 참조형은 값이 담긴 주솟값들로 이루어진 묶음을 가리키는 주솟값을 복제한다.

 

가벼운 용어 정리

Symbol

• 심볼은 변경 불가능한 원시 타입의 값이며, 다른 값과 중복되지 않는 고유한 값이다.
• 심볼값은 충돌 위험이 없는 오브젝트의 유일한 프로퍼티 키를 만들기 위해 사용할 수 있다.

const symbolA = Symbol('symbol')
const symbolB = Symbol('symbol')

console.log(symbolA === symbolB)  // false​

Map

• 키가 있는 데이터를 저장한다는 점에서 객체와 유사하지만, 키에 다양한 자료형을 허용한다는 점에서 객체와 차이가 있다.
• 또한 기존 객체와는 다르게 메소드만을 이용해 값을 넣고 뺀다. (get, set)
• key들은 중복될 수 없다 (key 하나에 하나의 value만 적용 가능)
• key로 사용할 수 있는 데이터형: string, symbol(ES6), object, function /  number는 사용 불가!
• 맵 객체는 객체의 프로퍼티를 자주 변경해야할 때 빛을 발한다. 메소드 이름들이 예측가능해 동작이 명확하고, 기존 객체와 달리 순회도 쉽게 이루어져 데이터를 조작하기 적합하기 때문이다.

let john = new Map();

// set으로 맵 객체에 삽입
john.set("id", 0);
john.set("이름", "존");
john.set("전공", "한국학");
john.set("나이", 25);

// 이차원 배열로 넘겨주는 것도 가능합니다
let michael = new Map([
    ["id", 1],
    ["이름", "마이클"],
    ["전공", "경영학"],
    ["나이", 29]
])

// get으로 맵 객체 조회
john.get("이름"); // "존"

// delete로 삭제
john.delete("나이"); // 삭제가 성공하면 true를 반환

// clear로 맵 안의 프로퍼티 전부삭제
john.clear();

Set

• Set 객체는 자료형에 관계 없이 원시 값과 객체 참조 모두 유일한 값을 저장할 수 있다.
• 즉, 어떤 값은 그 Set 콜렉션 내에서 유일합니다.
• value들로 이루어진 컬렉션(집합)이다.
• Array와 다르게 Set은 같은 value를 포함할 수 없다.

let set = new Set();

let john = { name: "John"};
let johnAge = { age: 15 };

set.add(john);
set.add(johnAge);

alert( set.size ); // 2

WeakMap

• 키로 쓰인 객체가 가비지 컬렉션의 대상이 된다. (메모리 삭제 가능)

let john = { name: "John" };

let weakMap = new WeakMap();
weakMap.set(john, "...");

john = null;  // 참조를 덮어씀

// john을 나타내는 객체가 메모리에서 지워짐

WeakSet

• 셋과 유사하지만 객체만 저장할 수 있다는 점이 다르다. 원시값은 저장할 수 없다.
• 위크셋에 저장된 객체가 도달 불가능한 상태가 되면 해당 객체는 메모리에서 삭제된다.

let visitedSet = new WeakSet();

let john = { name: "John" };
let pete = { name: "Pete" };
let mary = { name: "Mary" };

visitedSet.add(john); // John이 사이트를 방문합니다.
visitedSet.add(pete); // 이어서 Pete가 사이트를 방문합니다.
visitedSet.add(john); // 이어서 John이 다시 사이트를 방문합니다.

// visitedSet엔 두 명의 사용자가 저장될 겁니다.

// John의 방문 여부를 확인해보겠습니다.
alert(visitedSet.has(john)); // true

// Mary의 방문 여부를 확인해보겠습니다.
alert(visitedSet.has(mary)); // false

john = null;

// visitedSet에서 john을 나타내는 객체가 자동으로 삭제됩니다.

 

02. 데이터 타입에 관한 배경지식

• bit : 0 또는 1만 표현할 수 있는 하나의 메모리 조각
• 각 비트는 고유한 식별자(unique identifier)를 통해 위치를 확인할 수 있지만 비트 단위로 위치를 확인하는 것은 비효율적이다.
• 그래서 8개의 비트로 구성된 byte라는 단위가 생겼다.
• C/C++, Java 등의 정적 타입(Static type) 언어는 메모리의 낭비를 최소화하기 위해 데이터 타입별로 2byte, 4byte 등으로 나누어 정해놓았다. (-32768 ~ +32767의 숫자만 허용하는 2바이트 크기의 정수형 타입(short) / 이외의 숫자는 4바이트의 정수형 타입 (int) )
• 자바스크립트는 과거보다 월등히 커진 메모리 용량으로 메모리 관리에 대한 압박에서 상대적으로 자유로운 편이다.
• 모든 데이터는 바이트 단위의 식별자 (메모리 주솟값, Memory Address)를 통해 서로 구분하고 연결할 수 있다.
• 변수 = 데이터 / 식별자 = 변수명

 

03. 변수 선언과 데이터 할당

변수 선언

• 변수는 변경 가능한 데이터가 담길 수 있는 공간 또는 그릇이다.

let a;

주소	...	1002	1003	1004	1005	...
데이터				이름 : a 값 :

• 위와 같이 명령을 받은 컴퓨터는 메모리에 비어있는 공간 하나를 할당한다. 이 공간의 이름(식별자) 는 a이다.

let a; // 변수 선언
a = "abc"; // 변수 a에 데이터 할당

a = "abcdef"; // 변수 a 데이터에 def 를 추가해 재할당

변수 영역	주소	...	1002	1003	1004	1005	...
	데이터				이름 : a 처음 값 : @5004 이후 값 : @5005
데이터 영역	주소	...	5002	5003	5004	5005	...
	데이터				'abc'	'abcdef'

• 변수를 선언하고 데이터를 할당하면 다음과 같이 변수와 데이터를 따로 저장한다.
• 이와 같이 하는 이유는 데이터 변환을 자유롭게 함과 동시에 메모리를 더욱 효율적으로 관리하기 위해서이다.
• 해당 공간이 메모리 상의 가장 마지막에 있다면 뒤쪽으로 늘려 데이터 크기만큼 공간을 늘리면 되지만, 중간에 있는 데이터를 늘려야 하는 상황이라면 해당 공간보다 뒤에 저장된 데이터들을 전부 뒤로 옮기고 이동한 주소를 각 식별자에 다시 연결하는 작업을 해야한다.
• 이렇게 되면 컴퓨터가 처리해야할 연산이 많아지고 비효율적이기 때문에 변수와 데이터를 별도의 공간으로 나누어 저장한다.