[JavaScript스터디] 객체

원시값의 메서드

원시값을 객체처럼 메서드로 접근할 수 있도록 '래퍼 객체'를 만든다. (문자열, 숫자, 불린, 심볼의 메서드와 프로퍼티에 접근할 수 있도록 언어 차원에서 허용)
원시값이 메서드나 프로퍼티에 접근하려 하면 추가 기능을 제공해주는 특수한 객체, "원시 래퍼 객체(object wrapper)"를 만들었다가 메서드를 실행한 뒤 삭제된다.

null/undefined는 메서드가 없다.

특수 자료형인 null과 undefined와 연관되는 "래퍼 객체"도 없고, 메서드도 제공하지 않습니다. 어떤 의미에서는 두 자료형이 "가장 원시적"이라 할 수 있을 것 같습니다.

두 자료형에 속한 값의 프로퍼티에 접근하려 하면 에러가 발생합니다.

숫자형

숫자의 부정확한 계산

alert( 0.1 + 0.2 ); // 0.30000000000000004

숫자는 0, 1로 표현하는 이진수로 변환되어 컴퓨터의 메모리에 저장된다. 10진수로 표현되는 소수를 2진수로 표현하려면 몇몇의 경우 무한소수가 발생하는데,(0.1, 0.2 등) 무한수를 유한하게 표현하려다 보니 미세한 값들이 초과되거나 손실되어 계산 오류가 발생한다.

문자열

자바스크립트에서 문자열은 페이지 인코딩 방식과 상관없이 항상 UTF-16 형식을 따른다.

줄 바꿈 문자(newline character)

특수기호 \n을 사용하면 작은따옴표나 큰따옴표로도 여러 줄 문자열을 만들 수 있다.

let guestList = "손님:\n * John\n * Pete\n * Mary";

alert(guestList); // 손님 리스트를 여러 줄에 걸쳐 작성함

문자열의 길이

length는 숫자가 저장되는 프로퍼티이며, length 프로퍼티에 문자열의 길이가 저장된다.

길이를 갖고 있는 문자열이기 때문에 [] 대괄호를 이용하거나 str.charAt(0) 메서드를 호출해서 해당 위치의 문자를 찾을 수 있다.

let str = `Hello`;

// 첫 번째 글자
alert( str[0] ); // H
alert( str.charAt(0) ); // H

// 마지막 글자
alert( str[str.length - 1] ); // o

부분 문자열 찾기

메서드	추출할 부분 문자열	음수 허용 여부(인수)
slice(start, end)	start부터 end까지(end는 미포함)	음수 허용
substring(start, end)	start와 end 사이	음수는 0으로 취급함
substr(start, length)	start부터 length개의 글자	음수 허용

배열

배열을 선언하는 방법

let arr = new Array();
let arr = [];

toString()

toString() 배열 내장 메서드를 호출하면 요소를 쉼표로 구분한 문자열이 반환된다.

let arr = [1, 2, 3];

alert( arr ); // 1,2,3
alert( String(arr) === '1,2,3' ); // true

iterable 객체

이터러블 객체란 순회 가능한 객체를 의미한다. (for..of을 사용 가능)

배열, 문자열은 가장 광범위하게 사용되는 내장 이터러블이다.

유사 배열 객체

length 프로퍼티가 있으며 index가 있는 객체
단 배열 내장 메서드는 사용할 수 없다.

Array.from()

이터러블이나 유사 배열을 받아 진짜 배열을 만들어주는 메서드

Map과 Set

Map

Map은 키가 있는 값이 저장된 컬렉션이다.

• new Map([iterable]) : Map을 만드는 메서드. [key,value]쌍이 있는 iterable(배열 등)을 선택적으로 넘길 수 있는데, 이때 넘긴 이터러블 객체는 Map 초기화에 사용된다.
• map.set(key, value) : 키를 이용해 값을 저장한다.
• map.get(key) : 키에 해당하는 값을 반환한다. (key가 존재하지 않으면 undefined 반환)
• map.has(key) : 키가 있으면 true, 없으면 false 반환
• map.delete(key) : 키에 해당하는 값을 삭제한다.
• map.clear() : Map 안의 모든 요소를 제거한다.
• map.size : 요소의 개수를 반환한다.

일반 객체와 Map의 차이점

키의 타입에 제약이 없으며, 객체도 키가 될 수 있다.
size 프로퍼티 등 유용한 메서드나 프로퍼티가 있다.

Set

Set은 중복이 없는 값을 저장할 때 쓰이는 컬렉션이다.

• new Set([iterable]) : Set을 만드는 메서드. iterable 객체를 선택적으로 전달받을 수 있는데(대부분 배열) 이터러블 객체 안의 요소는 Set을 초기화하는데 쓰인다.
• set.add(value) : 값을 추가하고 Set 자신을 반환한다. Set 내에 이미 value가 있는 경우 아무런 작업을 하지 않는다.
• set.delete(value) : 값을 제거하며, 호출 시점에 Set 내에 값이 있어서 제거에 성공하면 true, 아니면 false를 반환한다.
• set.has(value) : Set 내에 값이 존재하면 true, 아니면 false를 반환한다.
• set.clear() : Set을 비운다.
• set.size : Set에 몇 개의 값이 있는지 센다.

Map과 Set에 반복 작업을 할 때 해당 컬렉션에 요소나 값을 추가한 순서대로 반복 작업이 수행된다.
따라서 이 컬렉션은 정렬이 되어있지 않다고 할 수 없으나, 컬렉션 내 요소나 값을 재정렬하거나 숫자(인덱스처럼)를 이용해 특정 요소나 값을 가지고 오는 것은 불가능하다.

위크맵과 위크셋

두 자료구조 모두 구성 요소 전체를 대상으로 하는 메서드를 지원하지 않으며, 구성 요소 하나를 대상으로 하는 메서드만 지원한다.

객체엔 주요 자료, WeakMap/WeakMap은 부수적인 자료를 저장하는 형태로 활용할 수 있다. 메모리에서 삭제되고, WeakMap과 WeakSet의 키만 해당 객체를 참조하고 있다면 WeakMap과 WeakSet에 저장된 연관 자료들 또한 메모리에서 자동으로 삭제된다.

Map vs. WeakMap

• WeakMap은 Map과 달리 키가 반드시 객체여야 한다. 원시값은 위크맵의 키가 될 수 없다.
• WeakMap은 키로 사용된 객체를 참조하는 것이 아무것도 없을 경우, 해당 객체는 메모리와 WeakMap은에서 자동으로 삭제된다.

Set vs. WeakSet

• WeakSet은 객체만 저장할 수 있다.
• WeakSet에 저장된 객체가 도달 불가능한 상태가 되면 해당 객체는 메모리에서 삭제된다.

Object.keys, values, entries

일반 객체는 아래 메서드 사용 가능

Object.keys(obj) – 객체의 키만 담은 배열을 반환합니다.
Object.values(obj) – 객체의 값만 담은 배열을 반환합니다.
Object.entries(obj) – [키, 값] 쌍을 담은 배열을 반환합니다.

JSON과 메서드

JSON(JavaScript Object Notation)이란, 클라이언트와 서버 간 HTTP 통신을 위한 텍스트 데이터 포맷
JSON은 일반 객체, 배열, 문자열, 숫자, 불린값, null을 지원한다.

JSON.stringify()

객체를 JSON 포맷의 문자열로 반환하는 메서드
클라이언트가 서버로 객체를 전송하려면 객체를 문자열화 해야 한다.
JSON.stringify는 객체에 toJSON 메서드가 있으면 이를 자동으로 호출해준다.

JSON.parse()

JSON 포맷의 문자열을 객체로 변환하는 메서드
서버로부터 클라이언트에게 전달된 문자열 형태의 JSON 데이터를 객체화 해야 한다.

response.json()

JSON 문자열을 JavaScript 객체로 변환하는 메서드
fetch API에서 사용한다.

참조

https://ko.javascript.info/data-types