[01.06] 객체와 빌트인 객체

2025.01.06 - [웹 개발 공부하기] - [01.06] flow control의 이해👏

💥  객체(Object)

속성을 가진 독립적인 개체(entity) = 속성(property)으로 구성된 짖ㅂ합

자바스크립트는 객체기반의 프로그래밍 언어 = 자바스크립트를 구성하는 대부분이 객체

 

객체(Object) - 속성(Property)

속성은 키와 값 사이의 연결관계 (key-value)

객체의 속성은 JavaScript의 변수와 유사한데, 객체에 속해있음

속성 접근 방법

 - 마침표 표기법 : objectName.propertyName

 - 대괄호 표기법 : objectName["propertyName"]

속성에는 값 뿐만아니라 함수도 할당 가능

 - method : 객체에 속해있는 함수를 method라고 함

 

객체(Object) - 속성 - method

method는 다른 함수와 동일하게 정의하지만, 객체 속성에 할당되어있음

ECMAScript 2015에서는 짧은 구문으로도 작성가능

 

💥 객체(Object) 생성 방법

 1) 리터럴 표기로 객체 생성

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

   - 변수명: 새로운 객체 이름

   - 콜론 앞 속성이름(name) : 식별자

   - 콜론 뒤 값('apple') : 속성에 할당할 표현식

 2) 생성자 함수로 객체 생성 (생성자 함수: new 키워드와 함께 객체를 생성하고 초기화하는 함수)

   - 속성만 같고 값만 다른 객체를 여러개를 생성해야 할 때, 번거로움이 있음

   - 생성자 함수를 사용하면, 템플릿처럼 사용하여 속성이 동일한 객체를 여러개 생성할 수 있음

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

     - 생성자 함수는 대문자로 시작 (일반함수와 구분)

     - this 키워드로 속성을 정의하여, 생성될 인스턴스를 가리키게 함

     - new 연산자를 활용하여 인스턴스를 생성

 3) Object.create로 객체 생성

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

   - 생성자: 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, setOwnPropertOf

 

 - 객체 속성

   - 객체 속성 추가 defineProperty, defineProperties,

   - 객체 속성 서술자 getOwnPropertyDescriptor, getOwnPropertyDescriptors,

   - 객체 속성 열거 getOwnPropertyNames, keys, getOwnPropertySymbols

 

 - 객체 속성의 값

   - 객체 값 비교 is

   - 객체 값 열거 values

 

💥 객체 속성 control

 - 객체는 원시타입과 다르게 변경 가능한 값이다.(mutable)

 - 객체는 전달하는 과정에서 참조형태로 전달된다.

   - 객체의 변경이 일어날 때 참조된 객체들도 같이 변경이 되는 문제점을 야기한다.

 

의도한 동작이 되기 위해서는 조작을 적절히 사용해야한다.

1) 객체의 속성 동적 생성

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

2) 객체의 속성들 나열하기

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

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

   - Object.getOwnPropertyNames(객체)     => 객체 자신만의 모든 속성을 배열로 반환

3) 객체의 속성 삭제하기

   - delete 연산자로 속성 삭제

   - delete 속성이름

   - 반환값: true

 

💥 객체 비교와 Reference

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

 1) 객체 비교

    - 객체 속성과 값이 같은 객체여도, 참조값이 다르므로 서로 다름

    - 자기 자신과의 비교에서만 true

 2) 객체를 복사할 경우

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

      - 정의된 객체를 다른 변수에 그대로 할당 할 경우, 동일한 메모리 주소(address)만 할당됨

      - 둘 중 하나의 객체를 수정한다면, 동일한 메모리 주소이기 때문에 두 변수가 참조하고 있는 객체가 수정되어

        결과적으로 2가지 객체 모두 변경사항에 영향을 받음

 

💥  얕은 복사 (Shallow copy) 

 - 복사된 객체의 속성 중 하나라도 같은 참조를 하고 있게되면, 얕은 복사로 복사되었다고 한다.

 - 객체의 속성 중 참조타입이 없는 경우에만 얕은복사 방법 권장

💥 깊은 복사(Deep copy)

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

 - 재귀함수를 이용한 복사  =>  (라이브러리: lodash - cloneDeep)

 - JSON.stringify  =>  객체 -> 문자열로 변환(참조가 끊어짐) -> 객체로 변환

 

객체의 종류에는 표준 빌트인 객체인 ECMAScript, 호스트 객체 (브라우저 기준)인 DOM API가 있다.

 

💥 표준 빌트인 객체: ECMAScript

 - 기초 객체 : Object, Function, Boolean, Symbol

   - 오류 객체 : Error

   - 숫자 및 날짜 : Number, BigInt, Math, Date

   - 텍스트 처리 : Regex(정규표현식), String(문자열)

   - Collection

     - Index based collection : Array(배열)

     - Key based collection : Map, Set, ...

   - 구조화된 데이터 : JSON

   - 제어 추상화 객체 : Promise, Generator, AsyncFunction, ...

 

 - 빌트인 객체 형태

  - 정적 static: 속성, method

   - 인스턴스 instance: 속성, method

     - {{ 객체.prototype.인스턴스method }}

       - e.g.Number.prototype.toFixed()

     -  기본적으로 Object 객체의 속성을 상속 받음  -> 프로토타입 메서드들을 모두 상속 toString(), toLocaleString(), valueOf()

     -  함수로써 바로 호출 사용

 

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

   - 함수로 바로 사용가능

     - Number('1.2') : Number로 타입 전환

   - Static 속성과 메서드

     - 속성: MAX_VALUE, MAX_SAFE_INTEGER, NaN, ...

     - 메소드

       - 확인하는 용도 : isNaN, isFinite, isInteger, ...

       - 파싱하는 용도 : parseInt, parseFloat

   - 생성자 함수

     - Number.prototype

     - 인스턴스 메서드 : toFixed, toLacalString, ...

   - 변수 또는 객체의 속성이 숫자를 갖고 있으면, 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()

       - ...

 

 - 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(시간문자열)

      1) 시간을 get하는 메서드

         ① 기본 - 현지시간 기준

            - 연, 월, 일, 요일 갖고오기 : getFullYear(), getMonth(), getDate(), getDay()

            - 시, 분, 초, 밀리초 갖고오기 : getHours(), getMinutes(), getSeconds(), getMilliseconds()

         ② UTC 기준

            - 한국시간은 9시간 차이나므로, getHours와 getUTCHours만 차이나고 나머지는 동일한 값 반환

         ③ UTC로부터 ~ 걸린 시간 갖고오기 (밀리초 기준) : getTime()

         ④ UTC와 ~ 현지 시간대 차이 갖고오기 (분 기준) : getTimezoneOffset()

         ⑤ getMonth() : 1월이 0부터 시작  => 0은 1월, 9는 10월, ...

         ⑥ getDay() : 일요일이 0부터 시작  => 0은 일요일, 1은 월요일, ...

         ⑦ toLocalDateString() 활용 시 현지에 맞는 요일 문자열을 얻을 수 있다.  

 

      2) 시간을 set하는 메서드

          ① 기본 - 현지시간 기준

            - 연, 월, 일, 요일 갖고오기 : setFullYear(), setMonth(), setDate(), setDay()

            - 시, 분, 초, 밀리초 갖고오기 : setHours(), setMinutes(), setSeconds(), setMilliseconds()

          ② UTC 기준

            - 한국시간은 9시간 차이나므로, setUTCHours 사용 시 유의

            - UTC로부터 ~ 걸린 시간 셋팅하기 (밀리초 기준) : setTime()

 

      3) Object 메서드 오버라이딩

          ① 최상위 객체가 갖고 있는 메서드 중 상속받는 메서드가 있다.

          ② valueOf()

            - UTC와 기준 시점사이의 밀리세컨즈 차이값

            - getTime() 과 동일한 값

          ③ toString()

            - {{ 요일 }} {{ 월 }} {{ 일 }} {{ 연도 }} {{ 시 }}:{{ 분 }}:{{ 초 }} GMT{{ +/- }}{{ 시간 차이값 }} ({{구성한 시간대 이름}})

            - Sat Oct 22 2022 18:43:12 GMT+0900 (한국 표준시)

            - Date() 와 동일한 값

 

 - 문자열 생성방법

   - 문자열 리터럴로 표현되며, 쌍따옴표(" "), 따옴표(' ')을 사용하여 표현

     - ECMAScript 2015 이상에서는 템플릿 리터럴(백틱 `) 사용 가능

   - String 객체 사용

 

 - 문자열 특징

   - 문자열 내에 이스케이프 문자 사용 가능 (\n)

   - 줄바꿈 문장 표현가능

     - 이스케이프 문자 활용 (\n)

     - 템플릿 리터럴 활용 (백틱 `)

   - 데이터 보관 시 문자열 형태로 저장 유용

     - 텍스트 형태로 저장

     - 객체형태 -> JSON.stringify로 변환하여 저장

 

 - 문자열 조작

   - 문자열 요소 접근

     - charAt

     - 유사배열이라 배열처럼 접근

   - 문자열 비교

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

   - 변수 또는 객체의 속성이 문자열을 갖고 있으면, String 객체 인스턴스 생성없이 String의 인스턴스 속성과 메서드 사용가능

 

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

   - 함수로 바로 사용 가능

     - String(...) : 문자열로 타입 전환

   - 정적 메서드 : fromCharCode, fromCodePoint, raw

   - 생성자 함수 : String.prototype

     - 인스턴스 속성 : length

     - 인스턴스 Method : 

       - 문자열 체크(get) : 접근, 찾기, 포함 여부, 비교

       - 문자열 변경(set) : 추가하기, 합치기, 분리하기, 변경하기

 

 - 인스턴스 Method - 문자열 체크(get)  => 문자열에 접근 / 문자열 내에 target 문자열이 어디 있는 지 찾기, 포함되어있는 지 비기

   - 접근 : at(), charAt(), charCodeAt(), codePointAt()

   - 찾기 : indexOf(), lastIndexOf(), search()

   - 포함 여부 : includes(), startsWith(), endsWith(), match(정규표현식), matchAll(정규표현식)

   - 비교 : localeCompare()

 

 - 인스턴스 Method - 문자열 변경(set)

   - 변경하기 : toLocaleLowerCase(), toLocaleUpperCase(), toString(), replace(), replaceAll(), ...

   - 추가하기 : padEnd(), padStart(), repeat()

   - 합치기 : concat(), 산술연산자

   - 분리하기 : slice(), substring(), split(), trim(), trimStart(), trimEnd()

 

 - 정규표현식 : 문자열에서 특정 문자 조합을 찾기 위한 패턴 (== 정규식)   =>   /pattern/flags (예시 : /\w+\s/g)

   - 단순 패턴 사용

   - 특수 문자 사용 : 어서션, 문자클래스, 그룹과 범위, 수량자, 유니코드 속성 이스케이프

   - flag를 활용하여 탐색 : d, g, l, m, s, u, y

   - 리터럴 표기법

     - 평가할 때 정규 표현식을 컴파일한다.

     - 정규식이 변하지 않으면, 리터럴 표기법 사용

     - /pattern/flag

   - RegExp 객체

     - 런타임 때 컴파일된다.

     - 패턴이 변할 가능성은 있거나, 알 수 없는 데이터에서 가져오는 정규식의 경우 생성자 함수 사용

     - new RegExp (/pattern/, flag)

 

 - Collection : 비용을 절감하기 위하여, 상황하마 효율적인 데이터 형태로 처리해야한다

컬렉션은 데이터 항목들의 그룹을 의미한다. 컬렉션에는 list, set, tree, graph 등이 포함되어 있다.

 - Indexed collections

   - Index 값을 기준으로 정렬되어있는 데이터 집합

     - Array, TypedArray 포함

   - index로 배열 내의 값을 참조할 수 있다.

 

 - key based collections

   - key 값을 기준으로 정렬되어있는 데이터 집합

     - Map, Set 포함

   - 키와 값을 매핑하여 저장한다.

   - 저장된 순서대로 각 요소들을 반복적으로 접근할 수 있다.