프론트엔드 기초: React + TypeScript(2)

✨Flow control

• 제어흐름, 흐름제어라고 한다
• 명령형 프로그램의 개별 명령문, 명령 또 는 함수 호출이 실행되거나 평가되는 순서
• 5가지 제어흐름의 종류가 있다.

제어 흐름의 종류
goto		다른 구문에서 시작 (💢개발설계에서 오류를 발생시길 수 있다.-강의에서 다루지 않음)
choice	if-else, switch	일부 조건이 충족되는 경우에만 일련의 명령문 실행
loop	collection loop, general loop	어떤 조건이 충족될 때까지 일련의 명령문을 0회 이상 실행
continue	loop continuation	현재 실행 구문에서 떨어진 한 구문의 집합을 실행
break	loop early exit, 함수 실행 정지	로그램 실행을 중단

 

표현식과 표현문의 개념

표현식 expression

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

const 변수명 = 'apple';
const 함수 = (인자) => {
	if (인자 === 'apple') {
    	return '🍎';
    } else {
    	return '❌';
    }
};
함수('apple');

문 statement

• 프로그램을 구성하는 기본 단위 혹은 최소 실행 단위
• 명령문과 동일한 개념이다.
• 선언문, 할당문, 제어문, 반복문, 블럭문, ...등

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

 

블럭문 block statement

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

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

 

조건문 - Choice

• 일부 조건이 충족되는 경우에만 일련의 명령문 실행
• if...else문
  • 논리 조건의 참/거짓에 따라 명령문을 실행해야 할 경우 사용
  • if문의 논리조건에는 true, false로 평가할 수 있는 표현식을 대입가능
  • 논리존건이 참인경우, if 블럭문 실행
  • 논리조건이 거짓인 경우, else 블럭문 실행
  • 해당 값은 false로 평가 (Falsy)
    • false
    • undefinded
    • null
    • NaN
    • 0
    • -0
    • ''  // 빈문자열
    • document.all
  • else if 절을 사용하여 다수의 조건을 순차적으로 검사할 수 있다.
  • 중첩 if문을 사용할 수 있지만, 여러개의 중첩문으로 이루어진 if문은 가독성이 떨어진다.
  • 마틴 파울러 리팩토링 자료에서는
    • nested conditional 지양
    • Guard Clauses 형태로 구현을 권장한다.
• switch문
  • switch에 명시된 표현식을 평가한 후 평가된 값과 case 라벨 값을 비교하여 일치하는 case 명령문을 실행함
  • 평가된 값에 해당하는 case문이 없을 경우 default의 명령문이 실행되도록 한다.
  • case 옆에 조건은 라벨이라고 표현하며 내가 종료를 원하는 case마다 return이나 break로 종료시켜야 한다.

const foo = (parameter) => {
	switch (parameter) {
    		// case 라벨:
		case 1:
			return 1;
		case 2:
		case 3:
			return 23;

		case 4:
			return 4;
		default:
			return 0;
	}
};
foo(3); // 23

 

반복문 - Loop

while - 조건부(condition) loop

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

let count = 0;
while (count < 3) {
	count++;
	console.log(count);			// 1 2 3
}
console.log('end');				// 'end'
----------------------------
let count = 0;
while (count < 3) {
	count++;
	console.log(count);			//
}
console.log('end');				// 'end'

 

do...while - 조건부(condition) loop

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

let count = 0;
do {
	count++;
	console.log(count);		// 1 2 3
} while (count < 3);
console.log('end');			// 'end'
----------------------------
let count = 3;
do {
	count++;
	console.log(count);		// 4
} while (count < 3);
console.log('end');			// 'end'

 

💢 조건부 loop 주의사항

• 종료될 수 있는 조건이 아닌 경우, 무한 루프에 빠질 수 있다.

 

for loop

• 특정 부분의 코드가 반복적으로 수행될 수 있도록 한다.
• 언어별로 지원하는 형식이 있다.
  • 자바스크립트 루프 지원 형식
  • [초기화 - 조건식 - 증감문] 의 형식
    • C언어에서 유래한 문법
    • while문과 다르게 해당 루프와 관련된 loop 변수가 존재
    • loop변수의 비교 및 증감을 위한 별도 문법을 명시 필요
    • loop 변수를 활용하여 명시적으로 카운트를 관리 필수
    • for([초기문]; [조건문]; [증감문];) {}
      • 초기문: loop 내에서 사용할 loop변수를 초기화
      • 조건문: loop 내 코드 실행 전, 조건을 평가하여 loop를 지속하지 판단
      • 증감문: loop 내 코드 실행 후, 실행되는 문장. (루프변수 증감 용도)
  • 집합 loop 형식 (Foreach loop)

Collection loop (Foreach 루프)

• 컬렉션 안의 항목들을 횡단하는 제어흐름문
• For 문과 다르게 명시적으로 카운터(루프변수)를 관리하지 않는다.
• 잠재적인 순환 횟수 오류를 예방한다. (off-by-one error) => 가독성이 좋다.
• 자바스크립트 collection loop
  • for...of
    • 반복 가능한 객체(iterator)를 통해 반복하는 루프를 만든다.
    • for([변수] of [object]) {}
      • 변수는 반복 가능한 객체의 값을 반환한다.
      • 반복 가능한 object: Array, Set, String,...
  • for...in
    • 객체의 열거속석(enumerable)을 통해 지정된 변수를 반복한다.
    • for([변수] in [object]) {}
      • 변수의 객체는 key값을 반환한다.

break문

• 제어흐름의 종류 중 프로그램 실행 중단 종류
• 반복문, switch문을 종료시킬 때 사용
• 가장 가까운 while, do...whild, for, switch문을 종료하고 다음 명령어로 넘어간다.

continue문

• 제어흐름의 종류 중 현재 실행 구문에서 떨어진 한 구문의 집합을 실행 종류에 속한다.
• while, do...while, for문을 다시 시작하기 위해 사용한다.
• 가장 안쪽의 while, do...while, for문을 둘러싼 반복을 종료하고 다름 loop를 실행한다.
• 전체 루프 실행을 종료하지 않는다.
  • while: 조건문으로 이동
  • for: 증감문으로 이동

예외 처리하기

예외 상황 Exception

• 런타임 때 발생할 수 있는 의도치 않은 상황을 뜻한다.
• 흐름 제어시 발생할 수 있는 예외 상황이므로, 이를 이해하여 코드 레벨에서 대응해야 한다.
  • handling: 대응한다는 의미
  • control: 예상하고 직접 조작한다는 의미
• 예외 상황을 핸들링하지 않는다면
  • 기능이 동작하지 않거나
  • 어플리케이션이 shout down(crush) 될 수 있다.

예외의 원인

• 언어 레벨 ~ 외부 요인에 의한 예외 상황까지 다양하다.
  • 코드 레벨에서의 문제
  • 하드웨어, 디바이스의 문제
  • 라이브러리 손상
  • 사용자의 입력 실수
  • ...등

예외의 종류

• ECMAScript Error: 자바스크립트 언어에서 발생하는 Error Type
  • 자바스크립트 언어에서 발생하는 Error Type
  • RangeError 값이 집합에 없거나 허용 범위가 아닐 때
  • ReferenceError 존재하지 않는 변수 참조 시
  • SyntaxError 문법을 지키지 않았을 때
  • TypeError 값이 기대한 자료형이 아니여서 연산이 불가능할때
  • ...등
• DOMException: Web API 레벨에서 발생하는 Error Type
  • Web API 레벨에서 발생하는 Error Type
  • NetworkError 네트워크 에러 발생 시
  • AbortError 작업이 중단되었을 때
  • TimeoutError 작업시간이 초과되었을때
  • ...등
• 그 외 예외
  • 개발자도 예상하지 못한 예외 상황
  • 개발자가 직접 예외 상황을 예상하여 핸들링 할 수 있다.
  • 자바스크립트의 Error 객체를 사용하여 직접 에러를 정의내리고 핸들링 할 수 있다.

throw문

• 예외를 발생시킬때 사용 -> throw 표현식
• catch 블럭에서 에러 객체 핸들링
• 예외가 발생하면
  1. 현재 함수의 실행이 중지
  2. 에러 객체와 함께 에러가 throw
  3. 제어 흐름은
     • 호출자 사이에 catch블록이 있으면 catch블록으로 전달
     • 호출자 사이에 catch블록이 없으면 프로그램 종료
• throw문 이후의 명령문은 실행되지 않는다.

Error 객체

• 사용자가 직접 Error객체를 정의하여 사용할 수 있다.
  • new Error('에러메세지')
  • Error.message = '에러메세지'
  • Error.name = '에러이름'

try...catch

에러 catch

• 에러가 발생하면
  1. 현재 함수의 실행이 중지
  2. 에러 객체와 함께 에러가 throw
  3. 제어 흐름은
     • 호출자 사이에 catch블록이 있으면 catch블록으로 전달
     • 호출자 사이에 catch블록이 없으면 프로그램 종료
• 에러를 catch하여 프로그램이 종료되지 않도록 해야한다.
• 예외 처리를 담당하는 핸들러를 찾기 위해 순서대로 콜 스택(call stack)을 거슬로 올라가
• 올바른 핸들러를 찾아내어 그 곳에서 처리되도록 한다.

콜 스택 (call stack)

• 스택 자료구조
  • 출입구가 하나인 데이터 구조 (First In Last Out)
• Call Stack
  • 자바스크립트 코드가 실행되며 생성되는 실행컨텍스트를 저장하는 자료구조
  • 함수를 호출할 때마다 스택이 쌓이고 함수의 실행이 종료되면 콜스택에서 스택을 제거하는 원리
• 에러 throw되면
  • 콜 스택을 확인하여 핸들링하고 있는 catch문이 있는 스택에서 처리

try...catch

• try...catch 문은 블록문 내에서 예외가 발생할 경우 예외처리를 맡을 하나 이상의 반응 명령문을 지정한다.
  • try 블록의 명령문 중 하나가 실패 -> catch로 제어권이 넘어간다.
  • try 블록의 명령문 중 하나가 성공 -> catch로 제어권이 넘어가지 않는다.
• catch블럭에서 인자로 throw된 catchID를 참조 할 수 있다.
• try{} catch(catchID) {}
• 콜스택 중 하나에서 catch문에서 예외가 처리된다면 더 이상 콜스택에서는 더 이상 예외가 타고 올라오지 않음

try...catch문의 finally 블록

• finally블록은 try블록에서 예외 상황이 발생하지 않더라도 실행된다.
• 예외 상황이 발생되면 : try -> catch -> finally
• 예외 상황이 발생되지 않으면 : try -> finally

try...catch문 - 사례

• 외부에 의존되어서 구현된 로직에서 사용 (예기치 못한 상황 대응)
• network 에러 발생 시
• 에러를 감지해야 하는 비즈니스 로직
  • 비즈니스 데이터가 유효하지 않은 경우
  • 유저가 잘못된 데이터를 입력한 경우
  • ... 등

객체란?

객체 Object

• 객체는 속성을 가진 독립적인 개체 (entity)
• 객체는 속성(property)으로 구성된 집합이다.
• 자바스크립트는 객체 기반의 프로그래밍 언어
• 자바스크립트를 구성하는 대부분이 객체이다. (원시 이외의 값)

객체 Object - 속성 property

• 속성은 키와 값 사이의 연결관계이다. key-value
• 객체의 속성은 JavaScirpt의 변소와 유사한데 객체에 속해 있다.
• 속성 접근 방법
  • 마침표 표기법: objectName.propertyName
  • 대괄호 표기법: objecName['propertyName']
• 속성에는 값 뿐만 아니라 함수도 할당 가능하다.
• method: 객체에 속해있는 함수를 method라고 한다.

객체 Object - 속성 - method

• 메서드는 다른 함수와 동일하게 정의하지만 객체 속성에 할당되어있다.
• ECMASciprt 2015에서는 짧은 구문으로 작성 가능하다.

객체 Object - 생성방법 - 1. 리터럴표기

• const foo = { name : 'apple' };
• .변수명: 새로운 객체의 이름
• 콜론 앞 속성이름(name): 식별자
• 콜론 뒤 값('apple'): 속성에 할당할 표현식

객체 Object - 생성방법 - 2. 생성자 함수

• 속성만 같고 값만 다른 객체를 여러개를 생성해야 할 때, 번거로움이 있다.
• 생성자 함수를 사용하면,
  • 탬플릿처럼 사용하여 속성이 동일한 객체를 여러개 생성할 수 있다.
  • 생성자 함수: new 키워드와 함께 객체를 생성하고 초기화하는 함수
  • 생성자 함수를 정의한 후 생성자 함수를 활용하여 객체 인스턴스를 생성한다.
  • (인스턴스: new 키워드로 생성된 객체)
  • 생성자 함수는 대문자로 시작(일반함수와 구분)
  • this 키워드로 속성을 정의하여, 생성될 인스턴스를 가리키게 해둔다.
  • new 연산자를 활용하여 인스턴스를 생성한다.

객체 Object - 생성방법 - 3. Object.create

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

Object 객체

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

책체 속성 control

객체 속성 조작하기

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

1. 객체의 속성 동적 생성
2. 객체의 속성들 나열하기
3. 객체의 속성 삭제하기

객체 속성 조작하기 - 동적 생성

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

객체 속성 조작하기 - 나열하기

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

1. for...in
   • 모든 열거 가능한 속성을 순회한다. (객체의 프로토타입 체인의 속성까지)
2. Object.keys(객체)
   • 객체 자신의 열거 가능한 속성 이름들 배열로 반환
3. Object.getOwnPropertyNames(객체)
   • 객체 자신만의 모든 속성을 배열로 반환

객체 속성 조작하기 - 삭제하기

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

객체 비교와 Referenece

객체는 참조타입 Reference type

• 객체 참조 타입 Reference type: 모든 연산이 참조값(메모리 주소)으로 처리
• 객체 비교
• 객체를 복사할 경우

객체비교

• 객체를 서로 비교하면
  • 객체 속성과 값이 같은 객체여도 참조값이 다르므로 서로 다름
  • 자기 자신과의 비교에서만 true
  • 눈으로 봤을때 값은 같아 보이지만 서로의 힙메모리 주소가 다름

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

• 정의된 객체를 다른 변수에 그대로 할당할 경우 동일한 메모리 주소(address)만 할당됨
• 둘 중 하나의 객체를 수정한다면 동일한 메모리 주소이기 때문에 두 변수가 참조하고 있는 객체가 수정되어 결과적으로 2가지 객체 모두 변경사항에 영향을 받는다.
• 객체 복사의 2가지 방법
  • 얕은 복사 (Shallow copy)
    • 복사된 객체의 속성 중 하나라도 같은 참조를 하고 있게되면 얕은 복사로 복사 되었다고 한다.
    • 객체의 속성 중 참조타입이 없는 경우에만 얕은 복사 방법 권장
    • 방법
      • Object.assign( {}, 복사할 객체 )
      • spread 연산자 { ...복사할 객체 }
  • 깊은 복사 (Deep copy)
    • 복사된 객체의 속성 중 하나라도 같은 참조를 하고 있는 속성이 없다면 깊은 복사로 복사 되었다고 한다.
    • 방법
      • 재귀함수를 이용한 복사 (라이브러리: lodash - cloneDeep)
      • JSON.stringify 객체 -> 문자열로 변환(참조가 끊어짐) -> 객체로 변환

객체의 종류

객체의 분류

• 객체는 아래와 같이 분류할 수 있다.
• 표준 빌트인 객체 ECMAScirpt
• 호스트 객체 (브라우저 기준): DOM API

built-in 객체

Number 객체

• 숫자를 표현하고 다룰 때 사용하는 원시 래퍼 빌트인객체
• 함수로 바로 사용가능
• 생성자 함수
  • Number.prototype
  • 인스턴스 메서드: toFixed, toLocalString ...등
• 변수 또는 객체의 속성이 숫자를 갖고 있으면
  • Number 객체 인스턴스 생성 없이 Number 인스턴스 속성과 메서드 사용가능

Math 객체

• 수학적인 상수와 함수를 위한 속성과 메서드를 가진 빌트인 객체 (숫자 데이터 타입만 지원)
• Math는 생성자가 아님. 적정 속성과 메서드만 지

Date와 UTC

• Date 객체: 1970년 1월 1일 UTC 자정과의 시간 차이를 밀리초 단위로 나타낸 것
• UTC (Universal Time Coordinated): 국제 표준 시간의 협정 세계시
  • 국제적인 표준 시간의 기준으로 쓰이는 시각
  • 1970년도에 UTC 채택, 1972년 구현
  • UTC는 그리니치 평균시(GMT)에 기반한다. GMT라고도 불림
  • 인터넷, www, 항공 등에서 사용된다.
  • 한국은 UTC기준으로 +9시간이다.
    • getTimezoneOffset() // UTC 현지 시간대(분단위 반환)
    • 한국은 -540분 == 9시간

Date 객체

• 1970년 1월 1일 UTC 자정과의 시간차이를 밀리초 단위로 나타낸 빌트인 객체

Date 인스턴스 메서드

• new Date()
• new Date(시간문자열)
• 시간을 get하는 메서드
• 시간을 set하는 메서드

Date 객체 - Object 메서드 오버라이딩

• 최상위 객체가 갖고 있는 메서드 중 상속받는 메서드가 있다
• valueOf()
  • UTC와 기준 시점 사이의 밀리 세커즈 차이값
  • getTime()과 동일한 값
• toString()
  • Date()와 동일한 값

문자열

문자열 특징

• 문자열 내에 이스케이프 문자 사용가능 (\n)
• 줄바꿈 문장 표현가능
  • \n
  • 템플릿 리터럴 (``백틱) 안에선 개행문자도 적용된다.
• 데이터 보관시 문자열 형태로 저장 유용
  • 텍스트 형태로 저장
  • 객체형태 -> JSON.stringify로 변환하여 저장

문자열 조작

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

String 객체

• 문자열을 다룰 때 사용하는 원시 래퍼 빌트인 객체
• 함수로 바로 사용 가능
  • Stinrg(...): 문자열로 타입 전환
• 정적 메서드: fromCharCode, fromCodePoint, raw
• 생성자 함수: String.prototype
  • 인스턴스 속성: length
  • 인스턴스 Method
    • 문자열 체크(get): 접근, 찾기, 포함 여부, 비교
    • 문자열 변경(set): 추가하기, 합치기, 분리하기, 변경하기

정규표현식 - 문법

• 문자열에서 특정 문자 조합을 찾기 위한 패턴 (정규식)
• 패턴 작성하는 방법
  • 단순 패턴 사용
  • 특수 문자 사용: 어서션, 문자 클래스, 그룹과 범위, 수량자, 유니코드 속성 이스케이프
• flag를 활용하여 탐색: d, g, l, m, s, u, y

정규표현식 - 생성 방법

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

RegExp 객체

• 정적 속성: lastIndex
• 생성자 함수: RegExp.prototype
• 인스턴스
  • 속성
    • 적용된 flag 반환: flags
    • 적용된 flag 여부 반환:
      • dotAll, gobal, ignoreCase, multiline, source, sticky, unicode
  • method
    • compile(), exec(), test(), toStrgin(), ...

RegExp 객체 & String 객체

• 문자열 인스턴스 method 중 찾는 과정이 있는 method에서 활용한다.
• 찾아서 일치하는지 확인
  • match (정규표현식), matchAll (정규표현식)
• 찾는
  • search (정규표현식)
• 찾아서 교체하는
  • replace (정규표현식), replaceAll (정규표현식)
• 찾아서 분리하는
  • split (정규표현식)

Collection

Collection이란?

• 비용을 절감하기 위하여 상황마다 효율적인 데이터 형태로 처리해야한다.
• 컬렉션은 데이터 항목들의 그룹을 의미한다
  • 컬렉션에는 list, set, tree, graph등이 포함
• 자바스크립트에서는 2가지 타입의 collection이 있다.
  • Indexed collections
    • index 값을 기준으로 정렬되어있는 데이터 집합
      • Array, TypedArray 포함
    • index로 배열 내의 값을 참조할 수 있다.
  • Keyed collections (key based collections)
    • key 값을 기준으로 정렬되어 있는 데이터 집합
      • Map, Set 포함
    • 키와 값을 매핑하여 저장한다
    • 저장된 순서대로 각 요소들을 반복적으로 접근할 수 있다.

Array 객체

• 0개 이상의 식 expression(배열 요소) 목록
• 모든 요소는 필수 값이 아님 (undefined로 지정해도 됨)

Array 객체 - 생성 방법

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

Array 객체 - 특징

• 배열의 길이: 마지막 index + 1 한 값
• 길이를 지정하는 것 가능
  • 원래 길이보다 작게 지정하면, 배열이 잘림
  • 원래 길이보다 크게 지정하면, 배열이 길이는 늘어남
• 배열의 반복 처리하기
  • for문 활용
  • forEach문 활용

 

Map 객체 - 특징

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

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

 

WeakMap - 특징

• 키에 대한 강력한 참조를 생성하지 않는 키/값 쌍의 모음
  • 키는 object만을 허용
• 객체 정보를 비노출
• 객체의 정보를 비노출하는 특징을 활용하여
  • 객체의 사적인 정보를 저장하기 위해서 사용
  • 상세 구현내용을 숨기기 위해서 사용

Set와 WeakSet 공통 속성

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

Set 객체 - 특징

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

Set과 배열의 차이점

• 포함여부 확인 퍼포먼스
  • 배열: indexOf를 사용하여 포함여부 확인은 퍼포먼스가 느림
  • Set: has method를 사용
• 요소 제거
  • 배열: 배열은 요소를 제거할 때 배열을 잘라내야함
  • Set: delete method 사용
• 요소 찾기
  • 배열: 배열은 요소를 제거할 때 배열을 잘라내야함
  • Set: delete method 사용

• 중복여부 확인
  • 배열: 순회하며 확인해야함
  • Set: Set 값은 유일성을 보장, 따라서 중복성 확인 불필요

WeakSet - 특징

• 객체 컬렉션 (object 값만을 허용)
  • WeakSet의 인자로 object만 허용
  • 약한 참조를 가진다
  • const foo = new WeakSet()

JSON (JavaScript Object Notation)

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

직렬화, 역직렬화 (직렬화: serialization, 역직렬화: deserialization)

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

JSON 객체

• 값을 JSON으로 변환하는 method 제공
• 생성자 함수 아님
• 함수로써 사용 불가능
• 정적 method
  • JSON.stringigy: 직렬화 하는 구문
  • JSON.parse: JSON 형태로 파싱하는 구문(역직렬화)
    • 💢주의: 문자열이 객체가 아닌경우 오류 발생
    • try...catch문으로 에러 핸들링 권장

class

• ES6에 추가된 문법

class의 형태

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

class 문법

constructor

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

정적 메서드

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

인스턴스 속성

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

인스턴스 속성 조회 및 조작

getter

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

setter

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

extends

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

super

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

this란?

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

this 바인딩 - 함수 호출 방식

• 전역객체에서 this 사용시
  • brower-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를 명시적으로 바인딩 하는 방법
  1. Function.prototype.apply
  2. Function.prototype.call
  3. Function.prototype.bind

this 바인딩 - apply, call

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

this 바인딩 - bind

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

this 바인딩 - 화살표 함수

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

스코프 Scope

프로그래밍에서 scope

• 스코프 == 변수영역
• 변수가 유효성을 갖는 영역
• 스코프의 규칙
  • 렉시컬 스코프 규칙, dynamic 스코프 규칙
• 스코프의 종류
  • 전역, 모듈, File, 함수, 블록, ...등

Scope의 규칙

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

Scope의 종류

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

실행컨텍스트

• 코드가 실행되는 범위에 대한 개념
• 물리적 객체 형태로 관리

실행컨텍스트의 생성 단계 - Creation phase

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

실행컨텍스트의 생성 단계 - Excution phase

• 코드 실행 단계: 위에서 아래로 코드가 실행
• 변수는 값이 할당
• 함수 실행 코드가 있을 경우 함수 실행
  • 새로운 함수 실행 컨텍스트 생성 및 함수 실행

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

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

자바스크립트의 Call Stack

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

1. 자바스크립트 엔진은 코드를 평가하여 실행 컨텍스트를 만들고
2. 콜 스텍에 하나씩 쌓고 콜스택에서 실행 컨텍스트를 실행하며
3. stack에서 하나씩 없앤다.

클로저

• 함수가 종료되어도 스코프를 기억
• 특정 스코프에 접근할 수 있는 함수
  1. 상태유지
  2. 은닉화

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

• 자바스크립트: 일급객체
• 함수 내의 내부 함수
• 발생조건
  • 외부(outer) 함수 실행 컨텍스트 환경의 변수를 참조하고 있는
  • 내부(inner) 함수 실행 컨텍스트
• 상황
  • 내부 함수내에서 아직 외부 함수의 변수를 참조하고 있어
  • 외부(outer) 함수가 종료 되었지만
  • 외부 함수의 참조가 유지되어 외부 함수 환경에 접근할 수 있는 상황