클라우딩 어플리케이션 엔지니어링 TIL(11일차)

객체:속성을 가진 독립적인 개체(Object)
->객체는 속성(property)로 구성된 집합이다.

• 자바스크립트는 객체기반의 프로그래밍 언어
  ->자바스크립트를 구성하는 대부분의 요소가 객체이다.(원시값 이외의 값)

  cosnt 객체 = {
  "속성1" = 값1,
  "속성2" = 값2,
  ...
  }

객체 Object-속성 property

• 속성은 키와 값 사이의 연결값이다. (key-value)
  객체의 속성은 자바스크립트의 변수와 유사한데, 객체에 속해 있다.
  속성 접근 방법
  -> 마침표접근법:objectName.propertyName
  -> 대괄호접근법:objectName.[propertyName]
  속성에는 값 뿐만이 아니라 함수도 할당가능하다.
  ->객체에 속해 있는 함수를 method라고 한다.

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

리터럴 표기로 객체 생성
const furit = { name:'apple'}

• 변수명:새로운 객체의 이름
  콜론 앞 속성네임(name):식별자
  콜론 뒤 값('apple'):속성에 할당된 표현식

생성자 함수로 객체 생성
속성만 같고 값이 다른 객체 여럿을 생성할 때 사용

• 생성자 함수를 사용하면
  템플릿처럼 사용하여 속성이 동일한 객체를 여러개 생성할 수 있다.
  ->생성자 함수란? new 키워드와 함께 객체를 생성하고 초기화하는 함수
  생성자 함수를 정의한 후, 생성자 함수를 활용하여 객체 인스턴스를 생성한다.
  (인스턴스:new 키워드로 생성된 객체)
• 생성자 함수는 대문자로 시작함(일반함수와 구분)
  this 키워드로 속성을 정의하며, 생성될 인스턴스를 가리키게 한다.
  new 키워드를 사용하여 인스턴스를 생성한다.
  

Object.create로 객체 생성

• 생성자 함수처럼 동일한 속성값을 가진 객체를 생성할 수 있다.
  ->Object.create(객체)

Obejct 객체

• 생성자:new.Obejct()
  정적 method
  ->객체 자체에 관련이 된 method, 객체 속성과 관련이 된 method, 객체 속성 값과 관련이 된 method
  인스턴스
  ->method:

  • hasOwnProperty(),
    isPropertyOf(),PropertyisEnumerable(),
    toLocalString(),toString(),valueOf(),

객체 자체 method

• 객체 복사 assign,
  객체 신규 생성 create,
  객체 고정 freeze, preventExtension, seal,
  객체 상태확인:isExtensible, isFrozen, isSealed

• 객체를 배열로 전환: entries, FromEntries,
  객체 프로토타입:getOwnPropertyOf, setOwnPropertyOf

• 객체 속성
  객체 속성 추가:defineProperty, define Properties,
  객체 속성 서술자:getOwnPropertyDescriptor, getOwnPropertyDescriptors
  객체 속성 열거:getOwnPropertyName,keys,getOwnPropertysymbols

• 객체 속성의 값
  객체 속성 비교:is,
  객체 값 열거:value,

객체 속성 조작하기

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

• 1.객체의 속성 조작하기
  2.객체의 속성들 나열하기
  3.객체의 속성 삭제하기

동적 생성

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

나열하기

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

1. for...in
   모든 열거 가능한 속성을 순회한다.
2. Object.keys(객체)
   객체 자신의 열거 가능한 속성 이름을 배열로 반환
3. Obejct.getOwnPropertyNames(객체)
   객체 자신만의 모든 속성을 배열로 반환

삭제하기

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

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

• 객체 비교
  객체를 복사할 경우

객체 비교
객체를 서로 비교하면

• 객체 속성과 값이 같은 객체여도, 객체마다 참조값이 다르기 때문에
  자기 자신과의 비교에서만 True

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

• 정의된 객체를 다른 변수에 그대로 할당하면, 동일한 메모리 주소만 할당됨
  둘 중 하나의 객체를 수정한다면, 동일한 메모리 주소이기에
  두 변수가 참조하고 있는 객체가 수정되어
  결과적으로 두 객체 모두 영향을 받는다
  ->객체 복사의 두가지 방법

  얕은 복사
  깊은 복사

얕은 복사( Shallow copy)

• 복사된 객체의 속성 중 하나라도 참조하고 있다면
  얕은 복사가 되었다고 말한다.
  ->객체의 속성 중 참조타입이 없을 경우에만 얕은 참조 권장
• 방법
  Object.assing({}, 복사할 객체)
  spread 연산자
  ->복사할 객체

깊은 복사(Deep copy)

• 복사된 객체의 속성 중 하나라도 같은 참조를 하는 속성이 없다면
  깊은 복사가 되었다고 말한다.
• Deep copy의 방법은 두가지
  ->재귀함수를 이용한 복사
  (라이브러리:loadsh -cloneDeep)
  ->JSON.stringfy
  객체-문자열로 변환(참조 끊어짐)-객체로 변환

객체의 종류
객체는 두가지 분류로 나뉠 수 있다.
표준 빌트인객체 ECMAScript
호스트 객체(브라우저 기준) DOM API

표준 빌트인객체 ECMAScript

• 기초 객체 Object. funtion, boolean, Symbol
  오류 객체 error
  숫자 및 날짜 Number,digit,math,date
  텍스트 처리 Regex,String
  인덱스 기반 배열 Array
  키 기반 배열 Map,set...
• 구조화된 데이터 Json
• 제어 추상화 객체 Promise, Gernator, AsyncFuntion

빌트인객체 형태

• 정적 static 속성 method
• 인스턴스 instance 속성 method
  ->{{객체 prototype.인스턴스 method}}

  (예시:number.prototype.tofixed())

• 기본적으로 Object 객체의 속성을 상속받음
  ->프로토타입 메소드를 모두 상속받음 toString(),toLocalString(),valueOf()
• 함수로서 바로 호출 사용

Number 객체

• 숫자를 표현하고 사용할때 쓰는 원시 Built-in 객체

• 함수로 바로 사용 가능
  ->Number('1.2')=숫자로 바로 전환

• static 속성과 method
  ->속성:MAX_VALUE,MAX_SAFE_INTEGAR,NaN,...
  ->메소드:

  확인하는 용도:isNaN,isFinite,isIntegar...
  파싱하는 용도:parseInt,parseFloat
  (※파싱이란? 자바스크립트에서 웹 서버와 데이터를 주고 받을 떄 받은 문자열을 JSON객체로 전환하기 위해 사용하는 방법)

• 생성자 함수
  ->Number.prototype
  ->인스턴스 메소드 : toFixed,toLocalString...

• 변수 또는 객체를 생성할 숫자를 갖고 있다면
  Number 객체 인스턴스 생성 없이
  Number의 인스턴스 속성과 메소드 사용 가능

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

• Math는 생성자가 아님, 정정 속성과 메소드만 지원
  정적 속성과 메소드

  속성:PI,E...
  메소드
  ->abs(x),pow(x,y),sqrt(x) [절대값,제곱,루트값]
  ->ceil(x),floor(x),round(x) [올림,내림,반올림]
  ->max(x,y...),min (x,y...)[최대값,최소값]
  ->random()[()내 숫자(자연수)에서 0까지 무작위 값]
  ...

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

UTC란? 국제 표준 시간의 세계 협정시
->국제적인 표준 시간
->1970년에 채택, 72년 구현
->UTC는 그리니치 평균시(GTC)기반, GMT라고도 부름
->인터넷,WWW,항공, 해운 등에서 사용한다.

• 한국은 UTC와 9시간 차이난다 (UTC+9)
  getTimezoneOffset() // UTC - 현지 시간대 (분단위 반환)
  한국은 -540분 == 9시간

날짜 표기와 ISO 8621

• 시간을 표기하는 방법은 다양하므로 표준화 없이 사용한다면 커뮤니케이션 시간 및 비용 증가
  -> 미국에서 한국으로 YYMM으로 보내는 경우 등
• 따라서 국제 표준화 기구(ISO)에서 이를 표준화함
• ISO 8621
  ->YYYY-MM-SSThh:mm:ssZ(많이 사용하는 형태)
  ->혼합된 일시를 구분하기 위해 T라는 구분자 사용(상호협의간 T 생략 가능)
  ->UTC 날짜라는 의미에서 Z로 표현

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

• 특정 시간대(현재시간 포함)을 가져오거나 다시 세팅할 수 있는 메소드 제공
• 함수로 호출
  ->Data()-> Tue Jan 9 2024 10:24:12 GMT +0900 (한국 표준시)
• 생성자 함수
  ->Date.prototype
• static 속성과 메소드
  속성:없음
  메소드:now(),parse(),UTC()

Date 인스턴스 메소드
new date()
new date(시간문자열)

->시간을 get하는 메소드
->시간을 set하는 메소드

시간을 get하는 메소드

• 현지 시간 기준 : get::

  연,월,일,요일 = Fullyear(),Month(),Date(),Day()
  시,분,초,밀리초 = Hours(),Minutes(),Seconds(),MilliSeconds()

• UTC 기준
  한국에서는 UTC와 9시간 차이나므로 Hours와UCTHours만 차이나고 나머지는 동일함

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

• UTC와 현지 시간대 시차 갖고오기 : getTimezoneOffset()

getMonth()와 getDay() 알아보기

• GetMonth는 0부터 시작
  0이 1월, 9가 10월
• getDay는 0이 일요일
  일요일0,월요일1,화요일2...
  toLocalDataString() 사용 시
  현지에 맞는 요일 문자열 사용가능

시간을 set하는 메소드

• 기본적으로 위의 get 메소드에서 get 대신 set을 씀으로서 사용 가능함
  한국은 UTC 기준 9시간 차이가 나므로 setUTChours 사용시 주의해야 함
• UTC로부터 걸린 시간 설정하기 : setTime()

객체 메소드 오버라이딩

• 최상위 객체가 가지고 있는 메소드 중 상속받는 메소드가 있다.
• valueOf()
  ->UTC와 기준 시점사이의 밀리세컨드 차이
  ->getTime()과 동일한 값
• toString()
  -> 요일 월 날짜 년도 시:분:초 GMT ±시간차이 (구성 시간대)
  -> Tue Jan 9 2024 10:24:12 GMT +0900 (한국 표준시)
  -> Date()와 동일한 값

문자열

• 쌍따옴표 "", 따옴표 ''로 생성함
  -> ES2015 이후부터는 백틱`` 으로도 생성 가능
• String 객체 사용

특징

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

문자열 조작

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

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

• 함수로 바로 사용 가능
  String(...):문자열로 타입 전환
• 정적 메소드 : fromCharCode, fromCodePoint, raw
• 생성자 함수 : String.prototype
  -> 인스턴트 속성 : length
  -> 인스턴스 메소드

  문자열 체크(get): 접근, 찾기 ,포함 여부 , 비교
  문자열 변경(set): 추가하기,합치기,분리하기,변경하기

문자열 체크
문자열에 접근
문자열 내에 target 문자열이 어디 있는지 찾기 , 포함 여부 확인, 비교

• 접근: at(),charAt(), charCodeAt(), CodePointAt()
• 찾기: indexOf(), LastIndexOf(), search()
• 포함 여부 : include(), startswith(), endswith(), match(정규표현식), metchall(정규표현식)
• 비교 : localecompare()

문자열 변경

• 변경 : 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)

RegExp 객체

• 정적 속성 : lastIndex

• 생성자 함수 : Regexp.prototype

• 인스턴스

  속성
  ->적용된 플래그 반환 : flag
  ->적용된 플래그 여부 반환:
  dotall, global, ignoreCase, multiline, source, sticky, unicode

• 메소드

  compile(), exec(), test(),t oString() , ...

RegExp 객체 활용
문자열 인스턴스 메소드 중 "찾는 과정이 있는 메소드" 에서 사용한다

• 찾아서 일치하는지 확인
  ->match(정규표현식), metchall(정규표현식)
• 찾는:
  ->search(정규표현식)
• 찾아서 교체하는:
  ->replace(정규표현식), replaceAll(정규표현식)
• 찾아서 분리하는:
  ->split(정규표현식)

Collection
컬렉션이란 데이터 항목들의 그룹을 의미한다.
->list,set,tree,graph 등...

• 자바스크립트에서는 두가지 종류의 Collection이 있다.
  ->Indexed Collection
  ->keyed Collection

Indexed Collection

• index 값을 기준으로 정렬된 Collection
  ->Array,TypeArray 포함
• index로 배열 내 값을 참조할 수 있다.
  const Array1 = [1,2,3]
  Array1[1]; // = 2

keyed Collection

• 키 값을 기준으로 하는 Collection
  -> Map,Set 포함
• 키와 값을 매핑하여 저장한다.
• 저장된 순서대로 각 요소에 순차적으로 접군할 수 있다. (큐 스타일 자료구조)
  -> const Map1 = new Map();
  -> Map1.set(key1, value1)

Indexed Collection(Array)

• 이름과 인덱스로 참조되어 정렬된 값들의 집합
• 다른 언어들과 달리
  자바스크립트는 명시된 배열 데이터 타입이 없음
  -> 배열 객체를 사용 가능함
  -> List와 비슷한 객체이며
  순회와 변경작업을 수행하는 메소드를 가지고 있다.

자바스크립트의 Array

• 0개 이상의 식 expression(배열 요소) 목록
• 베열을 만들 때
  -> 각 요소로 지정된 값이 초기화
  -> 배열의 길이(length)는 지정된 요소의 갯수로 지정

  • 길이가 고정되어 있지 않다
    각 요소의 data type도 고정되어 있지 않다.

• 모든 요소는 필수값이 아님
  ex.['apple',undefined,'banana']

Array 객체 생성 방법

• 배열 리터럴 -> 대괄호로 묶인다.[]
• Array 객체 생성자:
  -> new Array(arrayLength): 길이가 지정된 배열(숫자만 가능)
  -> new Array(element1,element2....): 요소가 지정된 배열

Array 객체 특징

• 배열 요소의 참조:
  -> index는 0에서부터 시작
  -> index 값을 속성 이름으로 사용하여, 표준 객체의 속성처럼 저장
  -> index로 문자열 값 사용할 수 없음, 무조건 정수로만 참조하여 저장

• 배열에 값 저장:
  ->index로 참조하지 않으면 객체의 속성으로 저장됨

• 배열의 길이: 마지막 인덱스 값의 +1
  -> 길이를 지정하는 것도 가능함
  원래보다 작게 지정하면 배열이 잘리며
  원래보다 크게 지정하면 배열의 길이가 늘어남

• 배열의 반복 처리
  -> for 문 활용
  -> foreach문 활용

Array 객체

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

Array 객체

• 요소 체크

  요소 접근: at()
  요소 찾기:indexOf(), lastIndexof()
  요소 포함 여부:includes()
  순회↔
  -> 요소 확인하기:foreach()
  -> 요소 판별하기:every(), some()
  -> 요소 찾기:find(), findIndex()

• 요소 조작

  요소 추가하기:push(), unshift()
  요소 제거하기:pop(), shift()
  순회↔
  ->요소 변경하기:flatmap(), map()
  ->요소 제거하기:filter()

• 기타 메소드
  배열 합치기, 추가하기: cocat(), fill()
  배열 분리하기: slice(), splice()
  배열 요소 변경하기: copyWithin(), flat()
  배열 재배치하기: reverse()
  ->순회하며 재배치하기: sort()

• 반환타입 변경하기
  -> 문자열로 : join(),toLocaleString(),toString(),
  ->iterator로 : entries(), values()
  -> 순회↔

  타입 변화하기:reduce(), reduceRight()

Key Based Collection
Key 값을 기준으로 정렬되어 있는 데이터집합
-> map, set 포함
키와 값을 매핑하여 저장
->지정된 순서대로 각 요소들에 순차적으로 접근할수 있다.
const map1 = new map();
map1.set(key1,value1)

map 객체와 weakmap 객체의 공통점

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

map 특징

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

map과 객체의 차이점

• 속성의 데이터 타입
  default 속성과의 충돌
  객체의 크기
• iterable 여부
  순서 보장
  퍼포먼스(데이터 핸들링)
  직렬화의 구문분석 제공여부

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

map 객체 메소

• 생성자:map.prototype
  인스턴스
  ->속성:size

  메소드
  요소 체크(get):접근, 포함 여부-get, has
  요소 변경(set):추가하기,제거하기,변경하기-clear,delete,set
  순환관련:keys,values,entries,foreach

weakmap

• 키에 대한 강력한 참조를 허용하지 않는 키/값 쌍의 모음
  ->키는 object만 허용
• 객체 정보를 비노출
• 객체 정보를 비노출하는 특징을 살려
  -> 객체의 사적인 정보를 저장하거나
  -> 상세 구현내용을 숨기기 위해 사용한다.

weakmap 객체

• 생성자:weakmap.prototype
  인스턴스
  ->속성:size

  메소드
  -> 요소 체크(get):접근, 포합 여부 - get, has
  -> 요소 변경(set):추가하기(변경하기),제거하기-delete,set
  순환관련:없음

set과 weakset 객체의 공통점

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

set의 특징

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

set과 배열의 차이

• 포함여부 확인 퍼포먼스
  ->배열:indexof를 사용하여 포함여부 확인 퍼포먼스가 느림
  ->set:has 메소드를 사용
• 요소 제거:
  ->배열:배열은 제거할 때 배열을 잘라내야 함
  ->set:delete 메소드 사용
• 요소 찾기:
  ->배열:NaN은 indexof로 찾을 수 없음
  ->set:NaN 포함여부 확인가능
• 중복여부 확인:
  ->배열:순회하며 확인해야 함
  ->set:set은 유일성을 보장하기에, 확인할 필요가 없다.

set 객체
생성자:set.prototype

• 인스턴스
  속성:size

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

weakset

• 객체 컬렉션 (object만 허용)
  -> Weakset의 인자로 object만 허용
  -> 약한 참조를 가짐
  -> const weakset1 = new weakset();
  weakset1.add({weakset1:1})

weakset 객체
생성자:weakset.prototype

• 인스턴스

  메소드:
  ->요소 접근(get):포함 여부-has
  ->요소 변경(set):추가하기(변경하기),제거하기- delete, add
  순환관련:없음

JSON(JavaScript Object Notation

• 인터넷에서 자료를 주고받을 떄 자료를 표현하는 방법
• 키-값 쌍, 배열 자료형, 기타 모든 직렬화 가능한 값
  또는 키-값 쌍으로 이루어진 데이터 객체를 전송할 때
  사람이 읽을 수 있는 텍스트를 사용하는 Open Standard 형태
• JSON의 파일 확장자 .json

JSON 형태

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

직렬화(serialization,deserialization)

• 다양한 환경 간의 데이터를 주고 받기 위해서 직렬화가 필요하다.
• 직렬화: Object -> 문자열로 변경하는 것
• 역직렬화: 문자열 -> Object로 변경하는 것

JSON 객체
값을 JSON으로 변경하는 메소드 제공

• 생성자 함수 아님
• 함수로서 사용 불가능
• 정적 메소드

  JSON.stringfy: 직렬화하는 메소드
  JSON.parse: JSON형태로 파싱하는 메소드(역직렬화)
  -> 주의사항 : 문자열이 객체 형태가 아닐 경우 오류 발생
  try...catch 문으로 에러 핸들링 권장

Intl(internationalization)

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

DataTimeFormat 생성자 함수

• 언어에 맞는 날짜, 시간 서식을 적용하기 위한 객체
• 생성자 : intl.DataTimeFormat.prototype
• 인스턴스

  메소드
  포맷결과:Format,FormatRange
  포맷결과를 각 단위별로 분해화여 객체화:FormatToParts,FormatRangeToParts

NumberFormat 생성자 함수

• 언어에 맞는 숫자 서식을 적용하기 위한 객체
• 생성자 : intl.NumberTypeFormat.prototype
• 인스턴스

  메소드
  포맷결과:Format,FormatRange
  포맷결과를 각 단위별로 분해화여 객체화:FormatToParts,FormatRangeToParts

객체 지향 프로그래밍

• 객체는 현실의 개념을 추상화하여 정리
  -> 상태를 갖고 있고 = this
  -> 식별자(속성)을 갖고 있고 = 속성
  -> 어떤 행동을 가지고 있다 = 메소드
• 인스턴스 객체
  -> 객체의 일원으로서 만들어진 객체
• 객체지향 프로그래밍:
  객체를 기본 단위로 나누고 , 이들의 상호작용을 서술하는 방식
• 대표적인 객체 지향 프로그래밍
  -> 클래스 기반 프로그래밍 -> 자바...
  -> 프로토타입 기반 프로그래밍 -> 자바스크립트...
• 프로토타입 객체
  -> 객체의 인스턴스를 만드는 부모 객체 개념
  -> 자바스크립트의 모든 객체는 부모 객체인 프로토타입 객체와 연결
  -> 부모객체의 속성과 메소드를 상속받아 사용 가능

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

• 모든 객체가 가지고 있는 [[prototype]] 인터널 슬롯
  -> [[prototype]]은 상속을 위해 사용
• (밑줄x2)proto(밑줄x2) 라는 접근자 속성으로 접근 가능
  -> (밑줄x2)proto(밑줄x2)로 Object.prototype 객체에 접근 가능

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

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

프로로타입 chain

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

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

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

ES6+Class

• ES6에 클래스가 추가 됨
  ->클래스 기반 언어에 익숙한 개발자가 빠르게 적응하도록
• 기존 프로토타입 기반 상속 메커니즘의 추상화
  ->프로토타입 기반 패턴의 문법설탕

class의 형태

• class 클래스명 {...}
• class 내에서는 메소드만 작성 가능
• 인스턴스 생성
  -> new 클래스명();

class 문법

• constructor 특수 메소드
• 메소드
  -> 인스턴스 메소드
  -> 정적 메소드
• 인스턴스 속성
  -> 조회 및 조작
  -> 할당 및 조작
• 클래스 상속

class 문법 - constructor

• 인스턴스를 생성하고, 클래스 필드를 초기화하기 위한 특수 메소드
  -> 인스턴스가 생성될 때 호출되는 메소드
• 인스턴스 생성시 전달된 인자를
  constructor 메소드의 인자로 받을 수 있다.
• constructor는 생략가능

class 문법 - 인스턴스 메소드

• 클래스 내에 존재하는 메소드
• 메소드 내의 클래스를 this로 접근 가능
• 클래스의 인스턴스 속성에도 접근 가능

class 문법 - 정적 메소드

• 클래스의 인스턴스를 생성하지 않아도 호출할 수 있는
  메소드를 정의할 때 사용
• static 키워드를 사용
• util 용의 함수를 정의할 때 사용

class 문법 - 인스턴스 속성

• 클래스 내부의 캡슐화된 변수 == 멤버 변수
• this에 추가한 속성
• 인스턴스 속성에 this는 바인딩 필요
• 속성은 인스턴스 생성 이후 바로 참조 가능해야하므로,
  인스턴스 속성 초기화는
  consturcotr 메소드에서 보통 진행

class 문법 - 인스턴스 속성 조작 및 조회

• getter
  -> 특성 인스턴스 속성을 조회하며 조작하는 메소드
• 형태
  -> 메소드 앞에 get 키워드 사용
  -> getter 키워드는 무조건 값을 반환
• 사용시
  -> 일반 메소드처럼 호출하지 않고
  -> 속성처럼 참조하는 형식으로 사용

class 문법 - 인스턴스 속성 할당 및 조회

• setter
  -> 특성 인스턴스 속성에 할당하여 조작하는 메소드
• 형태
  -> 메소드 이름 앞에 set 키워드 사용
• 사용시
  -> 일반 메소드처럼 호출하지 않고
  -> 속성처럼 참조하는 형식으로 사용

class 문법 - 상속(extends)

• 코드의 재사용 관점에서 상속 필요 (부모-자식)
• extends와 super 키워드를 통해 class에서 상속 구현
• extends
  -> 부모 클래스를 상속받는,
  자식 클래스를 정의할 때 사용
• class 부모 {...}
  class 자식 extends 부모{...}

class 문법 - 상속(super 키워드)

• super()
  -> 부모 클래스의 생성자를 호출하게 됨
  -> 부모클래스의 인스턴스 속성을 바인딩함
  -> 자식클래스의 생성자가 this에 접근하고 수정가능
• 자식 클래스의 constructor 사용 시
  constructor 반환문 전에 사용되어야 함

this

• 컨텍스트 참조 가능한 키워드 (전역 context, 함수 context)
  -> 객체를 참조하는 역활, 어떤 객체인지 동적으로 결정됨
• 함수 context
  -> 함수가 호출될 떄, 매개변수로 this가 암묵적으로 전달됨
  -> 함수 호출방식에 따라 this가 바인딩되는 방식이 상이
  -> ES6 화살표함수: this 바인딩 제공하지 않음
• 함수 호출 방식:
  -> 함수 호출, 객체의 메소드 호출, 생성자 함수 호출, apply, call, bind로 호출

this 바인딩 - 함수 호출 방식

• 전역개체에서 this 사용 시
  ->Browser-Side:window
  ->server-Side:global
• 함수 내부에서 this 전역개체에 바인딩
• 함수에 내부함수 존재시에도 this는 전역객체에 바인딩
• 객체의 메소드내에 내부함수가 있을 시
  함수 호출방식으로 취급되어 전역객체를 바라봄

  이를 해소하기 위해서
  -> this를 다른 변수에 저장하고 사용하거나
  -> 내부함수를 해당 객체에 bind

this 바인딩 - 객체의 메소드 호출

• 메소드 내부의 this는
  해당 메소드를 호출한 객체에 바인딩
• 프로토타입 메소드도 동일하게 해당 메소드를 호출한 객체에 바인딩

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

• 생성자 함수 호출시 아래 방식으로 작동

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

this 바인딩 - apply, call, bind 호출

• this를 명시적으로 바인딩하는 방법
• Funtion.prototype.apply
• Funtion.prototype.call
• Funtion.prototype.bind

this 바인딩 - apply, call

• 함수명.apply(바인딩할 객체,[함수 호출시 넘길 인자 1,2...])
  함수명.call(바인딩할 객체,함수 호출시 넘길 인자 1,...])
  1.함수 내의 this 인자에 바인딩할 객체가 바인딩됨
  2.함수에 인자들이 전달됨
  3.함수 호출됨
• 바인딩과 동시에 함수를 호출한다.

this 바인딩 - bind

• 함수병.bind(바인딩할 객체)
  1.함수 내에 바인딩할 객체가 바인딩
  2.바인딩된 함수 반환
• apply의 차이점:바인딩과 함수 호출이 분리됨

this 바인딩 - 화살표 함수

• ES6의 화살표 함수
  함수를 선언할 때, this에 바인딩될 객체가 정적으로 결정
  항상 상위 스코프의 this를 가리킴 (laxial this)
• 화살표 함수의 형태 : 익명함수 형태
  (인자들)=> {...}
• 지양해야할 사용형태
  객체의 메소드(+prototype 메소드)
  생성자 함수: 프로로타입 객체 없음

프로그래밍에서 scope

• 스코프 == 변수 영여
  변수가 유효성을 갖는 영역

• 스코프의 규칙
  -> 렉시컬 스코프 규칙, 다이나믹 스코프 규칙

• 스코프의 종류
  전역, 모듈, file, 함수, 블록, ...

스코프의 규칙

• 변수 영역을 지정하는 규칙
  정적 영역 규칙 : lexcial scoping rule
  동적 영역 규칙 : dynamic scoping rule

스코프의 규칙 - lexcial scoping rule

• 정적 영역 규칙 : static scoping rule (lexcial scoping rule)
  어디서 호출되었는지가 아니라
  어디서 선언되었는지에 따라 스코프 결정 (소스코드 구조 기준)
  *자바스크립트는 lexcial scoping rule을 따름

스코프의 규칙 - dynamic scoping rule

• 동적 영역 규칙 : dynamic scoping rule
  어디서 호출되었는지에 따라 스코프 결정
• 런타임때 결정됨

Scope의 종류
전역, 모듈, file, 함수, 블록 스코프

• 전역 스코프: 소스 코드상의 모든 곳에서 사용할 수 있는 전역 변수
  -> 자바스크립트:(브라우저 기준) window 객체

• file
  해당 파일 전체에서 접근 가능, 다른 파일에서 접근 불가능
  원시적인 형태의 모듈 영역
  ES6+자바스크립트:<script type="module" ...>로 조회되는 파일

• 모듈 스코프
  모듈을 지원하는 프로그래밍 언어에서 모듈 단위 변수 선언 가능 (react 등...)

• 함수 레벨 스코프
  지역변수: 함수 내에서 유효한 변수
  함수가 반환된 이후에는 사용불가능
  함수 외부에서는 유효하지 않음

• 자바스크립트는 기본적으로 함수 레벨 스코프

• 블록 레벨 스코프
  지역변수: 코드 블록 내에서 유효한 변수
  ES6+자바스크립트:let, const 키워드는 블록 레벨 스코프

실행 컨텍스트
실행 컨텍스트는 크게 컴파일을 하는 생성 단계와 컴파일된 코드를 실행하는 실행 단계가 있다

실행 컨텍스트의 생성 단계 - Creation Phase
코드 평가 단계:lexical Enviroment 생성

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

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

• 변수는 값이 할당
• 함수 실행 코드가 있을 경우, 코드 실행
  -> 새로운 함수 컨텍스트 생성 및 함수 실행

실행 컨텍스트의 세가지 종류

• 글로벌 컨텍스트 = 전역 컨테스트
  -> 함수 내에서 실행되는 코드가 아니라면 전역 컨테스트에서 실행
  eg. 브라우저 기준 : Global Object = window
• funtional 컨텍스트
  함수가 호출될때마다, 함수에 대한 실행 컨텍스트 생성
  각 함수들의 자신만의 실행 컨텍스트 존재
• eval 컨텍스트
  eval 함수만의 실행 컨텍스트 존재

자바스크립틔 콜 스택
자바스크립트 엔진이 호출된 함수의 순서를 추적하는 방법

• 어떤 함수가 동작하고 있는지, 다음에 어떤 함수가 호출되어야하는지 등을 제어
• 함수가 반환된 후 실행이 올바른 지점에서 다시 선택되도록 한다,
  == 함수 호출을 수행할 수 있게 해주는 Record 구조
• stack 자료구조: 프레임이 쌓이는, Last in first out 구조임
• 콜 스택: 함수 호출시 만들어지는 실행 컨텍스트가 쌓임
  하나의 일만 처리 가능
• 자바스크립트 엔진은
  코드를 평가하여 실행 컨텍스트를 만들어 -> 콜 스택에서 하나씩 쌓고
  콜 스택에서 실행 컨텍스트를 실행하여-> stack에서 하나씩 없앤다

클로저

• 발생 환경: 외부 함수 실행 컨텍스트 환경의 변수를 참조하는 내부 함수 실행 컨텍스트
• 내부 함수 내에서 아직 외부 함수의 변조를 참조하고 있어
  외부 함수가 종료되더라도 다른 외부 함수 환경에 접근할 수 있는 상황
• 정리 : 반환된 내부함수가 자신이 선언되었을 때의 스코프를 기억하여
  자신이 선언되었을 때의 환경 외부에서 호출되더라도 그 환경에 접근 가능할 수 있는 함수
  

오늘 감상: 수업분량도 길고 내용도 문법적인 내용이 많았다. 하지만 자바스크립트 내의 중요한 개념들이 다수 포함되어 있는 것 같아 꾸준히 복습해야 할 것 같다.