시작하기 전

9월 11일부터 11월 17일까지,
서울남부여성발전센터에서 교육하는 클라우드 기반 웹개발 실무프로젝트를 참여하게됐다.

<프로그래밍 기초-프론트엔드-클라우드-백엔드> 순으로 수업을 할 예정이고
주에 최소 1회씩 WIL을 남기면서 공부하려고 한다.

원래는 배웠던 것 전부 다 털어놓는 글을 쓸까하다가,
그러면 글이 너무 중구난방이 될 것 같고,
이 글을 혹시나 특정 검색어를 타고 온 글이 되어
레퍼런스 참고를 원하는 사람들을 위해
수업을 넘어 좀 더 공부하고 고민한 흔적을 담아 글로 남길 예정이다.

첫 주인 9월 셋째 주에는 웹에 대한 기초를 다뤘다.
웹, HTML, CSS, JavaScript 기초를 다뤘는데,
그 중에서 조금 시간을 두어 다룰 필요가 있다고 생각한 부분 중에 '객체'에 대한 글을 써보려고 한다.

객체?

JavaScript에서의 객체는 key와 value의 쌍 데이터의 모음이다.
여기서 value는 원시 데이터는 물론, 함수도 포함하고, 어떤 객체의 함수는 주로 메소드라고 부른다.
JavaScript는 객체 기반의 언어이고, 거의 모든 데이터가 객체로 이루어져 있다.

객체를 사용하는 방법은 다음과 같다.

1. 미리 정의된 객체를 사용한다

2. 직접 객체를 선언한다
   2-1. 객체 초기자(Object Initializer)를 사용한다 === 객체 리터럴
   2-2. 생성자 함수를 사용하여 선언한다
   2-3. Object.create()를 사용한다

JavaScript 객체의 종류

1. 전역 객체-Window
2-1. 브라우저 객체 모델(BOM)
2-2. 문서 객체 모델(DOM)
2-3. 내장 객체
2-4. 사용자 정의 객체

1. 전역 객체(Window)

• 브라우저에서 JavaScript의 전역 객체, 즉 브라우저 창(window)을 가리키는 객체
• JavaScript의 모든 객체, 전역 함수, 전역 변수는 자동으로 window의 프로퍼티가 된다.
• 예시)
  alert(), confirm(),promt(), setTimeout(), clearTimeout(), setInterval(), clearInterval() 등...
• open(): 윈도우 새 창/새 탭으로 지정한 URL 열기

2. 브라우저 객체 모델(BOM)

• 공식 표준은 존재하지 않으며 브라우저마다 객체 모델이 다르다.
• 그 중에 window
• 웹 페이지 이동, 팝업 창, URL 제어 등의 메소드가 있다.

3. 문서 객체 모델 (DOM)

• 웹 표준을 관리하는 단체 W3C
• HTML Document를 프로그래밍 방식으로 관리할 수 있는 객체

4. 내장 객체

ex. Object, String, Number, Date, Array, Math

표준 내장 객체

객체 범주	설명	객체
기초 객체	다른 모든 객체의 기반	Object, Function, Boolean, Symbol, 오류 객체(Error와 그 파생)
숫자 및 날짜		Number, BigInt, Math, Date
텍스트 처리		String, RegExp
인덱스 컬렉션	인덱스 값으로 정렬된 데이터 컬렉션	Array,Int8Array,Uint8Array(unsigned integer(양의 정수))
키 컬렉션	키를 사용하는 컬렉션	Map, Set, WeakMap, WeakSet
구조화된 데이터	구조화된 데이터 버퍼 및 JSON 데이터 처리	JSON, ArrayBuffer, SharedArrayBuffer
제어 추상화	코드 구조화, 비동기 코드	AsyncFunction, Promise, Generator

String 객체

• substring(): slice()와 유사하지만 시작 위치, 종료 위치에 해당하는 문자열 반환, 음수 허용 안 함
• substr(): slice()와 유사하지만 파라미터로 위치와 길이 값 사용 (deprecated)

Number 객체

• toExponential(): 숫자를 지수형으로 반환
• toPrecision(): 정수와 소수를 포함해 보여줄 자릿수 지정
• POSITIVE_VALUE: Infinity
• NEGATIVE_VALUE: Infinity

Date 객체

👩‍💻 new Date()와 .getTime()의 결과가 다른 이유?

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#:~:text=There are two groups of Date methods%3A one group gets and sets various date components by interpreting the timestamp as a local time%2C while the other uses UTC.

Array 객체

• concat 매개변수 2개 이상 가능

👩‍💻 sort 함수의 compareFn 어떻게 돌아가는지 확인하기

Set 객체

• add(x)
• has(x)
• delete(x)
• clear()

Map 객체

• set()
• get()
• has()
• delete()
• clear()
• forEach()

👩‍💻 Map과 Object 차이?

5. 사용자 정의 객체

• 직접 만드는 객체

생성자 함수

• 정의: 객체를 생성하기 위한 특수한 함수
• 객체 생성에 New 연산자 사용
• 생성자 함수 이름 첫 글자는 대문자
• 생성자 함수의 this → 생성된 객체 자체
• 생성자 vs. 객체 리터럴
  • 생성자 함수로 인해 만들어진 동적 Object
  • Object literal: 생성자 함수 없이 만들어짐
• 생성자 함수 내에 익명 함수 사용 가능
• return 문 사용 가능 → this 대신 반환

참고자료

• Working with objects