[클라우딩 어플리케이션 엔지니어링 TIL] 240109 - JS 객체, 빌트인 객체

Intro

---

오늘은 인풋이 너무 너무 많은 날이었다.

강의도 엄청 많고.. 프로토타입이랑 스코프, 실행 컨텍스트 등등 자바스크립트에서 엄청 중요한 특징들을 다 배웠다. 하루만에...

거기다가 Github A to Z 특강까지 들어서 조금 빡셌다. ㅠㅠ

 

 

오늘 학습한 내용

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

---

객체

프로토타입 기반 객체지향 언어인 자바스크립트에서 객체는 매우 중요하다.

객체란, 속성을 가진 독립적인 개체 (속성으로 구성된 집합)이다.

 

⚠️ 객체 지향 프로그래밍

객체라는 기본 단위로 나누고 이들의 상호작용으로 서술하는 방식

실세계에 존재하고 인지하고 있는 객체(Object)를 소프트웨어의 세계에서 표현하기 위해 객체의 핵심적인 개념 또는 기능만을 추출하는 추상화(abstraction)를 통해 모델링하려는 프로그래밍 패러다임 - poiemaweb

 

객체 지향 프로그래밍에는 클래스 기반 언어와 프로토타입 기반 언어가 있는데 대표적인 클래스 기반 언어는 Java, C++ 등이 있고 자바스크립트는 프로토타입 기반 언어에 속한다.

 

객체 속성

: 키와 값 사이의 연결관계 (key-value)

• 속성 접근 방법
  • objectName.prototypeName
  • objectName["prototypeName"]

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

 

객체 생성 방법

• 리터럴 표기법

const foo = { name: 'apple' }

• 생성자 함수
  • 속성만 같고 값이 다른 객체를 여러개 생성할 때
  • 생성자 함수를 정의한 후, 생성자 함수를 활용하여 객체 인스턴스를 생성한다.

function Person(name, age) {
  this.name = name
  this.age = age
}

new Person('gayeon', 29)

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

 

객체 속성 컨트롤

객체는 참조 형태로 전달되며 변경 가능한 값이다.

➡️ 이는 객체 변경이 일어날 때 참조된 객체들도 같이 변경되는 문제점을 야기한다. (참조 형태로 같은 주소값을 바라보고 있기 때문) 때문에 의도한 동작이 되기 위해 적절한 조작이 필요하다.

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

const person = {
  name: 'gayeon',
  age: 25,
}

person.gendor = 'w'; // 동적 생성

• 객체 속성 나열
  • for...in
  • Object.keys(객체)
  • Object.getOwnPropertyNames(객체)

function Person(name, age) {
  this.name = name
  this.age = age
}

const gayeon = new Person('gayeon', 29)

for(key in gayeon) {
  console.log(key)
} /* 
name
age
*/

Object.keys(gayeon) // ['name', 'age']
Object.getOwnPropertyNames // ['name', 'age']

• 객체 속성 삭제 (delete 키워드)

function Person(name, age) {
  this.name = name
  this.age = age
}

const gayeon = new Person('gayeon', 29)
delete gayeon.name // true
console.log(gayeon) // Person { age: 29 }

 

 

객체 비교와 복사

객체 비교

: 객체를 서로 비교하면 속성과 값이 같아도 참조값이 다르기 때문에 false가 나온다.

동일한 객체를 생성해야 할 때 정의된 객체를 다른 변수에 그대로 할당할 경우, 동일한 메모리 주소만 할당되기 때문에 값이 변경되면 다른 변수의 값도 변경되기 때문에 객체 복사를 통해 구현해야 한다.

const obj = { a: 'a', b: 'b', c: 3 }
const obj2 = { a: 'a', b: 'b', c: 3 }
const obj3 = obj

obj === obj2 // false
obj === obj3 // true

obj.a = 'aaa'
console.log(obj3) // {a: 'aaa', b: 'b', c: 3}

 

객체 복사의 2가지 방법

• 얕은 복사
  • 객체 속성 중 참조 타입이 없는 경우 얕은 복사 방법 권장
  • Object.assign({}, 복사할 객체)
  • spread 연산자 { ...복사 객체 }

const obj = { a: 'a', b: 'b', c: 3 }
const obj2 = Object.assign({}, obj)
const obj3 = { ...obj } 

obj2 // { a: 'a', b: 'b', c: 3 }
obj3 // { a: 'a', b: 'b', c: 3 }

obj === obj2 // false
obj === obj3 // false

• 깊은 복사
  • 복사된 객체 속성 중 하나라도 참조를 하고 있는 속성이 없다면 깊은 복사로 복사되었다고 한다.
  • 깊은 복사 방법
    • 재귀 함수를 이용한 복사 (추천 라이브러리: lodash - cloneDeep)
    • JSON.stringify: 객체 -> 문자열로 변환 -> 객체로 변환 (JSON.parse)  권장하지 않는 방식

 

객체 종류

1. 표준 빌트인 객체 ECMAScript
2. 호스트 객체 (브라우저 기준) DOM API

 

 표준 빌트인 객체 ECMAScript 

기본적으로 Object 객체 속성을 상속 받는다. ➡️ 프로토타입 메서드들을 모두 상속 (toString(), toLocaleString(), valueOf()..)

• 기초 객체: Object, Function, Boolean, Symbol
• 오류 객체: Error
• 숫자 및 날짜: Number, BigInt, Math, Date
• 텍스트 처리: Regex, String
• Collection: Array, Map, Set ...
• 구조화된 데이터: JSON
• 제어 추상화 객체 (Promise, Generator, AsyncFunction, ...)

 

Date와 UTC

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

 

✅ UTC

• Universal Time Coordinated 국제 표준 시간의 협정 세계시
• 국제적인 표준 시간의 기준으로 쓰이는 시각
• 인터넷, WWW, 항공 등에서 사용된다.
• 한국은 UTC기준으로 +9시간

✅ 날짜 표기와 ISO 8601

• ISO 국제 표준화 기구에서 날짜를 표현하는 방식을 표존화 하였다.
• ISO 8601
  • YYYY-MM-SSTHH:mm:ssZ (많이 사용)
  • 혼합된 일시 표현 시 T 구분자 사용
  • UTC 날짜라는 의미로 Z 표현

 

정규 표현식

: 문자열에서 특정 문자 조합을 찾기 위한 패턴

/pattern/flags (ex. /\w+\s/g)

 

정규 표현식 생성 방법

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

 

✅ 정규표현식 플래그(flag) 종류

• d: dotAll
• g: global
• i: ignore case
• m: multiline
• s: souce
• y: sticky
• u: unicode

 

 

Collection

: 데이터 항목들의 그룹을 의미 (list, set, tree, graph 등이 포함되어 있다.)

✅ 자바스크립트의 Collection

• Indexed Collections
  • Index 값을 기준으로 정렬된 데이터 집합 ➡️ Array, TypedArray
• Keyed Collections
  • Key 값을 기준으로 정렬되어 있는 데이터 집합 ➡️ Map, Set
  • 키와 값을 매핑하여 저장
  • 저장된 순서대로 각 요소들을 반복적으로 접근할 수 있다.

 

Indexed Collections - Array

• 1개의 변수에 여러 개의 값을 순차적으로 저장할 때 사용
• 0개 이상의 식 목록
• 길이는 고정되어 있지 않고 모든 요소는 필수값이 아니다. (undefined 사용 가능)
• 배열 생성 방법
  • []
  • new Array(arrayLength)
  • new Array(element0, element1, ...)
• index로 참조하며 0부터 시작한다. (배열의 길이 = 배열의 마지막 index + 1)
• index 값을 속성 이름으로 사용해 표준 객체의 속성처럼 저장한다.
• for, forEach로 배열 반복

 

Key based Collections - Map, WeakMap, Set, WeakSet

Map, WeakMap

: 키와 값을 매핑시켜 저장한며 key는 unique

• Map: 간단한 키와 값을 서로 매핑시켜 저장하고 저장된 순서대로 요소를 반복적으로 접근할 수 있다.
• WeakMap: 키에 대한 강력한 참조를 생성하지 않는 키/값 쌍의 모음으로 키는 object만 활용한다. 객체 정보를 비노출하는 특징이 있어 객체의 사적인 정보를 저장하고 상세 구현내용을 숨기기 위해 사용한다.

✅ Map VS Object

	Object	Map
속성의 데이터 타입	키로 string, Symbol 타입만 가능	모든 값을 키로 활용
default 속성과의 충돌	Object prototype의 기본 속성과 동일한 키 생성 시 충돌	기본 속성이 없어 충돌 X
객체 크기	수동 추적	size 인스턴스 속성으로 확인 가능
순서 보장	X	O
iterable	X	O (foreach 제어문 사용 가능)
퍼포먼스	덜 좋음	좋음
직렬화 구문분석 제공	O	X

 

 

Set, WeakSet

: 배열을 인자로 받을 수 있으며 중복된 값을 허용하지 않는다.

• Set
  • 모든 값들의 집합
  • 입력된 순서에 따라 저장된 요소를 반복 처리
  • NaN은 Set에서 같은 것으로 간주함
  • 배열 -> Set, Set -> 배열로 변환 가능하며, for...of를 통해 순회 가능하다.
• WeakSet
  • 객체 컬렉션 (object 값만을 허용)
  • 약한 참조를 가짐

const foo = new WeakSet()
foo.add({ foo: 1 })

 

✅ Set VS Array

	Array	Set
포함 여부 확인 퍼포먼스	indexOf (퍼포먼스 느림)	has 메서드
요소 제거	요소 제거하면 배열을 잘라내야 함	delete 메서드
요소 찾기	NaN은 indexOf 포함여부를 확인 불가함	Set은 확인 가능
중복 여부 확인	순회하며 확인해야 한다.	중복 불가가 기본

 

 

JSON (JavaScript Object Notation) 객체

: 인터넷에서 자료를 주고받을 때 자료를 표현하는 방법으로 알려져 있음

• 키-값 쌍, 배열 자료형, 키타 모든 직렬화 가능한 값으로 이루어진 데이터 객체를 전달하기 위해 사람이 읽을 수 있는 텍스트를 사용하는 open standard 포맷
• 확장자: .json
• 객체 형태와 유사하다.
• 생성자 함수가 아니며, 함수로서 사용 불가하다.

⚠️ 문자열이 객체 형태가 아닐 경우, 오류 발생 -> try...catch문으로 에러 핸들링 권장 ⚠️

 

📌 직렬화 (serialization), 역질렬화 (deserialization)

• 직렬화: Object ➡️ 문자열 (JSON.stringify)
• 역질렬화: 문자열 ➡️ Object (JSON.parse)

 

국제화 (intl 객체)

: 각 언어에 맞는 문자, 숫자, 시간, 날짜 비교를 제공하는 국제화 API를 위한 네임스페이스

• DateTimeFormat
• NumberFormat

 

 

 프로토타입 기반 언어 

⚠️ 프로토타입 객체

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

프로토타입 객체 접근하기

• 모든 객체는 [[Prototype]] 인터널 슬롯을 가지고 있다.

• __proto__라는 접근자 속성으로 Object.prototype 객체에 접근이 가능함

 

프로토타입 객체 생성하기

• 함수 타입에만 존재하는 prototype 필드
• 함수를 활용하여 부모객체의 인스턴스 생성 가능
• 인스턴스 부모객체 == 생성자함수.prototype

 

프로토타입 체인 (chain)

• 객체 속성 참조시, 속성이 없는 경우 프로토타입 체인이 동작함
• 모든 객체의 부모는 Object.prototype ➡️ End of Prototype chain
• 만약 마지막 부모객체에서까지 해당 속성을 찾지 못할 경우, Undefined

 

프로토타입 객체 확장과 속성

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

 

 

Class

ES6+ Class
: 클래스 기반 언어에 익숙한 개발자가 빠르게 학습할 수 있도록 ES6이상부터 class 문법이 추가됨 (프로토타입 기반 패턴의 문법 설탕)

 

Class 문법

• constructor
  • 인스턴스 생성 시 호출되는 메서드
  • 인스턴스 생성 시 전달한 인자를 constructor 메서드를 인자로 받을 수 있다.
  • 생략 가능
• 인스턴스 메서드
  • 클래스 내에 존재하는 메서드
  • 메서드 내에서 클래스를 this로 접근 가능
  • 클래스의 인스턴스 속성에도 접근 가능
• 정적 메서드
  • 클래스의 인스턴스를 생성하지 않아도 호출할 수 있는 메서드를 정의할 때 사용
  • static 키워드 사용
  • util용 함수를 정의할 때 사용한다.

class Person {
  constructor(age) {
    this.age = age;
  }

  static legCount() {
    return 2;
  }
}

Person.legCount()

• 인스턴스 속성
  • 클래스 내부에 캡슐화된 변수 === 멤버 변수
  • this에 추가한 속성
  • 속성은 인스턴스 생성 이후 바로 참조해야 하므로, 인스턴스 속성 초기화는 보통 constructor에서 진행함
  • getter
    • 특정 인스턴스 속성을 조회하며 조작하는 메서드
    • 이름 앞에 get 키워드를 사용해 생성하며 getter메서드는 무조건 값을 반환해야 함
    • 사용 시, 일반 메서드처럼 호출하지 않고 속성처럼 참조하는 형식으로 사용
  • setter
    • 특정 인스턴스 속성을 할당하며 조작하는 메서드
    • 메서드 이름 앞에 set 키워드를 사용하며 하나의 인자를 무조건 받도록 정의해야 함
    • 사용 시, 일반 메서드처럼 호출하지 않고 속성처럼 할당하는 형식으로 사용
• 클래스 상속 - extends
  • 코드의 재사용 관점에서 상속이 필요함
  • extends, super 키워드로 상속 구현'
  • super()
    • 부모 클래스의 생성자를 호출
    • 자식 클래스의 생성자가 this에 접근하고 수정 가능
    • 자식 클래스의 constructor 사용 시 constructor 반환문 전에 꼭 사용해야 함 

class 부모 { ... }
class 자식 extends 부모 {
  constructor() {
    super()
    ...
  }
  ...
}

 

 

 

this

: 컨텍스트 참조 가능한 키워드이며 객체를 참조하는 역할, 어떤 객체인지 동적으로 결정된다.

 

⚠️ 전역객체에서 this 사용 시, this는

• 브라우저: window
• server-side (node): global

함수 내부에서 this는 전역 객체에 바인딩된다.

➡️ 객체 메서드 내에 내부 함수가 있을 경우, 함수 호출 방식으로 취급되어 this가 전역객체를 바라본다. 이를 해결하기 위해, this를 다른 변수에 저장하고 사용하거나 내부 함수를 해당 객체에 bind 해야 함

const foo = {
  name: 'joy',
  age: 28,
  getName() {
    const that = this
    function getAge() {
      console.log(that.age)
    }
    getAge()
  }
}

foo.getName() // 28

const foo = {
  name: 'joy',
  age: 28,
  getName() {
    console.log(this.name)
  }
}

const bar = {
  name: 'kei'
}

bar.getName = foo.getName
foo.getName() // joy
bar.getName() // kei​

 

this 바인딩 - 생성자 함수 호출방식

1. 빈 객체 생성, this 바인딩 ➡️ this는 빈 객체에 바인딩
2. this로 속성 생성 ➡️ this를 사용하여 동적으로 속성과 메서드 생성
3. 생성된 객체 반환 ➡️ 반환문이 없어도 1번에서 생성되었던 객체가 반환 됨

 

this 바인딩 - apply, call, bind

: this를 명시적으로 바인딩하는 방법

• Function.prototype.apply
  • 함수명.apply(바인딩할 객체, [함수 호출 시 넘기는 인자들])
• Function.prototype.call
  • 함수명.call(바인딩할 객체, 함수 호출 시 넘기는 인자1, …)
    1. 함수 내의 this에 바인딩할 객체가 바인딩 됨
    2. 함수에 인자들이 전달됨
    3. 함수 호출

• Function.prototype.bind
  • 함수명.bind(바인딩할 객체)
    1. 함수 내의 this에 바인딩할 객체가 바인딩
    2. 바인딩 된 함수 반환

apply, call은 바인딩한 동시에 함수를 호출하며 bind는 바인딩과 함수 호출이 분리되어 있음

 

this 바인딩 - 화살표 함수

: 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되며 항상, 상위 스코프 this를 가리킨다.

const foo = {
  name: 'joy',
  age: 28,
  getName: () => {
    console.log(this.name) // 여기서 this는 전역객체
  }
}

foo.getName() // ''

 

⚠️ 화살표 함수를 지양해야 하는 사용 형태

• 객체의 메서드 (+ prototype 메서드)
• 생성자 함수 (화살표 함수는 prototype 객체가 없음)

 

 

Scope

: 변수가 유효성을 갖는 영역

 

Scope 규칙

• 정적 영역 규칙 lexical(static) scoping rule
  • 어디서 호출한지가 아니라, 어디에 선언하였는지에 따라 스코프가 결정됨
  • 자바스크립트는 이 규칙을 따름
• 동적 영역 규칙 dynamic scoping rule
  • 어디서 호출하였는지에 따라 스코프 결정
  • 런타임 시 결정됨

 

Scope 종류

• 전역 스코프: 소스 코드상 모든 곳에서 사용할 수 있는 전역 변수
• file 스코프: 해당 파일 전체에서 접근 가능
  • ES6+ 자바스크립트에서 <script type="module" ...>로 조회되는 파일
• 모듈 스코프
• 함수 레벨 스코프
  • 지역변수: 함수 내에 유효한 변수
  • 자바스크립트는 기본적으로 함수 레벨 스코프이다.
• 블록 레벨 스코프
  • 지역변수: 코드블럭 내에서 유효한 변수
  • ES6+ JS: let, const는 블록레벨 스코프

블록 레벨 스코프 예시)

const foo = 'foo'

{
  const bar = 'bar'
}

console.log(bar) // ReferenceError: bar is not defined

 

함수 레벨 스코프 예시)

var foo = 'foo'

{
  var bar = 'bar'
}

console.log(bar) // 'bar'

 

 

실행 컨텍스트

: 코드가 실행되는 범위에 대한 개념

자바스크립트를 실행하기 위해 필요한 정보

• 변수
• 함수 선언
• 변수의 유효범위 (스코프)
• this

➡️ 이러한 정보를 물리적 객체 형태로 관리한다. 

 

실행 컨텍스트의 생성 단계 - Createion Phase

코드 평가단계에서 Lexical Environment 생성

• 함수와 변수를 기록 (Environment Record)
  • 선언 정의, 객체 정의
  • this 바인딩: 함수 호출 여부에 따라 달라짐
• 외부 환경 참조 (Outer Environment Reference)
  • 스코프 체인 형성

실행 컨텍스트의 실행 단계 - Execution Phase

코드 실행단계에서 위에서 아래로 코드를 실행

변수는 값이 할당되고 함수 실행 코드가 있을 경우 함수를 실행한다.

 

✅ 자바스크립트의 Call Stack

: 자바스크립트 엔진이 호출된 함수와 순서를 추적하는 방법

• 어떤 함수가 동작하고 있는지 다음에 어떤 함수가 호출되어야 하는지를 제어함
• Stack 자료구조 (LIFO)를 사용함
• 콜 스택: 함수 호출 시 만들어지는 실행 컨텍스트가 쌓이고 하나의 일만 처리 가능함
• 자바스크립트 엔진은 코드를 평가하여 실행 컨텍스트를 만들어 ➡️ 콜 스택에 하나씩 쌓고 ➡️ 콜 스택에서 실행 컨텍스트를 실행하며 ➡️ 스택에서 하나씩 없앤다.

 

 

클로저

: 함수가 종료되었는데 아직 참조가 남아있는 경우

➡️ 외부 함수 실행 컨텍스트 환경의 변수를 참조하고 있는 내부 함수 실행 컨텍스트

자신을 포함하고 있는 외부함수보다 내부함수가 더 오래 유지되는 경우, 외부 함수 밖에서 내부함수가 호출되더라도 외부함수의 지역 변수에 접근할 수 있는데 이러한 함수를 클로저(Closure)라고 부른다. - poiemaWeb

 

함수가 종료되어도 스코프를 기억하여 특정 스코프에 접근할 수 있는 함수이며 상태 유지, 은닉화에 사용한다.

 

 

 

 

마무리

---

어제부터 강의가 너무 많아져서 새벽까지 공부하느라 힘들었다. 😭

집중력 향상을 위해 방이랑 책상도 깔끔하게 치우고 공부할 거만 꺼내 놓아야지.. 하루종일 교육에 집중할 수 있는 환경을 만들어야겠다.

낼은 아침 일찍 일어나서 운동 다녀와서 바로 공부해야지!