JavaScript기초 정리-2

flow control

flow control의 이해

개발자는 컴퓨테에게 무언가를 명령하고, 컴퓨터는 이를 수행한다.
명령형 프로그램의 개별 명령문, 명령 또는 함수 호출이 실행되거나 평가되는 순서이다.

• goto:다른 구문에서 시작, 권장하지는 않음
• choice: 일부 조건이 충족되는 경우에만 일련의 명령문 실행, if-else, switch
• loop: 어떤 조건이 충족될 때까지 일련의 명령문을 0회 이상 실행,collection loop,General loop
• continue: 현재 실행 구문에서 떨어진 한 구문의 집합을 실행, Loop conitnueation
• break: 프로그램 실행을 중단, Loop early exit, 함수 실행 정지

표현식과 문의 개념

표현식이란, 어떤 값으로 이행되는 임의의 유효한 코드 단위
표현식이 평가되면, 새로운 값을 생성하거나 기존 값을 참조함
값으로 평가될 수 있는 문은 모두 표현식이다.
대표적으로 리터럴 표현식, 함수 표현식등이 있다.

문 statement
프로그램을 구성하는 기본 단위, 최소 실행 단위로 == 명령문 등이 있다.
선언문, 할당문, 제어문, 반복문, 블럭문 등이 있다.

let 변수명;			// 변수 선언문
변수명 = 'apple' 		// 할당문
function 함수() {} 	// 함수 선언문
if (true) {			// 조건문
  console.log('true');
}
while (false) {		// 반복문
  console.log('while');
}

블럭문
명령문들을 그룹으로 묶을 수 있는 블럭문, 한쌍의 중괄호로 묶어서 표현

{
	123;
	const foo = 'apple';
	function 함수() {
    	return 1;
    }
}

제어문
choice : if...else, switch
loop(iterations)

• loop ealry exit: break
• loop continuation: continue

subroutin exit: return
Non-local control flow: try...cathc, throw, generator, async

반복문 iteration statement
Conditional loop: while, do...while
General loop: for
Collection loop: for...in, for...of

조건문

일부 조건이 충족되는 경우에만 일련의 명령문 실행

if...else

논리조건의 참/거짓에 따라 명령문을 실행해야 할 경우 사용

if (조건1){
  // 조건1이 true일때 실행되는 블럭
} else if (조건2){
  // 조건2이 true일때 실행되는 블럭
} else {
  // false일때 실행되는 블럭
}

false로 평가(Falsy)되는 값들

• false
• undefined
• null
• 0
• NaN
• ""(빈 배열)

실제 로직을 구현할 때는 다음을 주의해야한다.

• 중첩 if문 (Nested Conditional) 지양
  여러 조건을 검사하기 위해 if문 안에 또 다른 if문을 작성하는 방식입니다. 조건이 많아질수록 코드의 가독성이 떨어지고, 유지보수가 어려워질 수 있다.

• Guard Clauses 형태로 구현
  함수 시작 부분에서 조건을 빠르게 검사하여, 조건이 맞지 않으면 조기에 반환(return)하는 방식입니다. 이를 통해 코드의 중첩을 줄이고, 논리적 흐름을 명확하게 만들어 가독성을 향상시킵니다.

switch

명시된 표현식을 평가한 후, 평가된 값과 case라벨 값을 비교하여 일치하는 case의 명령문을 실행, 없을 경우 default의 명령문이 실행되도록함.

switch ( 표현식 ) {
  case 라벨:
    ...명령문...
    break or return 
  default:
  	...명령문...
}

반복문

Conditional loop

조건부 loop로 대부분의 프로그래밍 언어에는 일부 조건이 변경될 대까지 루프를 반복하는 구조가 있다.

• 시작할 때 조건을 평가하는 타입: 본문 생략 가능, while문

  while(표현문){
    ...명령문...
  }

• 마지막에 조건을 평가하는 타입: 본문은 항상 한번 이상 실행됨, do...while문

  do {
	...명령문...
  } while(표현문)

조건문은 종료될 수 있는 조건이 아닌경우, 무한루프에 빠질 위험이 있으므로 이를 조심할것!

for loop

특정 부분의 코드가 반복적으로 수행될 수 있도록함

• [초기화-조건식-증감문] 형식: while문과 다르게, 해당 루프와 관련된 loop 변수가 존재함,

  for([초기화];[조건식];[증감문]){
    ...명령문...
  }

• 집합 loop형식(Foreach loop): 컬렉션 안의 항목들을 횡단하는 제어 흐름문, for문과 다르게 명시적으로 카운터를 관리히자 않는다. 또한 잠재적인 순환 횟수 오류를 예방할 수 있다.
  • for...of문: 반복 가능한 객체를 통해 반복하는 루프, Array, Set, String등을 사용할 수 있음

    for(const i of iterator){
    	console.log(i)	// 안의 요소가 출력됨
    }

  • for...in문: 객체의 열거속성을 통해 지정된 변수를 반복한다. 변수 객체의 key값을, Array객체의 idx를 반환함

    for(const i of enumerable){
    	console.log(i)	// key값 반환
    }

break문

제어흐름의 종류 중 프로그램의 실행을 종료함, 반복문, switch문을 종류시킬 때 사용
while, switch등등에서 사용하면, 해당 명령을 끝내고 다음으로 넘어감

coninue문

제어흐름의 종류 중 현재 실행 구문에서 떨어진 한 구문의 집합을 실행함, 전체 루프 실행을 종료하지는 않음, 그냥 다음 순서로 넘어감

예외처리하기

예외 상황 종류

• ECMAScript Error: 자바스크립트 언어에서 발생하는 Error Type
  • RangeError: 값이 집합에 없거나, 허용범위가 아닐때
  • ReferenceError: 존재하지 않는 변수 참조 시
  • SyntaxError: 문법을 지키지않았을 때
  • TypeError: 값이 기대한 자료형이 아니여서 연산이 불가능할 때
• DOMException: Web Api 레벨에서 발행하는 Error Type
  • NetworkError: 네트워크 에러
  • AbortError: 작업이 중단되었을 때
  • TimeoutError: 작업 시간이 초과되었을 때

그 외의 에러에 대해서는 개발자가 직접 에러를 핸들링 할 수 있도록 Error를 다로 정의할 수 있음

throw

예외를 발생시킬때 사용, 예외 상황이 발생하면
1. 현재 함수의 실행 중지
2. 에러객체와 함께 에러가 throw
3. 제어흐름

• catch블록이 있다면, catch블록으로 전달
• catch블록이 없다면, 프로그램 종료

이렇게 종료되면 throw다음은 실행되지 않는다.

Error객체

사용자가 직접 Error객체를 정의하여사용할 수있다.

• new Error('에러 메세지')
• Error.message
• Error.name

try...catch문

에러를 catch문으로 핸들링하여 프로그램이 종료되지 않도록 한다.
예외 처리를 담당하는 핸들러를 찾기 위해, call stack을 거슬러 올라가 올바른 핸들러를 찾아내어 그곳에서 처리되도록 한다.

콜 스택
스택 형태의 자료 구조, FILO형식
자바스크립트 코드가 실행되며 생성되는 실행 컨텍스트를 저장하는 자료구로로 함수가 호출할 때마다 스택이 쌓이고, 함수의 실행이 종료되면, 콜스택에서 스택을 제거하는 원리이다.
에러 throw가 되면, 콜스택을 확인하여, 핸들링하고 있는 catch문이 있는 스택에서 처리한다.

try{
  ...명령문...	// 여기서 실행하다가 오류가 나면 catch로 넘어감
} catch(err) {
  ...반환문...
} finally {
  ...명령문... // 예외 발생 여부와 상관없이 실행되는 명령문
}

객체

객체란

속성을 가진 독립적인 개체(entity)로 속성으로 구성된 집합이다.
자바스크립트는 객체 기반의 프로그래밍 언어로 대부분이 객체이다.
아래와 같이 key-value형태를 가진다.

// Object.create
const 옵젝트1 = Object.create(객체명);
옵젝트1.속성1 = "값1";
옵젝트1.메소드();		// "메소드"

// 생성자 함수
function 객체명(속성1, 속성2, 메소드){
  this.속성1= 속성1;
  this.속성2= 속성2;
  this.메소드= 메소드;
}

new 객체명("값1", "값2", function () {
    console.log("메소드")
  })

// 리터럴 표기
const 객체명 = {
  속성1: 값,
  속성2: 값2,
  메소드: function () {
    console.log("메소드")
  }
}

객체명.속성1		// 마침표 표기법
객체명["속성2"]	// 대괄호 표기법
객체명.메소드()	// "메소드"

Object객체
생성자: new Object()
정적 method

• 객체 자체와 관련된 method, 객체 속성과 관련된 method, 객체 속성 값과 관련된 method
  인스턴스
• method:
  • hasOwnProperty(),
  • isPrototypeOf(), propertylsEnumerable(),
  • toLocalString(), toString(), valueOf(),
    객체 자체
• 객체 복사 assign,
• 객체 신규 생성 create,
• 객체 고정 freeze, preventExtensions, seal,
• 객체 상태 확인: isExtensible, isFrozen, isSealed
• 객체 배열로 반환: entries, fromEntries,
• 객체 prototype: getOwnPropertyOf, setOwnPropertyOf

객체 속성

• 객체 속성 추가: defineProperty, definedProperties,
• 객체 속성 서술자: getOwnPropertyDescriptor, getOwnPropertyDescriptors,
• 객체 속성 열거: getOwnPropertyNames, keys, getOwnPropertySymbols

객체 속성의 값

• 객체 값 비교: is,
• 객체 값 열거: values

객체 속성 control

객체는 원시타입과 다르게 변경 가능한 값이다.
객체는 전달하는 과정에서 참조 형태로 전달된다. 이는 객체의 변경이 일어날 때 참조된 객체들도 같이 변경이 되는 문제점이 야기됨, 때문에 의도적인 동작을 위해서는 조작을 적절히 사용해야한다.
1. 객체의 속성 동적 생성
객체에 존재하지 않는 속성을 참조하고 할당문을 통해 값을 할당하면 속성이 동적으로 생성된다.
2. 객체의 속성들 나열

• for...in
• Object.keys: 객체 자신의 열거 가능한 속성 이름을 배열로 반환
• Object.getOwnPropertyNames: 객체 자신만의 모든 속성을 배열로 반환

3.객체의 속성 삭제

• delete 연산자로 속성 삭제
• delete 속성이름

객체 비교와 복사

객체는 참조타입 Reference type: 모든 연산이 참조값으로 처리

• 객체 비교
  객체를 서로 비교하면, 객체 속성과 값이 같은 객체여도, 참조값이 다르므로 서로 다름, 자기 자신과의 비교에서만 true
• 객체를 복사할 경우
  동일한 객체를 생성해야할 때, 정의된 객체를 다른 변수에 그래도 할당할 경우, 동일한 메모리 주소만 할당됨, 둘중 하나가 수정된다면, 동일한 메모리 주소이기 때문에 둘다 수정됨
  • 얉은복사: 복사된 객체의 속성 중 하나라도 같은 참조를 하고 있게되면, 얉은 복사로 복사되었다고 한다.
    • Object.assign({}, 복사할 객체)
    • spread 연산자, {...복사할 객체}
  • 깊은 복사:복사된 객체의 속성 중 하나라도 같은 참조를 하고 있는 속성이 없다면 깊은 복사로 복사되엇다고 한다.
    • 재귀함수를 이용한 복사, 라이브러리인 lodash
    • JSON.stringify
      객체 -> 문자열로 변환(참조가 끊어짐)-> 객체로 변환

객체의 종류

표준 빌트인 객체: ECMAScript

정적 static: 속성, method
인스턴스 instance: 속성, method

• {{ 객체.prototype.인스턴스method}}
  • e.g.Number.prototype.toFixed()
• 기본적으로 Object 객체의 속성을 상속받음
  프로토타입 메서드들을 모두 상속 toString(), toLocaleString(), valueOf())
• 함수로써 바로 호출 사용
• 기초 객체: Object, Function, Boolean, Symbol
  • 오류객체: Error
  • 숫자 및 날짜: Number, BigInt, Math, Date
  • 텍스트 처리: Regex, String
  • Collection
    • index base collection: Array
    • key base Collection: Map, Set
  • 구조화된 데이터: JSON

호스트 객체: DOM API

build-in 객체 - 숫자와 날짜

Number 객체

숫자를 표현하고 다룰 때 사용하는 원시 래퍼 Built-in객체
함수로 바로 사용가능

• Nuber('1.2'): Number로 타입 전환

static속성과 메서드

• 속성: MAX_VALUE,MAX)SAFE_INTEGER,NAN
• 메서드
  확인하는 용도: isNaN, isFinite, isInteger
  파싱하는 용도: parseInt, parseFloat

생성자 함수

• Number.prototype
• 인스턴트 메서드:toFixed, toLocalString

변수 또는 객체의 속성이 숫자를 갖고 있으면,
Number객체 인스턴스 생성 없이
nubmer의 인스턴스 속성과 메서드 사용가능

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 자정과의 시간 차이를 밀리초 단위로 나타낸것

DATE 객체
함수 호출시
Date() -> Sat Oct 22 2022 18:43:12 GMT+0900
생성자 함수
Date.prototype
static
속성 없음
메서드: now(), parse(), UTC()
인스턴스
new Date()
new Date(시간 문자열)
메서드
get+ {UTC} + {Month, FullYear, Date, Day,Hours,Minutes, Second, millisceonds}
시간 가져오기
getMonth()는 1월이 0부터 시작
getDay()는 일요일이 0부터 시작
toLocalDateString()활용시 현지에 맞는 요일 문자열 얻어올 수 있음
시간 설정하기
get대신set을 설정하면 된다.

텍스트

문자열과 String객체

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

• 문자열 내 이스케이프 문자 사용가능(\n)
• 줄바꿈 문장 표현 가능
• 데이터 보관시 문자열 형태로 저장 유용

문자열 요소 접근

• charAt
• 유사 배열이라 배열처럼 접근

문자열 비교

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

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

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

• 함수로 바로 사용 가능
  String(...): 문자열로 타입 전환
• 정적 메서드: fromCharCode, fromCodePoint, raw
• 생성자 함수: String.prototype
  • 인스턴스 속성: length
  • 인스턴스 메서드
    문자열 체크:
    • 접근: at(), charAt(), charCodeAt(), codePointAt()
    • 찾기: indexOf(), lastIndexOf(), search()
    • 포함여부: includes(), startsWith(), endsWith(), match(정규표현식), metchAll(정규표현식)
    • 비교: localeCompare()
    문자열 변경:
    • 추가: podEnd(), padStart(), repeat()
    • 합치기: concat(), 산술연산자
    • 분리하기: slice(), substring(), split(), trim(), trimStart(), trimEnd()
    • 변경하기: tolocaleLowerCase(), toLocalUpperCase(), toString(), replace(), replaceAll()

정규 표현식

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

생성방법

• 리터럴 표기법
  평가할 때 정규 표현식을 컴파일 하며, 정규식으로 변하지 않으면, 리터럴 표기법을 사용한다.
  /pattern/flags
• RegExp 객체
  런터암 때 컴파일된다. 패턴이 변할 가능성이 있거나, 알수없는 데이터에서 가져오는 정규식의 경우 생성자 함수를 사용한다.
  new RegExp(/pattern/, flag)
  • 정적 속성: lastIndex
  • 생성자 함수: RegExp.prototype
  • 인스턴스
    • 속성
      • 적용된 flag 반환:flags
      • 적용된 flag 여부 반환:
        • dotAll, global, ignoreCase, multiline, source, sticky, unicode
    • 메소드:
      complie(), exec(), test(), toString()

문자열 인스턴스 method주 "찾는" 과정이 있는 method에서 활용한다.

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

패턴 작성 하는 방법

• 단순 패턴 사용
• 특수 문자 사용
  flag를 활용하여 탐색: d,g,i,m,s,u,y

Collection

비용을 절감하기 위하여, 상황마다 효율적인 데이터 형태로 처리한다.
컬렉션은 데이터 항목들의 그룹을 의미한다.

• 컬렉션에는 list, set, tree, graph등이 포함되어있다.

자바스크립트에서는 2가지 타입의 collection이 있다.

• indexed collections
  index값을 기준으로 정렬되어있는 데이터 집합

  • Array, TypedArray 포함

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

  const foo = [1,2,3];
  foo[1];

• keyed collections
  Key 값을 기준으로 정렬되어 있는 데이터 조합
  - Map, Set 포함

  키와 값을 매핑하여 저장한다. 저장된 순서대로 각 요소들을 반복적으로 접근할 수 있다.

  const foo = new Map();
  foo.set(key,value);

Array

0개 이상의 표현식이 포함된 목록
배열을 만들때, 각 요소로 지정된 값으로 초기화 배열의 길이는 지정된 요소의 갯수로 결정
길이가 고정되어 있지 않다.
각 요소의 data type도 고정되어있지 않다.
모든 요소는 필수 값이 아님(undefined로 지정해도됨)

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

• new Array(arrayLength): 길이만 지정된 배열(정수만 가능)
• new Array(elem0, elem1): 요소가 지정된 배열

특징
배열 요소의 참조

• index로 참조, 0부터 시작
• index값을 속성 이름으로 사용하여, 표준객체의 속성처럼 저장
• index로 문자열 사용할 수 없음, 무조건 정수로만 참조하여 저장
  배열에 값 저장
• index로 참조하지 않으면 객체의 속성을 저장됨
  배열의 길이
  마지막 index에 +1한 값
  길이 지정하는 것 가능.
  근데, 원래 길이보다 작게 지정하면, 배열이 잘림

배열의 반복 처리
for문 활용
forEach문 활용

정적 메서드: from, isArray, of
생성자: Array.prototype
인스턴스

• 속성: length
• 메서드(일반/ 순회하며)
  • 요소 체크:
    • 접근 at()
    • 찾기 indexof(), lastIndexOf()
    • 포함 여부 includes()
    • 순회하며
      • 확인하기: forEach()
      • 판별하기: every(), some()
      • 찾기: find(), findIndex()
  • 요소 변경:
    • 추가하기: push(), unshift()
    • 제거하기: pop(), shift()
    • 순회하며
      • 변경하기: flatMap(), map()
      • 제거하기: filter()
  • 배열 변경:
    • 추가하기: concat(), fill()
    • 분리하기: slice(), splice()
    • 변경하기: copyWithin(), flat()
    • 재배치하기: reverse()
    • 순회하며 재배치하기: sort()
  • 반환 타입 변경하기
    • 문자열로: join(), toLocaleString(), toString()
    • iterator: entries(), values()
    • 순회하며
      • 타입 변환하기: reduce(), reduceRight()

key based collection

key값을 기준으로 정렬되어있는 데이터 집합으로 키와 값을 매핑시켜 저장, key는 유니크 하다

Map

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

키 기반의 Object와 어떤 차이가 있을까?

• Map의 키는 어떤 데이터 유형이든 가능하지만, Object의 키는 문자열이나 심볼(Symbol)만 가능하다.
• Map은 키의 삽입 순서를 기억하지만, Object는 ES6 이전까지는 삽입 순서를 보장하지 않았다.
• Map은 크기(size)를 쉽게 얻을 수 있으며, 키-값 쌍의 수를 확인할 수 있다.

• 생성자 함수

const map = new Map([['key1', 'value1'], ['key2', 'value2']]);

• 인스턴스
  • 속성
    size: 요소의 개수를 반환
  • 메소드
    • 요소 체크
      has(key): 특정 키의 존재 여부 확인
      get(key): 키에 연결된 값을 반환
    • 요소 변경
      set(key, value): 키-값 쌍 추가 또는 업데이트
      delete(key): 키에 해당하는 요소 제거
      clear(): 모든 요소 제거
    • 순환 관련
      keys(): 키를 순환할 수 있는 Iterator 반환
      values(): 값을 순환할 수 있는 Iterator 반환
      entries(): [key, value] 쌍을 순환할 수 있는 Iterator 반환
      forEach(callback): 각 키-값 쌍에 대해 콜백 함수 실행

Set

중복된 값을 허용하지 않느다.
배열을 인자로 받을 수 있다. 배열의 요소가 set객체의 요소로 저장됨,

특징

index콜렉션과 어떤 차이가 있을까?

• Set은 값의 중복을 허용하지 않으나, 배열은 중복을 허용한다.
• Set은 인덱스로 요소 접근이 불가능하며, 오직 값 존재 여부만 체크 가능하다.

• 생성자 함수

  const set = new Set([1, 2, 3, 4]);

• 인스턴스
  • 속성
    size: 요소의 개수를 반환
  • 메소드
    • 요소 체크
      has(value): 특정 값의 존재 여부 확인
    • 요소 변경
      add(value): 값 추가
      delete(value): 특정 값 제거
      clear(): 모든 요소 제거
    • 순환 관련
      keys(): 값의 Iterator 반환 (값과 키가 동일)
      values(): 값의 Iterator 반환
      entries(): [value, value] 형태의 Iterator 반환
      forEach(callback): 각 값에 대해 콜백 함수 실행

weakSet

객체 컬렉션
weakSet인자는 Object객체만 사용할 수 있음
약한 참조를 가짐

• 생성자 함수

const weakSet = new WeakSet([obj1, obj2]);

• 인스턴스
  • 속성: X
  • 메소드
    • 요소 체크
      has(object): 특정 객체 존재 여부 확인
    • 요소 변경
      add(object): 객체 추가
      delete(object): 특정 객체 제거
    • 순환 관련
      WeakSet은 이터러블이 아니며, 순환 메서드를 제공하지 않음 (키 목록을 가져올 수 없음)

그외

JOSN객체

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

• 직렬화
  다양한 환경 간에 데이터를 주고 받기 위해 직렬화 작업이 필요하다.

  • 직렬화 serialization: Object -> 문자열로 변환하는 것
  • 역직렬화 deserialization: 문자열 -> Object로 변환하는것

• JSON으로 변환하는 Method를 제공

  • 생성자 함수 아님
  • 함수로써 사용 불가능
  • 정적 method
    • JSON.stringify: 직렬화 하는 구문
    • JSON.parse: JSON 형태로 파싱하는 구문(역직렬화), 이거 할거는 JSON 형태여야함

init

각 언어에 맞는 문자, 숫자, 날짜비교를 제공하는 구제화 API를 위한 namespace

• 정적 method: Intl.supportedlocalesOf();
• 속성:
  • DateTimeFormat: 날짜, 시간 서식을 적용하기 위한 객체
    • 생성자 함수: intl.DateFormat.prototype
    • Method:
      • 포맷 결과: format, formatRange
      • 포맷 결과를 단위별로 분해하여 배열화:formatToPart, formatRangeToParts
  • NumberFormat: 언어에 맞는 숫자 서식을 적용하기 위한 객체
    생성자 함수: intl.NumberFormat.prototype
    • Method:
      • 포맷 결과: format, formatRange
      • 포맷 결과를 단위별로 분해하여 배열화:formatToPart, formatRangeToParts

언어의 매커니즘

프로토타입과 생성자 함수

객체 지향 프로그래밍언어에서 객체는 현실의 개념을 추상화하여 정의하는 것이다.

• 상태를 갖고 있고 -> this
• 식별자(속성)을 갖고 있다. -> 속성
• 어떤 행동을 갖고 있다. -> 메서드

인스턴스 객체

개념의 일원으로써 생성된 객체로 객체지향 프로그램이 객체라는 기본 단위로 나누고, 이들의 상호작용으로 사용하는 방식으로 이용한다.

• 대표적인 객체 지향 프로그래밍
  • 클래스 기반 객체지향 -> 자바
  • 프로토타입 기반 객체지향 -> 자바스크립트

프로토타입 객체

객체의 인스턴스를 만드는 부모 객체 개념로 자바스클비트의 모든 객체는 부모 객체인 프로토타입 객체와 연결되어 있다. 보통 부모객체의 속성과 메서드를 상속받아 사용 가능

• 접근하기

  • 모든 객체가 갖고 있는 [[prototype]] 인터넷 슬록
  • __proto__라는 접근자 속성으로 접근 가능

• 생성하기

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

• 생성자 함수
  인스턴스 객체 생성시에 사용하며, 대문자 함수명 컨벤션을 지킨다. 보통 new키워드와 함께 호출

프로토타입 chain과 상속

객체의 속성 참조시, 속성이 없는 경우 프로토타입 체인 동작한다. [[Prototype]]을 통해서 부모 객체를 탐색하며, 모든 객체의 부모는 Object.prototype이다. 즉, End of prototype chin(프로토타입 체인의 종점)을 나타낸다.

만약 마지막 부모객체(Object.prototype)에서까지 속성을 찾지 못할 경우, undefined 반환

prototype객체 속성과 메서드 정의시 인스턴스 객체에서 부모 메서드와 속성을 참조하는데, 만약 객체와 프로토타입에 동일한 이름의 속성이나 메서드가 있는 경우 객체의 속성이 먼저 참조한다.

• property shadowing: 프로토타입 속성이 가려지는 현상
• method overriding: 프로토타입 메서드가 가려지는 현상

class문법

ES6 + class 문법이 추가됨 클래스 기반 언어에 익숙한 개발자가 빠르게 학습할 수 있도록하였다.
기존 프로토타입 기반 상속 매커니즘에 추상화, 프로토타입 기반 패턴의 문법 설탕을 추가한 것이다.

class의 형태

class Person {
	constructor(name, age){
		this.name = name;
      	this.age = age;
    }
  
  	get upercaseName(){
		return this.name.toLocalUpperCase();
    }
  
  	set plusYr(age){
      this.age += age;
    }
  	
  	static legCount() {
      return 2;
    }
}
  
Person.legcount();
const Joy = new Person('joy', 28);
Joy.upercaseName;
Joy.plusYear = 3;
console.log(Joy.upercaseName, Joy.age); // "JOY" 31

class내에는 메서드만 작성 가능하며, 인스턴스 생성 시 new 클래스명()을 통해 생성할 수 있다.

class문법

• constructor 특수 메서드
  인스턴스를 생성하고, 클래스 필드를 초기화화기 위한 약속된 특수 메서드, 인스턴스가 생성될 때, 호출되는 메서드
  인스턴스 생성시 전달한 인자를 constructor 메서드의 인자로 받을 수 있다.
  생략 가능
• method
  • 인스턴스 method
    클래스 내에 존재하는 method, method내에서 클래스를 this로 접근 가능, 클래스 인스턴스 속서에도 접근 가능
  • 정적 method
    클래스의 인스턴스를 생성하지 않아도 호출할 수 있는 메서드를 정의할 때 사용
    static 키워드 사용, util용의 함수를 정의할 때 사용
• 인스턴스 속성
  클래스 내부에 캡슐화된 변수 == 멤버 변수
  this에 추가한 속성
  인스턴스 속성은 this에 바인딩 필요
  속성은 인스턴스 생성 이후 바로 참조가능해야하므로, 인스턴스 속성 초기화는 construtor 메서드에서 보통 진행
  • 조회 및 조작(getter)
    특정 인스턴스 속성을 조회하며 조작하는 메서드
    • 형태
      • 메서드 이름 앞에 get 키워드 사용
      • getter메서드는 무조건 값을 반환
    • 사용
      • 일반 메서드처럼 호출하지 않고
      • 송성처럼 참조하는 형식으로 사용
  • 할당 및 조작(setter)
    특정 인스턴스 속성에 할당하며 조작하는 메서드
  • 형태
    • 메서드 이름 앞에 set 키워드 사용
  • 사용
    • 일반 메서드처럼 호출하지 않고
    • 속성처럼 할당하는 형식으로 사용

클래스 상속

코드의 재사용 관점에서 상속 필요 (부모-자식)
extends와 super 키워드를 통해 class에서 상속 구현

• extends
  부모 클래스를 상속받는 자식클래스를 정의할 때 사용

• super()
  - 부모 클래스의 생성자를 호출하게된다.
  - 부모 클래스의 인스턴스 속성을 바인딩함
  - 자식 클래스의 생성자가 this에 접근하고 수정 가능
  - 자식 클래스의 constructor사용시
  - constructor 반환문 전에 사용되어야 한다.
  - 부모 클래스와 공통된 변수를 선언, 초기화시 간결하게 처리 가능
  - 자식 클래스에 추가적인 변수가 필요한 경우, super호출 이후에 작성
  - super호출 이전에 this에 참조할 수 없음
  - super.메서드()
  super키워드를 통해 부모 클래스 접근 가능
  부모클래스의 메서드 접근시, super[메서드 이름]으로 접근하여 호출

  // 부모
  class Animal {
    constructor(name) {
      this.name = name;
    }
  }
  
  // 자식 extends 부모
  class Dog extends Animal {
    constructor(name) {
      // 부모 클래스의 생성자를 호출함,
      super(name)
    }
    sleep() {
      return this.name + 'Zzz...';
    }
  }
  
  const dog = new Dog('pepe');
  dog.name;
  dog.sleep(); // 'pepe Zzz...'

자바스크립트 컨텍스트

this와 화살표 함수

this란 컨텍스트 참조 가능한 키워드(전역 Context, 함수 Context)로 객체를 참조하는 역할을 하며, 어떤 객체인지 동적으로 결정되게된다.

• 함수 Context
  함수가 호출될때, 매개변수로 this가 암묵적으로 전달된다. 함수 호출방식에 따라 this에 바인딩되는 객체가 상이하다.
  • ES6 화살표 함수: this바인딩 제공하지 않음

다양한 함수 호출 방식

this바인딩 - 함수 호출 방식(전역객체에서 this 사용시)

함수 내부에서 this는 전역객체에 바인딩되어있다. 함수에 내부함수 존재시에도 this는 전역객체에 바인딩되며, 객체의 메서드내에 내부 함수가 있을 경우, 함수 호출방식으로 취급되어 전역객체를 바라보게된다.

• Browser-side: window
• Server-side: global

이를 해소하기 위해서 this를 다른 병수에 저장하고 사용하거나, 내부함수를 해당 객체에 bind한다.

const foo ={
  name: 'joy',
  age: 28,
  getName() {
    console.log(this.name); // 'joy'
    // 1. const that = this;
    function getAge() {
      console.log(this.age); // undefined
      // 1. console.log(that.age); // 28
    }
    getAge();
    // 2. getAge.bind(foo)(); // 28
  },
};

foo.getName();

this 바인딩 - 객체 메서드 호출방식

메서드 내부의 this는 해당 메서드를 호출한 객체에 바인딩하는 것으로, 프로토타입 객체의 메서드도 동일하게 해당 메서드를 호출한 객체에 바인딩한다.

// 해당 메서드를 호출한 객체에 바인딩
const foo = {
  name: 'joy',
  getName() {
    console.log(this.name);
  },
};
const bar = {
  name: 'kei',
};

bar.getName = foo.getName; 

foo.getName();  // 'joy'
bar.getName();  // 'kei'

// or
// 프로토타입 객체의 메서드
function Person() {
  this.name = 'joy';
}

Person.prototype.getName = function () {
  console.log(this.name);
};

const foo = new Person();
foo.name = 'kei';
foo.getName();

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

생성자 함수 호출시 아래와 같은 순서로 동작한다.

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

function Person(name){
  this.name = name;
}

const foo = new Person('joy');
foo.name;  // 'joy'

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

this를 명시적으로 바인딩하는 방법으로는 3가지가 있다.

• Function.prototype.apply(바인딩할 객체, [함수 호출시 넘기는 인자들])
• Function.prototype.call(바인딩할 객체, 함수 호출시 넘기는 인자1, ...)
• Function.prototype.bind(바인딩할 객체)

그중 call은

1. 함수 내의 this에 바인딩할 객체가 바인딩됨
2. 함수에 인자들이 전달됨
3. 함수 호출됨

바인딩과 동시에 함수를 호출함

bind는

1. 함수 내의 this에 바인딩할 객체가 바인딩
2. 바인딩된 함수 반환

apply와 차이점: 바인딩과 함수 호출이 분리

const foo = {
  name: 'joy',
  age: 28,
  getName() {
    function getAge() {
      console.log(this.age);
    }
    getAge.apply(foo);  // 28
    getAge.call(foo);	// 28
    getAge.bind(foo)();	// 28
  },
};

foo.getName();

this 바인딩 - 화살표 함수

ES6의 화살표 함수를 사용하는 방법이다. 함수를 선언할 때, this에 바인딩할 객체가 정적으로 결정한다.
항상, 상위 스코프 this를 가리키며(Lexical this) 화살표 함수를 사용함으로 익명함수 형태 (인자) => {...}를 띄게된다.

• 지양해야하는 사용형태
  객체의 메서드 ( + prototype 메서드)
  생성자 함수: prototype 객체 없음

  const foo = {
    name: 'joy',
    age: 28,
    getName: () => {
      console.log(this.name); // ''
    }
  };
  
  foo.getName();
  
  const foo = () => {};
  new Foo;
  // TypeError: foo is not a constructor

scope

프로그래밍에서 Scope는 변수영역으로, 쉽게 말해서 변수가 유효성을 갖는 영역

스코프의 규칙

변수 영역을 지정하는 규칙

• 정적 영역 규칙: 렉시컬 스포크 규칙(static scoping rule)
  자바스크립트가 따르는 규칙으로, 어디서 호출하였는지가 아니라, 어디에 선언하였는지에 따라 스코프 결정(소스코드 구조 기준)
• 동적 영역 규칙: dynamic 스코프 규칙
  어디서 호출했는지에 따라 스코프 결정, 런타임때 결정됨

스코프의 종류

• 전역 스코프: 소스 코드상의 모든 곳에서 사용할 수 있는 전역 변수(js에서는 window객체)
• file 스코프
  • 해당 파일 전체에서 접근 가능, 다른 파일에서는 접근 불가능
  • 원시적 형태의 모듈 영역
  • ES6 + 자바스크립트: <script type="module" ... >로 조회되는 파일
• 모듈 스코프
  모듈을 지원하는 프로그래밍 언어에서 모듈 단위 변수 선언 가능
• 함수 레벨 스코프
  자바스크립트는 기본적으로 함수 레벨 스코프
  • 지역변수: 함수 내에서 유효한 변수
    • 함수가 반환된 이휴에는 사용 불가능
    • 함수 외부에서 유효하지 않음
• 블록 레벨 스코프
  지역변수: 코드 블럭 내에서 유효한 변수
  ES6 + 자바스크립트: let, const 키워드는 블록레벨 스코프

자바스크립트의 Scope

• 스코프 규칙: lexical scoping rule
• 스코프 종류: 함수레벨 스코프기반
  • 전역 스코프: 전역 객체 window의속성(브라우저 기준)
    ES6+ 부터 지원하는 스코프
  • 블록 레벨 스코프: let, const 키워드는 블록레벨 스코프
    file 스코프: <script type="module" ...>로 조회되는 파일

실행 컨텍스트

자바스크립트를 실행하기 위해서는 변수, 함수선언, 변수의 유효범위, this등등이 필요한데 이걸 물리적 객체 형태로 관리하는 것을 실행 컨텍스트라고 한다.
코드가 실행되는 범위에 대한 개념이라고 할 수 있다.

실행 컨텍스트는 코드 평가, 코드 실행의 순서로 이루어진다.

• 코드 평가(Creation Phase)
  코드 평가 단계: Lexical Environment 생성

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

• 코드 실행(Execution Phase)
  코드 실행 단계: 위에서 아래로 코드가 실행

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

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

• global 컨텍스트 === 전역 컨텍스트
  함수 내에서 실행되는 코드가 아니라면, 전역 켄텍스트에서 실행
  e.g 브라우저 기준: Global Object = window
• function 컨텍스트
  함수가 호출될 때마다, 함수에 대한 실행 컨텍스트 생성
  각 함수들은 자신만의 실행 컨텍스트 존재
• eval 컨텍스트
  eval 함수만의실행 컨텍스트 존재

자바스크립의 Call Stack

• 자바스크립트 엔진이 호출된 함수와 순서를 추적하는 방법
  어떤 함수가 동작하고 있는지, 다음에 어떤 함수가 호출되어야하는지 등을 제어, 함수가 반환된 후 실행이 올바른 지점에서 다시 선택되도록 한다.
  즉, 함수 호출을 수행할 수 있게 해주는 Record 보관 구조
• Stack자료 구조: 프로임이 쌓이는, Last in First out(LIFO)형태의 자료 구조
  • 콜스택: 함수 호출시 만들어지는 실행 컨텍스트가 쌓임, 하나의 일만 처리 가능
• 자바스크립트 엔진은 코드를 평가하여 실행 컨테그스트를 만들고, 콜 스택에 하나씩 쌓고, 콜스택에서 실행 컨텍스트를 실행하며, stack에서 하나씩 없앤다.

클로저

실행 컨텍스트의 생성 단계에서 함수와 변수를 기록하고 외부 환경을 참조할 때, 스코프 체인이 형성됨

• 함수가 종료가 되었는데, 아직 참조가 남아있는 경우
  자바스크립트는 일급객체이므로, 함수 내의 내부 함수가 있음

• 발생조건
  외부 함수 실행 컨텍스트 환경의 변수를 참조하고 있는
  내부 함수 실행 컨텍그트

• 상황
  내부 함수내에서 아직 외부 함수의 변수를 참조하고 있어, 외부 함수가 종료되었지만, 외부 함수의 참조가 유지되어, 외부 함수 환경에 접근할 수 있는 상황

클로저란?

반환된 내부 함수가 자신이 선언됐을 때의 환경인 스코프를 기억하며, 자신이 선언됐을 대의 환경 밖에서 호출되어도 그 환경(스코프)에 접근할 수 있는 함수

클로저 특징

함수가 종료되어도, 스코프를 기억
특정 스코프에 접근할 수 있는 함수

1. 상태 유지
2. 은닉화