데이터 처리 : 객체와 빌트인 객체

조혜준·2023년 10월 20일
JavaScript 입문 기초

프로그래머스 프론트엔드 미니 데브코스

목록 보기
5/14

[1] 객체

1) 객체란?

객체 Object

  • 객체는 속성을 가진 독립적인 개체(entitiy)
    • 객체는 속성(property)로 구성된 집합
  • 자바스크립트는 객체 기반 프로그래밍 언어
    • 자바스크립트를 구성하는 대부분이 객체 (원시값 이외의 값)
const 객체명 = {
	"속성1": 값,
	"속성2": 값
}

객체 Object - 속성 property

  • 속성은 키(key)와 값(value) 사이의 연결관계
  • 객체의 속성은 JavaScript의 변수와 유사한데, 객체에 속해있음
  • 속성 접근 방법
    • 마침표 표기법: objectName.propertyName
    • 대괄호 표기법: objectName["propertyName"]
  • 속성에는 값 뿐만아니라 함수도 할당 가능
    • method : 객체에 속해있는 함수를 method라고 함

객체 Object - 속성 - method

  • 메서드는 다른 함수와 동일하게 정의하지만, 객체 속성에 할당되어있음
  • ECMAScript2015에서는 짧은 구문으로 작성 가능

<객체 Object - 생성방법>

  1. 리터럴 표기로 객체 생성
    • const foo = { name:'apple'};
    • 콜론 앞 속성이름(name): 식별자
    • 콜론 뒤 값('apple'): 속성에 할당할 표현식
  2. 생성자 함수로 객체 생성
    • 속성만 같고 값만 다른 객체를 여러개 생성해야할 때의 불편함..
      • 생성자 함수를 사용하면, 템플릿처럼 사용하여 속성이 동일한 객체를 여러개 생성할 수 있음
      • 생성자 함수란? new 키워드와 함께 객체를 생성하고 초기화하는 함수
    • 생성자를 정의한 후, 생성자 함수를 활용하여 객체 인스턴스(new 키워드로 생성된 객체)를 생성
      • 생성자 함수는 대문자로 시작(일반 함수와 구분)
      • this 키워드로 속성을 정의하여, 생성될 인스턴스를 가리키게 해둠
      • new 연산자를 활용하여 인스턴스를 생성
  3. Object.create로 객체 생성
    • 생성자 함수처럼 동일한 속성값을 갖는 객체를 생성할 수 있음
    • Object.create(객체)

Object 객체

  • 생성자 : new Object()
  • 정적 method : 객체 자체와 관련된 method, 객체 속성과 관련된 method, 객체 속성 값과 관련된 method
  • 인스턴스 > Method :
    • hasOwnProperty()
    • isPrototypeOf(), propertyIsEnumerable()
    • toLocaleString, toString(), valueof()

<Object 객체 - 정적 method>

  • 객체 자체
    • 객체 복사: assign
    • 객체 신규 생성: create
    • 객체 고정: freeze, preventExtensions, seal
    • 객체 상태 확인: isExtensible, isFrozen, isSealed
    • 객체를 배열로 반환: entries, fromEntries
    • 객체 prototype: getOwnPropertyof, setOwnPropertyOf
  • 객체 속성
    • 객체 속성 추가: defineProperty, definedProperties
    • 객체 속성 서술자: getOwnPropertyDescriptor, getOwnPropertyDescriptors
    • 객체 속성 열거: getOwnPropertyNames, keys, getOwnPropertySymbols
  • 객체 속성의 값
    • 객체 값 비교: is
    • 객체 값 열거: values

2) 객체 속성 control

객체 속성 조작하기

  • 객체는 원시타입과 다르게 변경 가능한 값 (mutable)
  • 객체는 전달하는 과정에서 참조형태로 전달
    • 이는 객체의 변경이 일어날 때 참조된 객체들도 같이 변경되는 문제점을 야기
    • 때문에 의도한 동작이 되기 위해서는 아래와 같은 조작을 적절히 사용해야 함

<객체 속성 조작하기>

  1. 동적 생성
  • 객체에 존재하지 않는 속성을 참조하고 할당문을 통해 값을 할당하면 속성이 동적으로 생성되고 추가됨
const person = {
	name: 'Jason',
	age: 25,
};

person.gender = 'female';
person;

  1. 나열하기
  • 객체의 속성을 나열하는 3가지 방법
    • for...in
      • 모든 연럭가 가능한 속성을 순회 (객체의 프로토타입 체인의 속성까지)
    • Object.keys(객체)
      • 객체 자신의 열거 가능한 속성 이름을 배열로 반환
    • Object.getOwnPropertyNames(객체)
      • 객체 자신만의 모든 속성을 배열로 반환

  1. 삭제하기
  • delete 연산자로 속성 삭제
  • delete 속성이름
  • 반환값 : true
const person = {
	name: 'Jason',
	age: 25,
};

delete person.name;
person;

3) 객체 비교와 복사

객체는 참조타입 Reference type : 모든 연산이 참조값(메모리 주소)으로 처리


객체 비교

  • 객체를 서로 비교하면
    • 객체 속성과 값이 같은 객체여도, 참조값이 다르므로 서로 다름
    • 자기 자신과의 비교에서만 true

동일한 객체를 생성해야 할 때

  • 정의된 객체를 다른 변수에 그대로 할당할 경우, 동일한 메모리 주소(address)만 할당됨
  • 둘 중 하나의 객체를 수정한다면, 동일한 메모리 주소이기 때문에 두 변수가 참조하고 있는 객체가 수정되어 결과적으로 2가지 객체 모두 변경사항에 영향을 받음
  • 객체 복사의 2가지 방법
    • 얕은 복사
    • 깊은 복사

Shallow copy

얕은 복사

  • 복사된 객체의 속성 중 하나라도 같은 참조를 하고 있게되면, 얕은 복사로 복사되었다고 함
  • 객체의 속성 중 참조타입이 없는 경우에만 얕은 복사 방법 권장
  • 방법 : 
Object.assign( {}, 복사할 객체 )
             spread 연산자
             { ...복사할 객체 }

Deep copy

깊은 복사

  • 복사된 객체의 속성 중 하나라도 같은 참조를 하고 있는 속성이 없다면 깊은 복사로 복사
  • 방법
    (1) 재귀함수를 이용한 복사
    - ( 라이브러리: lodash - cloneDeep )
    (2) JSON.stringify
    - 객체 문자열로 → 변환(참조가 끊어짐) → 객체로 변환

4) 객체의 종류

표준 빌트인 객체 ECMAScript

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

빌트인 객체 형태

  • 정적 static : 속성, method
  • 인스턴스 instance : 속성, method
    • {{ 객체.prototype.인스턴스method }}
      • e.g.Number.prototype.toFixed()
    • 기본적으로 Object 객체의 속성을 상속받음
      → 프로토타입 메서드를 모두 상속 toString(), toLocalString(), valueOf()
    • 함수로써 바로 호출 사용

[2] Build-in 객체 - 숫자와 날짜

1) Number 객체, Math 객체

Number 객체
: 숫자를 표현하고 다룰 때 사용하는 원시 래퍼 Build-in 객체

  • 함수로 바로 사용 가능
    • Number('1.2') : Number로 타입 전환
  • Static 속성과 메서드
    • 속성 : MAX_VALUE, MAX_SAFE_INTEGER, NaN, ...
    • 메서드
      • 확인하는 용도 : isNaN, isFinite, isInteger, ...
      • 파싱하는 용도 : parseInt, parseFloat
  • 생성자 함수
    • Number.prototype
    • 인스턴스 메서드 : toFixed, toLocalString, ...
  • 변수 또는 객체의 속성이 숫자를 가지고 있으면, Number 객체 인스턴스 생성없이 Number의 인스턴스 속성과 메서드 사용 가능

Math 객체
: 수학적인 상수와 함수를 위한 속성과 메서드를 가진 Built-in 객체 (숫자 데이터 타입만 지원)

  • Math는 생성자가 아님. 정적 속성과 메서드만 지원
  • Static 속성과 메서드
    • 속성 : PI, E, ...
    • 메서드
      • abs(x), pow(x,y), sqrt(x)
      • ceil(x), floor(x), round(x)
      • max(x,y,...), min(x,y,...)
      • random()
      • ...

2) Date 객체

Date와 UTC

Date 객체 : 1970년 1월 1일 UTC 자정과의 시간 차이를 밀리초 단위로 나타낸 것

  • UTC(Universal Time Coordinated) : 국제 표준 시간의 협정 세계시
    • 국제적인 표준 시간의 기준으로 쓰이는 시각
    • 1970년도에 UTC 채택, 1972년 구현
    • UTC는 그리니치 평균시(GMT)에 기반. GMT라고도 불림
    • 인터넷, WWW, 항공 등등에 사용됨
  • 한국은 UTC기준 9시간이 더해짐
    • getTimezoneOffset() //UTC-현지시간대(분단위 반환)
    • 한국은 -540분 == 9시간

날짜 표기와 ISO8601

  • 시간을 표현하는 방법은 다양하나, 표준화없이 사용할 경우 커뮤니케이션 비용이 상승
    • 미국에서 → 한국으로 YYMM으로 보낼경우 e.g. 0302
  • ISO : 국제 표준화 기구
    • 이를 해소하기 위해 국제표준화 기구에서 날짜를 표현하는 방식을 표준화
  • ISO 8601
    • YYY-MM-SSThh:mm:ssZ (많이 사용되는 형태)
    • 혼합된 일시를 표현할 때는 T라는 구분자를 사용 (상호협의간 T는 생략가능)
    • UTC날짜라는 의미는 Z로 표현

Date 객체
: 1970년 1월 1일 UTC 자정과의 시간 차이를 밀리초 단위로 나타낸 Built-in 객체

  • 특정 시간대(현재 시간을 포함)를 가져올 수도, 다시 셋팅할 수 있는 method를 제공
  • 함수로 호출 : Date() → Sat Oct 22 2022 18:43:12 GMT+0900 (한국 표준시)
  • 생성자 함수 : Date.prototype
  • Static 속성과 메서드
    • 속성 : 없음
    • 메소드 : now(), parse(), UTC()

Date 인스턴스 메서드

  • new Date()
  • new Date(시간문자열)
    • 시간을 get하는 메서드
    • 시간을 set하는 메서드

인스턴스 메서드- 시간 갖고오기

  • 기본 - 현지시간 기준
    • 연,월,일, 요일 갖고오기 : getFullYear(), getMonth(), getDate(), getDay()
    • 시,분,초,밀리초 갖고오기 : getHours(), getMinutes(), getSeconds(), getMilliseconds()
  • -UTC- : UTC 기준
    • 한국 시간은 9시간 차이나므로, getHours와 GetUTCHours만 차이나고 나머지는 동일한 값을 반환
    • UTC로부터 ~ 걸린 시간 갖고오기(밀리초 기준) : getTime()
    • UTC와 ~ 현지 시간대 차이 갖고오기(분 기준) : getTimezoneOffset()
  • getMonth() : 1월이 0부터 시작
    • 0은 1월, 9는 10월
  • getDay() : 일요일이 0부터 시작
    • 일요일 0, 월요일 1, 화요일 2, ...
  • toLocalDateString() 활용 시 현지에 맞는 요일 문자열을 얻을 수 있음

인스턴스 메서드- 시간 set하기

  • 기본 - 현지시간 기준
    • 연,월,일, 요일 갖고오기 : setFullYear(), setMonth(), setDate(), setDay()
    • 시,분,초,밀리초 갖고오기 : setHours(), setMinutes(), setSeconds(), setMilliseconds()
  • -UTC- : UTC 기준
    • 한국 시간은 9시간 차이나므로, setUTCHours 사용 시 유의
    • UTC로부터 ~ 걸린 시간 셋팅하기 (밀리초 기준) : setTime()

Date 객체 - Object 메서드 오버라이딩

  • 최상위 객체가 갖고 있는 메서드 중 상속받는 메서드가 있음
  • valueOf()
    • UTC와 기준 시점 사이의 밀리세컨즈 차이값
    • getTime()과 동일한 값
  • toString()
    • {{ 요일 }}{{ 월 }}{{ 일 }}{{ 연도 }}{{ 시 }}:{{ 분 }}:{{ 초 }} GMT{{ +/- }}{{ 시간 차이값 }} ({{ 구성한 시간대 이름 }})
    • Sat Oct 22 2022 18:43:12 GMT+0900 (한국 표준시)
    • Date()와 동일한 값

[3] Build-in 객체 - 텍스트

1) 문자열과 String 객체

문자열 - 생성방법

  • 문자열 리터럴로 표현되며, 쌍따옴표(""), 따옴표('')을 사용하여 표현
    • ECMAScript2015 이상에서는 템플릿 리터럴(백틱 `) 사용 가능
  • String 객체 사용

문자열 특징

  • 문자열 내에 이스케이프 문자 사용가능(\n)
  • 줄바꿈 문장 표현가능
    • 이스케이프 문자 활용(\n)
    • 템플릿 리터럴 활용(백틱 `)
  • 데이터 보관 시 문자열 형태로 저장 유용
    • 텍스트 형태로 저장
    • 객체형태 → JSON.stringify로 변환하여 저장

문자열 조작

  • 문자열 요소 접근
    • charAt
    • 유사 배열이라 배열처럼 접근
  • 문자열 비교
    • 알파벳순을 비교하여 순서가 뒤에 올수록 크다고 판단
  • 변수 또는 객체의 속성이 문자열을 갖고 있으면, String 객체 인스턴스 생성없이 String의 인스턴스 속성과 메서드 사용가능

String 객체
: 문자열을 다룰 때 사용하는 원시 래퍼 Built-in 객체

  • 함수로 바로 사용 가능
    -> String(...) : 문자열로 타입 전환
  • 정적 메서드 : fromCharCode, fromCodePoint, raw
  • 생성자 함수 : String.prototype
    • 인스턴스 속성 : length
    • 인스턴스 Method :
      - 문자열 체크(get) : 접근, 찾기, 포함 여부, 비교
      - 문자열 변경(set) : 추가하기, 합치기, 분리하기, 변경하기

인스턴스 메서드 - 문자열 체크

  • 문자열에 접근
  • 문자열 내에 target문자열이 어디있는지 찾기, 포함되어있는지, 비교하기
    • 접근 : at(), charAt(), charCodeAt(), codePointAt()
    • 찾기 : indexOf(), lastIndexOf(), search()
    • 포함 여부 : includes(), startsWith(), endsWith(), match(정규표현식), metchAll(정규표현식)
    • 비교 : localeCompare()

인스턴스 메서드 - 문자열 변경

  • 변경하기 : toLocaleLowerCase(), toLocaleUpperCase(), toString(), replace(), replaceAll(), ...
  • 추가하기 : padEnd(), padStart(), repeat()
  • 합치기 : concat(), 산술연산자
  • 분리하기 : slice(), substring(), split(), trim(), trimStart(), trimEnd()

2) 정규표현식

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

/pattern/flags
(예시 /\w+\s/g)


  • 패턴 작성하는 방법
    • 단순 패턴 사용
    • 특수 문자 사용 : 어서션, 문자 클래스, 그룹과 범위, 수량자, 유니코드 속성 이스케이프
  • flag를 활용하여 탐색 : d, g, l, m, s, u, y

정규표현식 - 생성방법

  • 리터럴 표기법
    • 평가할 때 정규 표현식을 컴파일함
    • 정규식이 변하지 않으면, 리터럴 표기법 사용
    • /pattern/flag
  • RegExp 객체
    • 런타임 때 컴파일됨
    • 패턴이 변할 가능성은 있거나, 알수 없는 데이터에서 가져오는 정규식의 경우 생성자 함수 사용
    • new RegExp(/pattern/, flag)

RegExp 객체

  • 정적 속성 : lastIndex
  • 생성자 함수 : RegExp.prototype
  • 인스턴스
    • 속성
      • 적용된 flag 반환 : flags
      • 적용된 flag 여부 반환 : dotAll, global, ignoreCase, multiline, source, sticky, unicode
    • Method : compile(), exec(), test(), toString(), ...

RegExp 객체 🙌 String 객체

  • 문자열 인스턴스 중 "찾는" 과정이 있는 method에서 활용
    • 찾아서 일치하는지 확인 : match(정규표현식), matchAll(정규표현식)
    • 찾는 : search(정규표현식)
    • 찾아서 교체하는 : replace(정규표현식), replaceAll(정규표현식)
    • 찾아서 분리하는 : split(정규표현식)

[4] Build-in 객체 - Collection

1) Collection 개요

Collection이란?

  • 비용을 절감하기 위해, 상황마다 효율적인 데이터 형태로 처리해야 함
  • 컬렉션은 데이터 항목들을 그룹을 의미
    • 컬렉션에는 list, set, tree, graph 등이 포함되어 있음
  • 자바스크립트에는 2가지 타입의 collection이 있음
    • Indexed collections
    • Keyed collections

indexed collections

  • Index 값을 기준으로 정렬되어있는 데이터 집합
    • Array, TypedArray 포함
  • index로 배열 내의 값을 참조할 수 있음
const foo = [1, 2, 3];
foo[1];

key based colelctions

  • Key 값을 기준으로 정렬되어있는 데이터 집합
    • Map, Set 포함
  • 키와 값을 매핑하여 저장함
  • 저장된 순서대로 각 요소들을 반복적으로 접근할 수 있음
const foo = new Map();
foo.set(key, value)

2) index collection - 배열(Array)

Array

  • 이름과 인덱스로 참조되어 정렬된 값들을 집합 (인덱스 : "색인"과 같은 의미)
  • 다른 언어와 다르게, 자바스크립트는 명시적인 배열 데이터 타입을 갖고있지 않음
    • 배열 객체를 사용할 수 있음
    • List와 비슷한 객체이며, 순회와 변형 작업을 수행하는 method를 가짐

JavaScript의 Array객체

  • 0개 이상의 식 expression(배열 요소) 목록
  • 배열을 만들 때, 각 요소로 지정된 값으로 초기화
    • 배열의 길이(length)는 지정된 요소의 갯수로 결정
    • 길이가 고정되어있지 않음
    • 각 요소의 data type도 고정되어있지 않음
  • 모든 요소는 필수값이 아님 (undefined로 지정해도 됨)
    • ['apple', undefined, 'banna']

Array객체 - 생성 방법

  • 배열 리터럴 : 대괄호([])로 묶임
  • Array 객체 생성자 :
    • new Array(arrayLength); 길이만 지정된 배열 (정수만 가능)
    • new Array(element0, element1, ...); 요소가 지정된 배열

Array객체 - 특징

  • 배열 요소의 참조 :
    • index로 참조, 0부터 시작
    • index 값을 속성 이름으로 사용하여, 표준 객체의 속성처럼 저장
    • index로 문자열 사용할 수 없음, 무조건 정수로만 참조하여 저장
  • 배열에 값 저장 :
    • index로 참조하지 않으면 객체의 속성으로 저장됨
  • 배열의 길이 : 마지막 index에 +1한 값
    • 길이를 지정하는 것 가능
      • 원래 길이보다 작게 지정하면, 배열이 잘림
      • 원래 길이보다 크게 지정하면, 배열의 길이는 늘어남
  • 배열의 반복 처리하기
    • for문 활용
    • forEach문 활용

Array객체

  • 정적 메서드 : from, isArray, of
  • 생성자 : Array, pototype
  • 인스턴스
    • 속성 : length
    • Method : (일반/순회하며) > 요소 체크(get) : 접근, 찾기, 포함 여부, 판별하기
      • 요소 변경(set) : 추가하기, 제거하기, 변경하기
      • 배열 변경(set) : 추가하기, 분리하기, 변경하기, 재배치하기
      • 반환 타입 변경하기

Array객체 - 인스턴스 메서드

  • 요소 check
    • 요소 접근 : at()
    • 요소 찾기 : indexOf(), lastIndexOf()
    • 요소 포함 여부 : includes90
    • 순회하며
      • 요소 확인하기 : forEach()
      • 요소 판별하기 : every(), some()
      • 요소 찾기 : find(), findIndex()
  • 요소 조작
    • 요소 추가하기 : push(), unshift()
    • 요소 제거하기 : pop(), shift()
    • 순회하며
      • 요소 변경하기 : flatMap(), map()
      • 요소 제거하기 : filter()
  • 배열 합치기, 추가하기 : concat(), fill()
  • 배열 분리하기 : slice(), splice()
  • 배열 요소 변경하기 : copyWithin(), flat()
  • 배열 재배치하기 : reverse()
    • 순회하며 재배치하기 : sort()
  • 반환 타입 변환하기 :
    • 문자열로 : join(), toLocaleString(), toString()
    • iterator로 : entries(), values()
    • 순회하며
      • 타입 변환하기 : reduce(), reduceRight()

3) key based collection - Map, WeakMap

Key based collection

  • key 값을 기준으로 정렬되어있는 집합
    • Map, Set 포함
  • 키와 값을 매핑하여 저장
  • 저장된 순서대로 각 요소들을 반복적으로 접근할 수 있음
const foo = new Map();
foo.set(key, vlaue)

Map 객체와 WeakMap 객체의 공통 속성

  • 키와 값을 매핑시켜 저장
  • key는 유니크함

Map 객체 - 특징

  • Map은 간단히 키와 값을 서로 매핑시켜 저장하고, 저장된 순서대로 요소를 반복적으로 접근할 수 있음
  • [key, value] 의 형태로 삽입된 순서대로 추가

Map과 Object의 차이점

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

Map 객체

  • 생성자 함수 : Map.prototype
  • 인스턴스
    • 속성 : size
    • Method :
      • 요소 체크(get) : 접근, 포함여부- get, has
      • 요소 변경(set) : 추가하기, 제거하기, 변경하기 - clear, delete, set
      • 순환 관련 - keys, values, entries, forEach

WeakMap - 특징

  • 키에 대한 강력한 참조를 생성하지 않는 키/값 쌍의 모음
    • 키는 object만을 허용
  • 객체 정보를 비노출
  • 객체의 정보를 비노출하는 특징을 활용하여
    • 객체의 사적인 정보를 저장하기 위해서 사용
    • 상세 구현 내용을 숨기기 위해서 사용

WeakMap - 객체

  • 생성자 함수 : WeakMap.prototype
  • 인스턴스
    • 속성 : size
    • Method :
      • 요소 체크(get) : 접근, 포함여부- get, has
      • 요소 변경(set) : 추가하기(변경하기), 제거하기 - delete, set
      • 순환 관련 - 없음

4) key based collection - Set, WeakSet

Set와 WeakSet의 공통 속성

  • 중복된 값을 허용하지 않음
    • 값이 같은지 검사를 수행 (same-value-zero-algorithm)
  • 배열을 인자로 받을 수 있음
    • 배열의 요소가 Set 객체의 요소로 저장됨
    • 중복된 요소가 제거됨

Set의 특징

  • 모든 값들을 집합 (값 콜렉션)
  • 입력된 순서에 따라 저장된 요소를 반복처리할 수 있음
  • 특정 값은 Set내에서 하나만 존재
    • NaN은 Set에서 같은 것으로 간주함
  • 배열을 Set으로, Set을 배열로 변환 가능
  • for...of를 통해 순회 가능

Set과 배열의 차이점

  • 포함여부 확인 퍼포먼스 :
    • 배열 : indexOf를 사용하여 포함여부 확인은 퍼포먼스가 느림
    • Set : has method를 사용
  • 요소 제거 :
    • 배열 : 배열은 요소를 제거할 때 배열을 잘라내야 함
    • Set : delete method 사용
  • 요소 찾기
    • 배열 : NaN은 indexOf로 포함여부 확인 불가능
    • Set : NaN 포함여부 확인 가능
  • 중복 여부 확인
    • 배열 : 순회하며 확인해야 함
    • Set : Set은 값의 유일성을 보장하기 때문에, 중복성을 확인할 필요는 없음

Set 객체

  • 생성자 함수 : Set.prototype
  • 인스턴스
    • 속성 : size
    • Method :
      • 요소 체크(get) : 접근, 포함여부- has
      • 요소 변경(set) : 추가하기, 제거하기, 변경하기 - clear, delete, add

WeakSet의 특징

  • 객체 컬렉션 (object 값만을 허용)
    • WeakSet의 인자로 object만 허용
    • 약한 참조를 가짐
const foo = new WeakSet()
foo.add({ foo; 1 })

WeakSet - 객체

  • 생성자 함수 : WeakSet.prototype
  • 인스턴스
    • Method :
      • 요소 체크(get) : 포함여부- has
      • 요소 변경(set) : 추가하기(변경하기), 제거하기 - delete, add
      • 순환 관련 - 없음

[5] Build-in 객체 - 그 외

1) JSON 객체

JSON (JavaScript Object Notation)

  • 인터넷에서 자료를 주고받을 때 자료를 표현하는 방법으로 알려져있음
  • 키-값 쌍, 배열 자료형, 기타 모든 직렬화 가능한 값
    또는 키-값 쌍으로 이루어진 데이터 객체를 전달하기 위해 사람이 읽을 수 있는 텍스트를 사용하는 open standard 포맷
  • JSON의 파일 확장자 .json

JSON 형태

  • 기본 자료형 : number, string, boolean, array, object, null
    • 자바스크립트의 문법을 차용
  • 객체의 형태와 유사

직렬화

  • 다양한 환경 간에 데이터를 주고받기 위해 직렬화 작업이 필요
  • 직렬화 serialization : Obejct → 문자열로 변환하는 것
  • 역직렬화 deserialization : 문자열 → Object로 변환하는 것

JSON 객체
: 값을 JSON으로 변환하는 method를 제공

  • 생성자 함수 아님
  • 함수로써 사용 불가능
  • 정적 Method
    • JSON.stringify : 직렬화하는 구문
    • JSON.parse : JSON 형태로 파싱하는 구문 (역직렬화)
      • 주의사항 : 문자열이 객체 형태가 아닌 경우, 오류 발생
      • try...catch 문으로 에러 핸들링 권장

2) 국제화

국제화 - Intl 객체

  • 각 언어에 맞는 문자, 숫자, 시간, 날짜비교를 제공하는 국제화 API를 위한 namespace
    • Intl이라는 namespace로 그루핑하고, 내부에 있는 생성자 속성들
  • 정적 method : Intl.supportedLocalesOf();
  • 속성 :
    • DateTimeFormat
    • NumberFormat
    • ...

국제화 - Intl 객체 - DateTimeFormat 생성자 함수
: 언어에 맞는 날짜, 시간 서식을 적용하기 위한 객체

  • 생성자 함수 : Intl.DateTimeFormat.prototype
  • 인스턴스
    • Method :
      • 포맷 결과 : format, formatRange
      • 포맷 결과를 각 단위별로 분해하여 배열화 : formatToParts, formatRangeToParts
      • ...

국제화 - Intl 객체 - NumberFormat생성자 함수
: 언어에 맞는 숫자 서식을 적용하기 위한 객체

  • 생성자 함수 : Intl.NumberFormat.prototype
  • 인스턴스
    • Method :
      • 포맷 결과 : format, formatRange
      • 포맷 결과를 각 단위별로 분해하여 배열화 : formatToParts, formatRangeToParts
      • ...
profile
조혜준
안녕하세요
이전 포스트

데이터 처리 : flow control

다음 포스트

데이터 처리 : 언어가 갖고 있는 매커니즘

0개의 댓글