[JavaScript] 기초 - 데이터 처리3

객체란 ?

 

객체 (Object)

• 객체는 속성을 가진 독립적인 개체(entity)
• 자바스크립트는 객체기반의 프로그래밍 언어 -> 원시값을 제외한 대부분의 값이 객체임
• 속성이 여러 개일 경우 콤마(,) 로 구분하고, (속성 : 값) 을 한 쌍으로 나열

const 객체명 = {
    "속성1" : 값1,
    "속성2" : 값2,
}

 

 

속성 (property)

• 속성은 키와 값 사이의 연결관계 -> key - value
• 객체의 속성은 자바스크립트의 변수와 유사한데, 객체에 속해 있음
• 속성에는 값 뿐만아니라 함수도 할당 가능 -> 객체에 속해있는 함수를 method 라고 함

속성 접근 방법1 - 마침표 표기법

• objectName.propertyName

속성 접근 방법2 - 대괄호 표기법

• objectName["propertyName"]

 

 

객체 생성 방법

 

- 리터럴 표기법

const foo = { name: 'apple' };

 

 

- 생성자 함수

 

new 키워드와 함께 객체를 생성하고 초기화하는 함수

-> 생성자 함수를 정의한 후, 생성자 함수를 활용하여 객체 인스턴스를 생성 (인스턴스: new 키워드로 생성된 객체)

 

속성만 같고 값만 다른 객체를 여러 개 생성해야 할 때 번거로울 때, 생성자 함수를 사용하면 속성이 동일한 객체를 여러 개 생성할 수 있다.

function Persion(name, age) {
    this.name = name;
    this.age = age;
}

new Persion('Jason', 30);

• 생성자 함수는 대문자로 시작 (일반함수와 구분)
• this 키워드로 속성을 정의하여, 생성될 인스턴스를 가리키게 해둠
• new 연산자를 활용하여 인스턴스를 생성

 

- Object.create

 

생성자 함수처럼 동일한 속성값을 갖는 객체를 생성할 수 있다.

Object 는 자바스크립트에 내장되어 있는 빌트인 객체로, 빌트인 객체 내부에 바로 사용할 수 있는 정적 메소드 create 가 있다.

해당 메소드에 미리 생성되어 있는 객체를 주입하면, 해당 객체를 기준으로 동일한 속성값을 지닌 객체를 생성한다. 

const Person = {
    name: 'Jason',
    age: 25,
    getName: function () {
        console.log(this.name);
    },
};

const Joy = Object.create(Person);
Joy.name = 'Joy';
Joy.getName(); // 'Joy'

 

 

Object 객체

• 생성자: new Object()
• 정적 method 
• 객체의 인스턴스 method

정적 method

 

1. 객체와 관련된 method

• assign: 객체 복사
• create: 신규 객체 생성
• freeze, preventExtensions, seal: 객체 고정
• isExtensible, isFrozen, isSealed: 객체 상태 확인
• entries, fromEntries: 객체를 배열로 전환
• getOwnPropertyOf, setOwnPropertyOf: 객체의 prototype

2. 객체의 속성과 관련된 method

• defineProperty, defineProperties: 객체 속성 추가
• getOwnPropertyDescriptor, getOwnPropertyDescriptors: 객체 속성 서술자
• getOwnPropertyNames, keys, getOwnPropertySymbols: 객체 속성 열거

3. 객체 값과 관련된 method

• is: 객체 값 비교
• values: 객체 값 열거

object 객체의 인스턴스 Method

 

정적 method와는 다르게 생성자 함수로 인스턴스를 생성한 후에 사용 가능한 method

• hasOwnProperty()
• isPrototypeOf(), propertyIsEnumerable()
• toLocalString(), toString(), valueOf()

 

 

객체 속성 control

 

객체 속성 조작하기

• 객체는 원시타입과 다르게 변경 가능한 값 (mutable)
• 객체는 전달하는 과정에서 참조형태로 전달됨 -> 객체의 변경이 일어날 때 참조된 객체들도 같이 변경되는 문제점 야기

 

객체의 속성 조작하기1 - 동적 생성

const person = {
    name: 'Jason',
    age: 25,
};

person.gendar = 'female' // 객체에 존재하지 않는 속성
console.log(person); 
// 출력: { name: 'Jason', age: 25, gender: 'female' } 없었던 속성이 동적으로 생성되고 추가됨

 

객체에 존재하지 않는 속성을 참조하고 할당문을 통해 값을 할당하면 속성이 동적으로 생성되고 추가됨

 

 

객체의 속성 조작하기2 - 나열하기

const parent = {
    age: 55,
    gender: 'male',
};

function Child(name) {
    this.name = name;
}

Child.prototype = parent;

const child = new Child('kim');

 

 

- for...in -> 모든 열거 가능한 속성을 순회 (객체 자신뿐 아니라 객체의 프로토타입 체인의 속성까지)

for (const key in child) {
    console.log(key); // name, age, gender -> 객체의 것 + 부모의 프로토타입까지 출력됨
}

 

- Object.keys(객체) -> 객체 자신의 열거 가능한 속성 이름을 배열로 반환

Object.keys(child); // ['name'] -> 객체의 것만, 부모의 프로토타입(x)

 

- Object.getOwnPropertyNames(객체) -> 열거 가능함과 상관없이 객체 자신만의 모든 속성을 배열로 반환

console.log(Object.getOwnPropertyNames(child)); // ['name'] -> 객체의 것만, 부모의 프로토타입(x)

 

 

 

객체 속성 조작하기3 - 객체의 속성 삭제하기

const person = {
    name: 'Jason',
    age: 25,
};

let result = delete person.name;
console.log(person); // { age: 25 } -> name 속성 삭제됨
console.log(result); // true

 

삭제가 성공적으로 이뤄지면 true 를 반환하고, 삭제가 불가능한 상황인 경우 false 가 반환된다. 

 

 

객체간 비교와 복사

 

객체는 참조타입(Reference type)

 

const foo = {
    name: 'apple',
};

const bar = {
    name: 'apple',
};

console.log(foo === bar); // false
console.log(foo === foo); // true

 

객체를 서로 비교했을 대 객체의 속성 값이 같아도 참조값이 다르므로 서로 다르다. 자기 자신과의 비교에서만 true 이다. 

 

 

정의된 객체를 다른 객체에 그대로 할당할 경우, 객체는 참조 타입이므로 객체가 값으로 할당되는 것이 아니라 동일한 메모리 주소(address) 만 할당된다. 그래서 동일한 메모리 주소를 참조하는 객체 중 하나를 수정할 경우, 동일한 메모리 주소를 참조하는 객체 모두가 수정되는 사이드 이펙트가 발생한다. (동일한 메모리 주소를 참조하는 모든 객체가 영향을 받음)

 

그래서 이런 객체의 사이드 이펙트를 고려해서 객체를 복사해야 하는데, 객체의 복사 방법은 2가지가 있다.

 

객체 복사 방법

• 얕은 복사 (Shallow copy)
• 깊은 복사 (Deep copy)

 

얕은 복사 (Shallow copy)

 

객체나 배열의 "최상위 수준" 만 복사하는 것으로, 원시값들은 독립적이지만 내부에 있는 객체나 배열은 같은 참조를 공유한다.

즉, 복사된 객체의 속성 중 하나라도 같은 참조를 하고 있다면 얕은 복사로 복사된 것이다. 

let original = { a: 1, b: { c: 2} };
let copy = { ...original };

 

a 속성은 각각 독립적인 메모리 주소를 참조하고 있지만, b 속성은 같은 메모리 주소를 참조하고 있기 때문에 한 객체에서 값을 바꾸면 두 객체 모두 값이 바뀐다. (중첩된 객체까지 모두 복사하려면 깊은 복사를 사용해야 한다)

 

그러므로 객체 속성 중 참조타입이 없는 경우에만 얕은 복사를 사용해야 한다. 

 

얕은 복사 하는 법

• Object.assign( { }, 복사할 객체) (첫번째 인자는 새로만들 객체 정의, 두번째 인자는 복사할 객체)
• spread 연산자 -> { ...복사할 객체)

 

얕은 복사를 하면 빈 배열에 속성값들을 복사해서 넣는다.

새로운 빈 객체에 속성값들을 넣었기 때문에 복사된 객체는 원본 객체와는 독립적인 메모리 주소를 참조한다.

 

아래의 코드에서는 1번의 경우 속성값 중 참조타입(배열, 객체 같은)이 없기 때문에 속성 a 를 수정해도 두 객체 모두에 영향이 가지 않지만,

2번의 경우 참조타입을 수정하는 경우 두 객체 모두 영향을 받고 수정이 된다.

 

그리고 마지막 출력문을 보면 a 속성이 동일한 메모리 주소를 참조하고 있음을 확인할 수 있다. 

// 1: 속성값에 배열/객체가 없는 경우
let originalObject = { a: 1, b: 2 };
let copy = Object.assign({}, originalObject);

// copy 수정
copy.a = 10;

console.log(originalObject); // { a: 1, b: 2 }
console.log(copy);           // { a: 10, b: 2 }

// 2: 속성값에 배열/객체가 있는 경우
let originalObject = { a: { c: 1 }, b: 2 };
let copy = Object.assign({}, originalObject);

// copy 수정
copy.a.c = 10; // 동일한 메모리를 참조하는 값

console.log(originalObject); // { a: { c: 10 }, b: 2 }
console.log(copy); // { a: { c: 10 }, b: 2 }
console.log(copy.a === originalObject.a); // true

 

 

깊은 복사 (Deep copy)

 

객체나 배열의 모든 계층을 복사하여, 원본과 복사본이 완전히 독립된 상태가 되도록 하는 방법이다.

즉, 복사된 객체의 속성 중 하나라도 같은 참조를 하고 있는 속성이 없다면 깊은 복사로 복사된 것이다. 

 

 

깊은 복사 하는 법

• 재귀함수를 이용한 복사 (라이브러리: lodash - cloneDeep)
• JSON.stringify (객체 -> 문자열로 변환(참조가 끊어짐) -> 객체로 변환)

 

재귀함수를 이용한 깊은 복사와 문자열 변환을 이용한 깊은 복사를 실행했다. 

깊은 복사는 객체나 배열의 모든 계층을 복사하기 때문에 복사했을 때 참조타입도 원본 객체와 완전히 독립적인 메모리를 가리키게 된다. 

 

그래서 재귀함수를 통해 깊은 복사된 객체 joy 와 문자열 변환을 통해 깊은 복사된 객체 kei 의 참조 타입인 address 객체의 값을 바꾸고 원본객체와 함께 출력해보았는데, 세 객체 모두 다른 값을 가지고 있는 것을 확인할 수 있었다. (서로 전혀 영향을 받지 않음

import cloneDeep from 'lodash.clonedeep';

const person = {
    name: '???',
    address: {
        country: 'Korea',
        city: 'Seoul',
    },
};

const joy = cloneDeep(person); // 재귀함수를 이용한 깊은 복사

const personStr = JSON.stringify(person) // 문자열로 변환
const kei = JSON.parse(personStr);

console.log(person.address === joy.address); // false
console.log(person.address === kei.address); // false

joy.address.country = 'Japan';
kei.address.country = 'USA'
console.log(person.address.country); // Korea
console.log(joy.address.country); // Japan
console.log(kei.address.country); // USA

 

 

 

객체의 종류

 

• 표준 빌트인 객체 ECMAScript
• 호스트 객체 (브라우저 기준) : DOM API

 

표준 빌트인 객체 ECMAScript

• 기초 객체 : Object, Function, Boolean, Symbol
  • 오류 객체: Error
  • 숫자 및 날짜: Number, BigInt, Math, Date
  • 텍스트 처리: Rexex(정규표현식), String(문자열)
  • Collection - Index based collection: Array(배열), Key based collection: Map, Set, ..
• 구조화된 객체: JSON
• 제어 추상화 객체

기본적으로 빌트인 객체들은 Object 객체의 속성을 상속 받기 때문에 toString(), toLocalString(), valueOf() 라는 인스턴스 메소드들을 가지고 있다. 

 

 

기초객체 - Number

 

숫자를 표현하고 다룰 때 사용하는 원시 래퍼 빌트인 객체로 함수로 바로 사용이 가능하다.

(원시 래퍼(wrapper) 빌트인 객체란 객체가 아닌 원시값을 래핑하여 객체처럼 다룰 수 있도록 만들어진 빌트인 객체를 의미한다)

Number('1.2'); // 1.2
Number('가'); // 변환시킬 수 없는 값 -> NaN 반환됨

 

 

기초객체 - Math

 

수학적인 상수와 함수를 위한 속성과 메서드를 가진 빌트인 객체이다. (숫자 데이터 타입만 지원)

 

 

기초객체 - Date

 

1970년 1월 1일 UTC 자정과 시간 차이를 밀리초 단위로 나타낸 빌트인 객체이다. 특정 시간대를 가져올 수 있고, 다시 셋팅할 수 있는 method 를 제공한다. 

(참고로 한국은 UTC 기준으로 9시간이 더해진 시간)

 

시간을 표현하는 방법은 다양하지만, 표준화 없이 사용할 겨우 커뮤니케이션 비용이 상승하므로 ISO 에서 날짜를 표현하는 방법을 표준화하였다 -> ISO 8601

• YYYY-MM-SSThh:mm:ssZ (T 는 구분자라고 생각하면 됨, T 는 생략가능, Z 는 UTC 날짜라는 의미)

참고 - JS Date 객체

JS Date 객체

 

 

기초객체 - 문자열

 

문자열 생성 방법

• 쌍따옴표(""), 따옴표(''), 백틱(``) 
• String 객체

 

※ 참고

 

문자열 줄 바꾸기

console.log('i love my \nfather'); // 이스케이프 시퀀스 사용해서 줄 바꿈
console.log(`i love my // 백틱을 사용해서 줄 바꿈
mother`);

/*
i love my 
father
i love my
mother
*/

 

 

또 참고사항으로 데이터 보관시 문자열 형태로 저장하면 유용한데, JSON.stringify 를 사용해서 객체를 문자열로 바꿀 수 있다. 필요하면 JSON.parse 를 사용해 다시 객체로 변환하여 사용할 수 있다. 

 

 

문자열 조작

 

- 문자열 요소 접근

• charAt
• 유사배열이기 때문에 배열처럼 접근

const foo = 'JavaScript';
console.log(foo.charAt(0)); // J
console.log(foo[1]); // a

 

- 문자열 비교

알파벳 순으로 비교하여 순서가 뒤에 올수록 크다고 판단

console.log('apple' < 'banana'); // true

 

 

String 객체

 

문자열을 다룰 때 사용하는 원시 래퍼 빌트인 객체이다. 함수로 바로 사용 가능하다.

 

문자열 관련 메서드

// 문자열 접근/찾기 메서드
const foo = '자바스크립트';
const example = [
    foo.at(0), // 자
    foo.charAt(1), // 바
    foo.indexOf('자'), // 0
    foo.search('아'), // -1
];

example.forEach((item)=>{ console.log(item) });

// 문자열 포함여부 메서드
const foo = '자바스크립트';
const example = [
    foo.includes('립'), // true
    foo.startWith('자'), // true
    foo.match('아'), // null
];

example.forEach((item) => { console.log(item); });

// 문자열 변경 메서드
const example = [
    'abcdef'.toLocaleLowerCase(), // ABCDEF
    'ABCDEF'.toLocaleLowerCase(), // abcdef
    '1banana1'.replace('1', 'a'), // abanana1 -> 첫번째로 발견된 패턴만 교체
    '1banana1'.replaceAll('1', 'a'); // abananaa -> 모든 패턴 교체
];

example.forEach((item) => { console.log(item); }

// 문자열 추가 메서드
const example = [
    'abcdef'.padStart(10, '1'), // 1111abcdef
    'abcdef'.padEnd(10, '1'), // abcdef1111
    'abcdef'.repeat(2), // abcdefabcdef
    'ABC'.concat('DEF'), // ABCDEF
    'abc' + 'def', // abcdef
];

example.forEach((item) => { console.log(item); });

// 문자열 변경
const example = [
    'abcdef'.slice(4), // ef
    'abcdef'.split('c'), // ['ab', 'def']
    'abcdef'.substring(4), // ef
    '   abc   '.trim(), // 앞 뒤 공백 다 제거
    '   abc   '.trimStart(), // 앞 공백만 제거 
    '   abc   '.trimEnd(), // 뒤 공백만 제거 
];

example.forEach((item) => { console.log(item); });

 

 

 

정규표현식

 

문자열에서 특정 문자 조합을 찾기 위한 패턴 ( == 정규식)

 

 

 

정규표현식 생성방법

 

- 리터럴 표기법

• 평가할 때 정규표현식을 컴파일함
• 정규식이 변하지 않으면, 리터럴 표기법 사용
• /pattern/flag

- RegExp 객체

• 런타임 때 컴파일됨
• 패턴이 변할 가능성이 있거나, 알 수 없는 데이터에서 가져오는 정규식의 경우 생성자 함수 사용
• new RegExp(/pattern/, flag)

 

RegExp 객체 + String 객체 -> 메서드에서 정규식을 인자로 받을 수 있음

const foo = 'JavaScript';
const regex = /a/g;
const example = [
    foo.match(regex), // [ 'a', 'a' ]
    foo.search(regex), // 1
    foo.replace(regex, 'K'), // JKvKScript
    foo.split(regex), // [ 'J', 'v', 'Script' ]
];

 

 

 

Collection

 

collection 이란?

 

비용을 절감하기 위해 상황마다 효율적인 데이터 형태로 처리를 해야하는데, 컬렉션은 데이터 항목들의 그룹을 의미한다.

( 컬렉션 -> list, set, tree, graph ... )

 

자바스크립트에서는 2가지 타입의 collection 이 있다. 

• Indexed collections
• Keyed collections

Indexed collections 이란 index 값을 기준으로 정렬되어있는 데이터 집합이다. 

-> Array, TypeArray 포함

 

Indexed collections - Array

 

이름과 인덱스로 참조되어 정렬된 값들의 집합이다. 

자바스크립트는 다른 언어와 다르게, 명시적인 배열 데이터 타입을 갖고있지 않다. 

 

Array 객체

• 0 개 이상의 배열요소를 가진 목록
• 각 요소로 지정된 값 초기화
• 배열의 길이는 지정된 요소의 갯수로 결정 (길이는 고정되어 있지 않다)
• 각 요소의 data type 도 고정되어 있지 않다
• 모든 요소는 필수값이 아니다 -> [undefinded, 'apple'] 이렇게 undefined 로 지정도 가능!

 

Array 객체 생성 방법은 2가지가 있다.

Array 객체 생성자를 사용할 때 괄호 안에 요소가 아닌 숫자 한 개만 집어넣는다면, 길이가 지정된 빈 배열이 생성된다. 

// 배열 리터럴
let arr1 = ['choco', 'strawberry'];

// Array 객체 생성자
let arr2 = new Array('choco', 'strawberry');
let arr3 = new Array(10);

console.log(arr1); // ['choco', 'strawberry']
console.log(arr2); // ['choco', 'strawberry']
console.log(arr3); // [ <10 empty items> ]

 

 

Array 객체의 특징

 

배열은 문자열 인덱스 사용이 불가능하기 때문에 문자열을 사용하려고 하면 배열의 특성을 잃어버리고 일반 객체처럼 동작하게 된다. 

아래 코드처럼 배열에 문자열 인덱스로 설정할 수는 있지만, 이는 배열 요소로서 동작하지 않으며 배열의 길이에 영향을 미치지 않는다.

문자열 인덱스로 설정된 요소는 실제 배열 요소로 인식되지 않고 일반 객체의 속성처럼 작동한다. 

let a = [1, 2, 3];
console.log(a); // 3

// 문자열 인덱스 사용이 불가능 -> 문자열을 사용하려고 하면 배열의 특성을 잃어버리고 일반 객체처럼 동작하게 됨
a['fruit'] = 'apple';
console.log(a) // [ 1, 2, 3, fruit: 'apple' ]
console.log(a); // 3 -> 추가된 것 같지만 배열의 길이는 여전히 3

 

배열의 길이를 강제로 지정할 수 있다 -> 자르고 늘릴 수 있다

const a = [1, 2, 3];
a.length = 1;
console.log(a); // [1] -> 배열 길이 잘림

a.length = 5;
console.log(a); // [ 1, <4 empty items> ] -> 배열 길이 늘어남

 

 

Array 객체 메서드

 

- 배열 요소 접근/찾기/포함여부/판별

const foo = ['J', 'a', 'v', 'a', 'S', 'c', 'r', 'i', 'p', 't'];

const example = [
    foo.at(2), // 2
    foo.indexOf('a'), // 1
    foo.includes('p'), // true
    foo.every((item) => item < 'h'), // false
    foo.some((item) => item < 'h'), // true
    foo.findIndex((item) => item === 't'), // 9
];

 

- 배열 요소 추가/제거/변경

const foo = [1, 2, 3];

foo.push(4); // [1, 2, 3, 4]
foo.unshift(0); // [0, 1, 2, 3, 4]

foo.pop(4); // [0, 1, 2, 3]
foo.shift(0); // [1, 2, 3]

foo.flat((item) => { console.log(itme); }); // [1, 2, 3]
foo.flatMap((item) => { return [item + 3]; }); // [4, 5, 6]
foo.filter((item) => item % 2 === 0); // [2]

 

이 외에도 

• 배열 합치기 추가하기: concat(), fill()
• 배열 분리하기: splice(), splice()
• 배열 요소 변경하기: copyWithin(), flat()
• 배열 재배치하기: reverse(), sort()
• 배열->문자열 변환: join(), toLocalString(), toString()
• iterator 로 변환: entries(), values()
• 순회하며 타입 변환: reduece(), reduceRight()

 

 

Key based collections 이란 key 값을 기준으로 정렬되어있는 데이터 집합이다. 

-> Map, Set 포함

키와 값을 매핑하여 저장하고, 저장된 순서대로 각 요소들을 반복적으로 접근할 수 있다. 

 

 

Key based collection - Map, WeekMap

 

키와 값을 매핑시켜 저장하며, key 의 값은 유니크하다.

 

Map 객체

 

[key, value] 형태로 저장하고, 저장된 순서대로 요소를 반복적으로 접근 가능하다.

 

그렇다면 키 기반의 Object 와의 차이점은 무엇일까?

	Object	Map
속성의 데이터 타입	string, Symbol 데이터 타입만 가능	모든 값을 키로 활용
default 속성과의 충돌	Object prototype 의 기본 속성과 동일한 키를 생성시 충돌	Map 은 기본적으로 갖고 있는 속성이 없음 -> 기본 속성과 충돌 x
객체의 크기	수동으로 추적	size 인스턴스 속성으로 얻을 수 있음
순서 보장	Object 는 순서 보장 안됨	Map 은 추가된 순서대로 반복됨
iterable 여부	Object 는 iterable X (forEach x)	Map 은 iterable O (forEach o)
퍼포먼스	키, 값 쌍의 빈번한 추가제거에는 퍼포먼스가 좋지 않음	키, 값쌍의 빈번한 추가제거에는 Map 퍼포먼스가 좋음
직렬화 구문분석 제공 여부	직렬화와 구문분석 제공 (JSON.stringify, JSON.parse)	Map 에서는 제공하지 않음 (커스텀으로 구현 가능)

 

 

WeakMap 

 

키에 대한 강력한 참조를 생성하지 않는 키/값 쌍의 모음 -> 키는 object 만을 허용

객체의 정보를 비노출하는 특징이 있기 때문에, 객체의 사적인 정보를 저장하거나 상세 구현 내용을 숨기기 위해 사용한다.

 

 

Key based collection - Set & WeakSet 

 

중복된 값을 허용하지 않는다 -> 값이 같은지 검사를 수행 (same-value-zero-algorithm)

배열을 인자로 받을 수 있는데, 배열의 요소가 Set 객체의 요소로 저장되기 때문에 중복된 요소가 제거된다. 

 

 

Set 의 특징

• 모든 값들의 집합이며, 입력된 순서에 따라 저장된 요소를 반복할 수 있음
• 중복된 값을 저장할 수 없다 -> 특정 값이 배열 내 1개만 존재, NaN 도 Set 에서 같은 것으로 취급됨
• 배열 -> Set or Set -> 배열 변환 가능
• for...of 를 통해 순회 가능

 

그렇다면 index 콜렉션과의 차이점이 뭘까?

	배열	Set
포함여부 확인 퍼포먼스	indexOf 를 사용 -> 퍼포먼스 느림	has 메소드 사용 -> 배열보다 나은 퍼포먼스
요소 제거	배열은 요소를 제거할 때 배열을 잘라내야 함 -> 잘린 요소 개수만큼 옮기는 과정 필요	delete 메소드 사용 -> 키를 바로 삭제할 수 있음
요소 찾기	indexOf 로 NaN 포함여부 확인 불가능	NaN 포함여부 확인 가능
중복여부 확인	순회하며 확인	값의 유일성을 보장하기 때문에 중복성 확인이 필요없음

 

 

WeakSet 객체

• 객체 컬렉션 -> 인자로object 값만을 허용
• 약한 참조
• add 함수를 통해 인자 추가 가능
• Set 과 다르게 순환 관련 메서드가 존재하지 않음

 

빌트인 객체 - 그 외

 

JSON

 

인터넷으로 자료를 주고받을 때 자료를 표현하는 방법으로, (키-값)쌍, 배열 자료형, 기타 모든 직렬화 가능한 값 또는 (키-값)쌍으로 이루어진 데이터 객체를 전달하기 위해 사람이 읽을 수 있는 텍스트 상자를 사용하는 open standard 포멧이다.

JSON 은 별도의 파일로 관리될 수 있고, 파일 확장자는 .json 이다. 

 

 

직렬화 - serialization, desirialization

 

다양한 환경 간에 데이터를 주고 받기 위해 직렬화 작업이 필요

• 직렬화 serialization: Object -> 문자열로 변환
• 역직렬화 deserialization: 문자열 -> Object 로 변환

(역직렬화를 parse 라고도 함)

 

JSON 객체

 

자바스크립트에서는 직렬화/역직렬화를 도와주는 빌트인 객체가 있는데, JSON 객체가 해당 메서드들을 제공한다.

• JSON.stringify: 직렬화 하는 구문
• JSON.parse: JSON 형태로 파싱하는 구문 (역직렬화)

역직렬화를 할 때 문자열이 객체형태가 아닌 경우 오류가 발생하므로 try-catch 문으로 에러 핸들링을 하는 것을 권장한다. 

const stringifiedFoo = '{"name":"joy","age":2'; // } 가 빠져 객체 형태가 아님

try {
    JSON.parse(stringifiedFoo);
} catch (error) {
    console.log(error);
}

 

 

국제화 - Intl 객체

각 언어에 맞는 문자, 숫자, 시간, 날짜비교를 제공하는 국제화 API 를 위한 namespace

-> Intl 이라는 namespace 로 그루핑하고, 내부에 있는 생성자 속성들

 

 

DateTimeFormat 생성자 함수

• 언어에 맞는 날짜, 시간 서식을 적용하기 위한 객체

const dateTimeFormatKo = new Intl.DateTimeFormat('ko');

const example = [
    dateTimeFormatKo.format(),
    dateTimeFormatKo.formatToParts(),
];

example.forEach((item) => { console.log(item); });

/*
2024. 8. 1.
[
  { type: 'year', value: '2024' },
  { type: 'literal', value: '. ' },
  { type: 'month', value: '8' },
  { type: 'literal', value: '. ' },
  { type: 'day', value: '1' },
  { type: 'literal', value: '.' }
]*/

const dateTimeFormatKo = new Intl.DateTimeFormat('ko');

const example = [
    dateTimeFormatKo.formatRange(new Date('2024-01-01'), new Date()),
    dateTimeFormatKo.formatRangeToParts(new Date('2024-08-01'), new Date()),
];

example.forEach((item) => { console.log(item); }); 

/*
2024. 1. 1. ~ 2024. 8. 1.
[
  { type: 'year', value: '2024', source: 'shared' },
  { type: 'literal', value: '. ', source: 'shared' },
  { type: 'month', value: '8', source: 'shared' },
  { type: 'literal', value: '. ', source: 'shared' },
  { type: 'day', value: '1', source: 'shared' },
  { type: 'literal', value: '.', source: 'shared' }
]
*/

 

 

NumberFormat 생성자 함수

• 언어에 맞는 숫자 서식을 적용하기 위한 객체

const NumberFormatKo = new Intl.NumberFormat('ko', {sytle:'currency', currency:'KRW'});

NumberFormatKo.format(100000); // 100,000