데이터 처리 > 객체와 빌트인 객체 그리고 매커니즘

📌 객체란

• 속성을 가진 독립적인 개체
  • 객체는 속성(프로퍼티)으로 구성된 집합
• 자바스크립트는 객체기반의 프로그래밍 언어

속성 property

• 키와 값 사이의 연결관계
• 속성 접근 방법
  • 마침표 표기법 objectname.propertyname
  • 대괄호 표기법: objectname["propertyname"]
• 속성에는 값 뿐만 아니라 함수도 할당 가능
  • method: 객체에 속해있는 함수

생성 방법

1. 리터럴 표기로 객체 생성
2. 생성자 함수로 객체 생성
3. object.create로 객체 생성

리터럴 표기

• const foo = {name: "apple"};
• 변수명: 새로운 객체의 이름
• 콜론 앞 속성이름(name): 식별자
• 콜론 뒤 값('apple'): 속성에 할당할 표현식

생성자 함수

• 속성만 같고 값만 다른 객체를 여러개 생성해야 할 때, 번거로움
• 생성자 함수를 사용,
• 탬플릿처럼 사용하여 속성이 동일한 객체를 여러개 생성할 수 있다.
  • 생성자 함수란? : new 키워드와 함께 객체를 생성하고 초기화하는 함수
• 생성자 함수를 정의한후, 생성자 함수를 활용하여 객체 인스턴스를 생성

(인스턴스: new 키워드로 생성된 객체)

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

object.create

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

📌 객체 속성 control

객체 속성 조작하기

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

  1. 객체의 속성 동적 생성
  2. 객체의 속성들 나열하기
  3. 객체의 속성 삭제하기

동적 생성

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

  const person = {
   name: 'jason',
   age: 25,
  }
  person.gender = 'female';

나열 하기

객체의 속성을 나열하는 3가지 방법

1. for...in

• 모든 열거 가능한 속성을 순회한다.(객체의 프로토타입 체인의 속성까지)

2. object.keys(객체)

• 객체 자신의 열거 가능한 속성 이름을 배열로 반환

3. object.getownpropertynames(객체)

• 객체 자신만의 모든 속성을 배열로 반환

삭제하기

• delete 연산자로 속성 삭제
• delete 속성이름
• 반환값: true

📌 객체간 비교와 복사

객체는 참조타입 Reference type

• 객체 참조 타입: 모든 연산이 참조값(메모리 주소)로 처리
• 객체 비교
• 객체를 복사할 경우

객체 비교

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

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

• 정의된 객체를 다른 변수에 그대로 할당 할 경우, 동일한 메모리 주소만 할당됨
• 둘 중 하나의 객체를 수정한다면, 동일한 메모리 주소이기때문에 두 변수가 참조하고 있는 객체가 수정되어 결과적으로 2가지 객체 모두 변경사항에 영항을 받는다
• 객체 복사의 2가지 방법
  • 얕은 복사
    • 복사된 객체의 속성 중 하나라도 같은 참조를 하고 있게되면, 얕은 복사로 복사되었다고 한다.
    • 객체의 속성 중 참조타입이 없는 경우에만 얕은복사 방법 권장
    • object.assian({}, 복사할 객체)
    • spread 연산자 {...복사할 객체}
  • 깊은 복사
    • 복사된 객체의 속성 중 하나라도 같은 참조를 하고 있는 속성이 없다면 깊은 복사로 복사되었다고 한다.
    • deep copy의 방법은 2가지
      1. 재귀함수를 이용한 복사
      2. JSON.stringify
         객체 -> 문자열로 변환(참조가 끊어짐) -> 객체로 변환

📌 객체의 종류

객체의 분류

• 표준 빌트인 객체 ecmascript
• 호스트 객체(브라우저 기준):dom api

표준 빌트인 객체 ECMAScript

• 기초 객체 : object, function, boolean, symbol
  • 오류 객체: error
  • 숫자 및 날짜: number, bigint, math, date
  • 텍스트 처리: regex(정규표현식), string(문자열)
  • collection
    • array, map, set
• 구조화된 데이터 : JSON
• 제어 추상화 객체 : Promise, Asyncfunction

빌트인 객체 형태

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

📌 number, math

Number

• 숫자를 표현하고 다룰 때 사용하는 원시 래퍼 객체
• 함수로 바로 사용 가능
• Static 속성과 메서드
  • 속성: MAX_VALUE, MAX_SAFE_INTEGER,NaN...
• 메소드:
  • 확인하는 용도: isNaN, isFinite, isInteger,...
  • 파싱하는 용도: parseInt, parseFloat
• 생성자 함수
  • Number.prototype
  • 인스턴스 메서드: toFixed, tolocalstring,...
• 변수 또는 객체의 속성이 숫자를 갖고 있으면,
  • Number객체 인스턴스 생성없이 Number의 인스턴스 속성과 메서드 사용가능

math

• 수학적인 상수와 함수를 위한 속성과 메서드를 가진 빌트인 객체
• math는 생성자가 아님. 정적 속성과 메서드만 지원
• static 속성과 메서드

📌 date

Date 와 UTC

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

• 한국은 utc기준으로 9시간이 더해진다.
• 한국은 -540분 == 9시간
• 생성자 함수 (Date.prototype)
• static 속성과 메서드
  • 메소드:now(), parse(), utc()

Date 인스턴스 메서드

new Date()
new Date(시간문자열)

• 시간을 get 하는 메서드
• 시간을 set 하는 메서드

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

• 기본
  • 연,월,일 요일 갖고오기: getFullYear(),getMonth(), getDate(), getDay()
  • 시, 분, 초, 밀리초, 갖고오기: getHours(), getMInutes(), getSeconds(), getMillisecond()
• utc로부터 ~ 걸린 시간 갖고오기(밀리초 기준):getTime()
• utc와 ~ 현지 시간대 차이 갖고오기(분 기준): getTimezoneoffset()

📌 문자열

생성 방법

• 문자열 리터럴로 표현되며, 쌍따옴표(""),따옴표를 사용하여 표현
• 탬플릿 리터럴(백틱) 사용 가능
• string 객체 사용

문자열 특징

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

문자열 조작

• 문자열 요소 접근
  • charAt
  • 유사배열이라 배열처럼 접근
• 문자열 비교
  • 알파벳순을 비교하여서 순서가 뒤에올 수록 크다고 판단

string 객체

• 문자열을 다룰 때 사용하는 원시 래퍼 객체
• 정적메서드: fromcharcode, fromcodepoint, raw
• 생성자 함수: string.prototype
  • 인스턴스 속성: length
  • 인스턴스 method:
    • 문자열 체크(get): 접근, 찾기, 포함 여부, 비교
    • 문자열 변경(set): 추가하기, 합치기, 분리하기, 변경하기

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

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

문자열 변경

• toLocaleLowerCase(), toLocaleUpperCase(), toString(), replace(), replaceAll()
• 추가하기: repeat()
• 합치기: concat()
• slice(), substring(), split(), trim()..

📌 정규표현식 - 문법

정규표현식 - 문법

• 문자열에서 특정 문자를 조합하기 위한 패턴(== 정규식)

정규표현식 - 생성방법

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

RegExp 객체 🤝 String 객체

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

📌 collection 개요

Collection이란 ?

• 비용 절감하기 위해 상황마다 효율적인 데이터 형태로 처리해야한다.
• 컬렉션은 데이터 항목들의 그룹을 의미
  • 컬렉션에는 list, set, tree, graph 등이 포함
• 자바스크립트에서는 2가지 타입의 collection이 있다.
  • indexed(index 값을 기준으로 정렬되어있는 데이터 집합)
  • keyed(키 값을 기준으로 정렬되어 있는 데이터 집합)
    • Map, Set 포함

📌 index collection - 배열

Array

• 이름과 인덱스로 참조되어 정렬된 값들의 집합
• 다른 언어와 다르게, 자바스크립트는 명시적인 데이터 타입을 갖고있지 않음
  • 배열 객체를 사용

JavaScript 의 Array 객체

• 0개 이상의 식(배열요소) 목록
• 배열을 만들때,
  • 각 요소로 지정된 값으로 초기화
  • 배열의 길이는 지정된 요소의 갯수로 결정
    • 길이가 고정되어있지 않다.

Array 객체 - 생성방법

• 배열 리터럴: 대괄호로 묶인다.[]
• Array 객체 생성자

특징

• 배열의 길이: 마지막 index에 + 1
• 길이 지정 가능
• 배열의 반복 처리( for문, for each 문)

인스턴스 메서드

• 요소 check
  • 요소 접근: at()
  • 요소 찾기: indexOf(), lastindexOf(),
  • 요소 포함 여부: includes()
  • 순회하며
    • 요소 확인하기: forEach()
    • 요소 판별하기: every(), some()
    • 요소 찾기: find(), findIndex()
• 요소 조작
  • 요소 추가하기: push(), unshift()
  • 요소 제거하기: pop(), shift()
  • 순회하며
    • 요소 변경하기: flapMap(), map()
    • 요소 제거하기: filter()

인스턴스 메서드

• 배열 합치기, 추가하기: concat(), fill()
• 배열 분리하기: slice(), splice()
• 배열 요소 변경하기: copywithin(), flat()
• 배열 재배치하기: reverse()
  • 순회하며 재배치하기: sort()

반환 타입 변환하기

• 문자열로: join(), toLocaleString(), toString()
• iterator로: entries(), values()
• 순회하며
  • 타입 변환하기: reduce(), reduceRight()

📌 key based collection - Map, WeakMap

key based collection

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

Map객체와 WeakMap객체 공통 속성

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

Map 객체 - 특징

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

Map과 Object의 차이점

속성의 데이터 타입

• object : string, symbol 데이터 타입만 가능
• Map: 모든 값을 키로 활용 가능

default 속성과의 충돌

• object: object prototype의 기본속성과 동일한 키를 생성시 충돌
• Map: map은 기본적으로 갖고 있는 속성이 없어, 기본 속성들과 충돌없음

객체의 크기

• object : 수동으로 추적해야함
• map: size 인스턴스 속성으로 얻을 수 있음

순서 보장

• object : 은 순서 보장이 안됨
• map: map은 추가된 순서대로 반복된다

퍼포먼스

• object : 키, 값쌍의 빈번한 추가제거에는 퍼포먼스가 좋지 않음
• map : 키, 값쌍의 빈번한 추가제거에는 map이 퍼포먼스가 좋다

직렬화 구문분석 제공

• object: 직렬화 구문분석 제공
  • (json.stringify, json.parse)
• map: 제공 x

Map 객체

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

weakmap - 특징

• 키에 대한 강력한 참조를 생성하지 않는 키 / 값 쌍의 모음
  • 키는 object만을 허용
• 객체 정보를 비노출
• 생성자 함수: weakmap.prototype
• 인스턴스
  • 속성: size
  • Method:
    • 요소 체크(get): 접근, 포함 여부 - get, has
    • 요소 변경(Set): 추가하기, 제거하기, delete, set
    • 순환관련 - 없음

📌 Set

Set, WeakSet 공통 속성

• 중복된 값을 허용하지 않는다.
  • 값이 같은지 검사를 수행한다.
• 배열을 인자로 받을 수 있다.
  • 배열의 요소가 set객체의 요소로 저장됨
  • 중복된 요소가 제거된다.

Set의 특징

• 모든 값들의 집합(값 콜렉션)
• 입력된 순서에따라 저장된 요소를 반복처리
• 특정 값은 Set내에서 하나만 존재
• 배열 -> set 으로 set -> 배열로 변환 가능
• for...of 통해 순회 가능

  Set과 배열의 차이점

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

Set 객체

• 요소 체크(get): 접근, 포함 여부 - has,
• 요소 변경(set): 추가하기, 제거하기, 변경하기 -clear, delete, add

📌 Json 객체

JSON

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

JSON 형태

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

JSON 객체

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

📌 국제화

intl 객체

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

DateTimeFormat 생성자 함수

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

📌 프로토타입과 생성자 함수

객체 지향 프로그래밍

• 객체는 현실의 개념을 추상화하여 정의
  • 상태를 갖고 있고 -> this
  • 식별자(속성)을 갖고 있고, -> 속성
  • 어떤 행동을 갖고 있다. -> 메서드
• 인스턴스 객체
  • 개념의 일원으로써 생성된 객체
• 객체지향 프로그래밍:
  • 객체라는 기본 단위로 나누고, 이들의 상호작용으로 서술하는 방식
• 대표적인 객체지향 프로그래밍
  • 클래스 기반 객체지향 - 자바, ...
  • 프로토타입 기반 객체지향 -> 자바스크립트, ...

프로토타입 객체

• 객체의 인스턴스를 만드는 부모 객체 개념
• 자바스크립트의 모든 객체는 부모 객체인 프로토타입 객체와 연결
• 부모객체의 속성과 메서드를 상속 받아 사용 가능

프로토타입 객체 - 접근하기

• 모든 객체가 갖고 있는 [[Prototype]] 인터널 슬롯
  • [[Prototype]] 은 상속을 위해 사용
• _proto__ 라는 접근자 속성으로 접근 가능(Object.prototype 객체에 접근)

프로토타입 객체 - 생성하기

• 함수타입에만 존재하는 prototype 필드
• 함수에 부모객체 존재
  • 함수를 활용하여 -> 부모객체의 인스턴스 생성가능
• 생성자 함수
  • 인스턴스 객체 생성시 사용
  • 대문자 함수명 컨벤션
  • new 키워드와 함께 호출
• 인스턴스의 부모객체 == 생성자함수.prototype
• constructor: 자기 자신을 생성한 객체 참조

📌 프로토타입 chain과 상속

속성이 없는데 조회된다?

프로토타입 chain

• 객체의 속성 참조시, 속성이 없는 경우 프로토타입 체인 동작
  • [[Prototype]] 을 통해서 부모 객체를 탐색
• 모든 객체의 부모는 Object.prototype
  • End of prototype chain
    프로토타입 체인의 종점
• 만약 마지막 부모 객체(object.prototype)에서까지 속성을 찾지 못할 경우, undifined 반환

프로토타입 객체의 확장과 상속

• prototype 객체 속성과 메서드 정의시
  • 인스턴스 객체에서 부모 메서드와 속성을 차조
• 객체와 프로토타입에 동일한 이름의 속성이나 메서드가 있는 경우
  • 객체의 속성이 먼저 참조
  • property shadowing: 프로토타입 속성이 가려지는 현상
  • method overriding: 프로토타입 메서드가 가려지는 형상

📌 class 문법

📌 this와 화살표 함수

📌 스코프

📌 실행 컨텍스트

📌 클로저