목차1. JSON2. JSON.stringify3. JSON.parse1. JSONJSON(JavaScript Object Notation)은 값, 객체를 나타내주는 범용 포맷이다. 객체를 어딘가로 전송하거나 출력할 때, 객체를 문자열로 전환해야한다.이 작업을 객체가 달라질 때마다 toString()으로 하기에는 너무 까다로운데, 이럴 때 JSON 관련 메서드를 사용해서 작업할 수 있다.JSON.stringify : 객체 → JSON 변환JSON.parse : JSON → 객체 변환 2. JSON.stringify JSON.stringify() 메서드에 인자로 객체/원시값을 넘기면 변환된 문자열을 얻을 수 있다.이 문자열은 JSON-encoded, serialized, stringified, marsha..

목차1. 구조 분해 할당2. 배열 분해3. 객체 분해4. 중첩 구조 분해 (nested destructuring)5. 함수와 구조 분해 5-1. 함수 매개변수 5-2. 함수 반환값6. 예시1. 구조 분해 할당함수에 객체/배열에 저장된 데이터의 일부만 전달하고 싶을 경우, 배열을 변수로 분해하여 전달할 수 있다.혹은 함수의 매개변수가 여러개이거나, 매개변수 기본값이 필요할 때도 구조 분해를 할 수 있다. 구조 분해 할당 (destructuring assignment)은객체/배열을 속성을 해체하여 변수에 담을 수 있게 하는 문법(표현식)이다. 해체한다고 해서 원본 객체/배열이 수정되거나 파괴되는 것은 아니다.원본을 복사한 "이후"에 분해를 하는 것으로,배열의 요소를 직접 변수에 하나하나 할당하는 ..

목차1. 순회(iteration)2. Object.keys, values, entries3. 객체에 배열 전용 메서드 사용하는 법1. 순회 (iteration)Map, Set, Array(iterable 객체)에서 사용하는 메서드 keys(), values(), entries()와일반 객체(iterable 아님)에서 사용하는 메서드 keys(), values(), entries()는 문법 차이가 있다.Object.keys(obj) : 객체의 키만 담은 배열 반환Object.values(obj) : 객체의 값만 담은 배열 반환Object.entries(obj) : [키, 값] 쌍을 담은 배열을 반환 2. Object.keys, values, entries일반 객체와 iterable 객체의 메서드들의 차이를..

목차1. 위크맵과 위크셋2. 위크맵 (WeekMap) 2-1. 맵과 위크맵의 차이 (위크맵의 특징) 2-2. 위크맵을 사용하는 경우3. 위크셋 (WeekSet)1. 위크맵과 위크셋객체의 프로퍼티, 배열의 요소, 맵과 셋의 구성 요소들은 가비지컬렉터에 의해 삭제되지 않는다.자료구조가 남아있는 동안은 그 요소도 도달 가능한 값으로 취급되기 때문이다. 위크맵과 위크셋을 사용하면 키로 쓰인 객체가 가비지 컬렉션의 대상이 된다. 2. 위크맵 (WeekMap)1. 맵과 위크맵의 차이 (위크맵의 특징)1. 위크맵의 키는 반드시 객체여야 한다. (원시값은 위크맵의 키가 될 수 없음)let weakMap = new WeakMap();let obj = {};weakMap.set(obj, "ok"); // 정상 ..

목차1. 맵과 셋의 등장 배경2. 맵 (map) 2-1. 주요 메서드/프로퍼티 2-2. map의 동작 특징 2-3. 맵의 요소에 반복 작업하는 메서드 : keys(), values(), entries() 2-4. 객체 ↔ 맵 : Object.entries, Object.fromEntries3. 셋 (set) 3-1. 주요 메서드 3-2. 셋의 요소에 반복 작업하는 메서드 : keys(), values(), entries()1. 맵과 셋의 등장 배경지금까지 자료구조 객체와 배열을 보았다.하지만 현실 세계를 반영하기엔 객체와 배열로 부족해서 map과 set이 등장한다. 간단하게 차이점을 보자.객체 : 키(key)가 있는 컬렉션을 저장배열 : 순서가 있는 컬렉션을 저장맵(map..

목차1. 스코프 (Scope) 1-1. 스코프란 1-2. 렉시컬 스코프 1-3. 스코프 체인2. 호이스팅 (Hoisting)3. JS엔진이 스코프와 호이스팅을 구현하는 방식 3-1. 실행 컨텍스트 구조 간단하게 보기 3-2. 실행 컨텍스트에서 3-3. 메모리 구조에서 3-4. 실행 컨텍스트 + 메모리 구조 함께 보기 1. 실행 컨텍스트 구조 간단하게2. 실행 컨텍스트에서3. 메모리 구조에서4. 실행 컨텍스트 + 메모리 구조 함께 보기1. 스코프 (Scope)1. 스코프란스코프는 변수나 매개변수에 접근할 수 있는 범위이다. 스코프 종류전역 스코프 (global scope)함수 바깥/ 최상위에서 선언된 변수로, 어디서든 접근 가능하다.전역 오염 문제 발생 가능하다.함수..

목차1. 문자열 1-1. 따옴표의 종료 1-2. 특수 기호 1-3. length : 문자열 길이 1-4. 특정 글자에 접근하기 1-5. toLowerCase(), toUpperCase() 1-6. 부분 문자열 찾기 : str.indexOf(substr, pos), includes, startsWith, endsWith 1-7. 부분 문자열 추출 : substring, substr, slice1. 문자열1. 따옴표의 종류문자열은 작은따옴표, 큰따옴표, 백틱으로 감쌀 수 있다.작은따옴표와 큰따옴표의 기능상 차이는 없다. 하지만 백틱은 기능이 몇 개 있다.중간에 ${표현식} : 템플릿 리터럴 (template literal) 삽입 가능문자열을 여러 줄로 작성 가능템플릿 함..

목차1. 숫자형 1-1. e로 10 거듭제곱 1-2. 16진수, 2진수, 8진수 1-3. toString(base) 1-4. 어림수 구하기 (rounding) 1-5. 부정확한 계산 1-6. isNaN과 isFinite 1-7. parseInt와 parseFloat2. Math의 메서드들1. 숫자형1. e로 10 거듭제곱0이 많은 숫자들을 입력하는 방법들이 있다.// en : 10의 n 거듭제곱alert( 1e3 === 1 * 1000 ); // truealert( 1.23e6 === 1.23 * 1000000 ); // truealert( 1e-6 === 0.000001 ); // true 2. 16진수, 2진수, 8진수접두사 0x로 16진수를, 0b로 2진수를, ..

목차1. 배열 1-1. 배열의 생성 1-2. 배열 원소에 접근 1-3. const 배열은 변하지 않을까?2. 배열 메서드 2-1. 배열 길이 : length 2-2. 원본 배열 수정 : shift(), unshift(), push(), pop(), splice(), sort(), reverse() 2-3. 새로운 배열 생성 : concat(), slice(), Spread Operator 2-4. 배열 원소 다루기 : map(), forEach(), filter() 2-5. 특정 값 찾기 : indexOf(), lastIndexOf(), includes() 2-6. 배열 출력하기 : toString(arr)3. 유사 배열 객체4. for...of 반복문1...

목차1. 원시형의 메서드2. 랩퍼(wrapper) 객체3. 박싱 vs 가비지 컬렉션4. 언박싱(Unboxing)5. 원시 객체는 어디에 저장될까 1. 원시형의 메서드객체를 사용하면 함수를 프로퍼티로 저장하여 객체에 대해 많은 동작을 행할 수 있다는 장점이 있다.그래서 다양한 내장 객체를 제공하는데, 이런 기능들을 사용하면 시스템 자원이 많이 소모된다는 단점이 있다. 자바스크립트 창안자는 객체의 장점(메서드)와 원시형의 장점(가벼움)을 합치고 싶었고,그렇게 생각해낸 방법이 임시 객체(wrapper entity)이다.string - Stringnumber - Numberboolean - Booleansymbol - Symbol각 자료형에 대한 래퍼 객체들은 이름을 그대로 차용했고, 각 래퍼 객체들은 필요한 ..

목차1. Date 객체2. 객체 생성 : new Date() 2-1. new Date() 2-2. new Date(milliseconds) 2-3. new Date(datestring) 2-4. new Date(year, month, date, hours, minutes, seconds, ms)3. Date 메서드로 날짜 구성 요소 얻기 3-1. get 함수 3-2. 국가 표기에 맞춰 시간 정보를 표현4. Date 메서드로 날짜 구성 요소 설정하기5. 자동고침6. 시차 측정하기 6-1. Date 객체를 숫자로 변경 6-2. Date.now()7. 객체의 형변환1. Date 객체Date는 날짜 관련 메서드를 제공하는 내장 객체이다.Date의 생성 및 수정, 시간의..

목차1. 심볼형 (Symbol Type)2. 전역 심볼 2-1. Symbol.for(key) 2-2. Symbol.forKey(sym)3. 시스템 심볼4. 어떤 상황에서 사용할까1. 심볼형 (Symbol Type)심볼은 유일한 식별자(unique identifier)를 만들고 싶을 때 사용한다.// id는 심볼let id = Symbol();// 심볼 id에는 "id"라는 설명이 붙음let id = Symbol("id");// 심볼은 유일성이 보장되기 때문에 설명이 동일해도 각 심볼값은 다르다let id1 = Symbol("id");let id2 = Symbol("id");alert(id1 == id2); // false 같은 block-scope 내에서 같은 이름의 심볼을 사용할 수 없다. ..