TIL #210114

📚 TIL

---

모던 JavaScript 튜토리얼

 

 

파트 1 - 코어 자바스크립트

⌛ 함수 심화학습

 

재귀와 스택

 

재귀(recursion) : 함수 내부에서 자기 자신을 호출하는 것을 나타내는 프로그래밍 용어

재귀 단계(recursion step) : 함수가 자신을 호출하는 단계

재귀의 베이스(base) : 작업을 아주 간단하게 만들어서 함수가 더 이상은 서브 호출을 만들지 않게 해주는 인수

재귀적으로 정의된 자료 구조는 자기 자신을 이용해 자료 구조를 정의

모든 재귀 함수는 반복문을 사용한 함수로 다시 작성할 수 있음

 

나머지 매개변수와 전개 문법

 

... : 나머지 매개변수나 전개 문법으로 사용

나머지 매개변수 : ...이 함수 매개변수의 끝에 있으면 인수 목록의 나머지를 배열로 모아줌

argument 변수 : 인수를 사용할 수 있는 반복 가능한 유사 배열 객체

전개 문법(spread syntax) : ...이 함수 호출 시 사용되면 배열을 목록으로 확장

 

변수의 유효범위와 클로저

 

코드 블록 {}안에서 선언한 변수는 블록 안에서만 사용할 수 있음

중첩(nested) 함수 : 함수 내부에서 선언한 함수

렉시컬 환경(Lexical Environment) : 환경 레코드(Environment Record)와 외부 렉시컬 환경에 대한 참조로 구성

환경 레코드 : 모든 지역 변수를 프로퍼티로 저장하고 있는 객체

 

오래된 'var'

 

var로 선언한 변수는 블록 스코프가 아닌 함수 수준 스코프를 가짐

var로 선언된 변수를 재선언할 수 있음

var 선언은 함수가 시작되는 시점(전역 공간에선 스크립트가 시작되는 시점)에서 처리

즉시 실행 함수 표현식 : 함수 표현식이 만들어지고 바로 호출되면서, 해당 함수가 바로 실행

 

전역 객체

 

전역 객체를 사용하면 어디서든 접근 가능한 변수를 만들 수 있음

보편적인 이름은 globalThis, 브라우저 환경에선 window, Node.js 환경에선 global라고 부름

브라우저에서 var로 선언한 전역 변수는 전역 객체의 프로퍼티가 됨

 

객체로서의 함수와 기명 함수 표현식

 

객체로서의 함수에서 사용 할 수 있는 프로퍼티 두 가지

name : 함수의 이름이 저장, 함수 선언부에 이름이 없는 경우엔 이름을 추론

length : 함수 선언부에 있는 인수의 수로 나머지 매개변수는 포함되지 않음

기명 함수 표현식 : 이름이 있는 함수 표현식을 나타내는 용어, 재귀 호출에 사용 가능

커스텀 프로퍼티 : 함수엔 다양한 프로퍼티를 추가할 수 있음

 

'new Function' 문법

 

new Function 문법을 사용하면 함수를 만들 수 있음

 

let func = new Function ([arg1, arg2, ...argN], functionBody);

new Function을 이용해 만든 함수의 [[Environment]]는 외부 변수를 사용할 수 없음

 

setTimeout과 setInterval을 이용한 호출 스케줄링

 

호출 스케줄링(scheduling a call) : 일정 시간이 지난 후에 원하는 함수를 예약 실행(호출)할 수 있게 하는 것

setTimeout : 일정 시간이 지난 후에 함수 실행

 

let timerId = setTimeout(func|code, [delay], [arg1], [arg2], ...)

func|code : 실행하고자 하는 코드, 함수 또는 문자열 형태

delay : 실행 전 대기 시간, 단위는 밀리초(millisecond), 기본값은 0

arg1, arg2… : 함수에 전달할 인수

setInterval : 일정 시간 간격을 두고 함수 실행

clearTimeout : setTimeout을 호출하면 반환되는 '타이머 식별자(timer identifier)' 사용하여 스케줄링 취소

중첩 setTimeout : setInterval 사용할 때보다 유연하게 코드 작성, 지연 간격 보장

대기 시간이 0인 setTimeout : 현재 스크립트의 실행이 완료된 후 가능한 한 빠르게 원하는 함수 호출

 

call/apply와 데코레이터, 포워딩

 

데코레이터(decorator) : 인수로 받은 함수의 행동을 변경시켜주는 함수

func.call(context, arg1, arg2...) : 주어진 컨텍스트와 인수를 사용해 func 호출

func.apply(context, args) : this에 context가 할당되고, 유사 배열 args가 인수로 전달되어 func이 호출

 

함수 바인딩

 

func.bind(context, ...args) : this가 context로 고정되고 인수도 고정된 함수 func을 반환

객체 메서드의 this를 고정해 어딘가에 넘기고자 할 때 사용

부분 적용(partially applied) 함수 : 기존 함수의 인수 몇 개를 고정한 함수, 부분(partial) 함수

 

화살표 함수 다시 살펴보기

 

화살표 함수가 일반 함수와 다른 점

• this를 가지지 않음
• arguments를 지원하지 않음
• new와 함께 호출할 수 없음
• super가 없음

 

---

 

⌛ 객체 프로퍼티 설정

 

프로퍼티 플래그와 설명자

 

프로퍼티 플래그(flag)

 

플래그	true	그렇지 않다면
writable	값 수정 가능	읽기만 가능
enumerable	반복문 사용해 나열 가능	반복문 사용해 나열 불가능
configurable	프로퍼티 삭제, 플래그 수정 가능	프로퍼티 삭제, 플래그 수정 불가능

Object.getOwnPropertyDescriptor 메서드 :  특정 프로퍼티에 대한 정보를 모두 얻을 수 있음

 

let descriptor = Object.getOwnPropertyDescriptor(obj, propertyName);

obj : 정보를 얻고자 하는 객체

propertyName : 정보를 얻고자 하는 객체 내 프로퍼티

Object.defineProperty 메서드 : 플래그를 변경할 수 있음

 

Object.defineProperty(obj, propertyName, descriptor)

obj, propertyName : 설명자를 적용하고 싶은 객체와 객체 프로퍼티

descriptor : 적용하고자 하는 프로퍼티 설명자

한 객체 내 프로퍼티 전체를 대상으로 하는 제약사항을 만들 수 있는 메서드 존재

 

프로퍼티 getter와 setter

 

접근자 프로퍼티(accessor property) : 값을 획득(get)하고 설정(set)하는 역할 담당

접근자 프로퍼티 설명자

 

get	인수가 없는 함수, 프로퍼티를 읽을 때 동작
set	인수가 하나인 함수, 프로퍼티에 값을 쓸 때 호출
enumerable	데이터 프로퍼티와 동일
configurable	데이터 프로퍼티와 동일

 

---

 

⌛ 프로토타입과 프로토타입 상속

 

프로토타입 상속

 

[[Prototype]] : 객체나 null을 가리키는 숨김 프로퍼티

__proto__ : [[Prototype]]의 getter·setter

프로토타입 : [[Prototype]]이 참조하는 객체

obj에서 프로퍼티를 읽거나 메서드를 호출하려는데 해당하는 프로퍼티나 메서드가 없으면 자바스크립트는 프로토타입에서 프로퍼티나 메서드를 찾음

프로토타입에서 상속받은 method라도 obj.method()를 호출하면 method 안의 this는 호출 대상 객체인 obj를 가리킴

 

함수의 prototype 프로퍼티

 

F.prototype : new F()를 호출할 때 만들어지는 새로운 객체의 [[Prototype]] 설정

F.prototype의 값은 객체나 null만 가능

생성자 함수에 "prototype"를 설정하고, 이 생성자 함수를 new를 사용해 호출할 때만 적용

 

네이티브 프로토타입

 

모든 내장 객체가 따르는 패턴

 

• 메서드는 프로토타입에 저장(Array.prototype, Object.prototype, Date.prototype 등).
• 객체 자체엔 데이터만 저장(배열의 요소, 객체의 프로퍼티, 날짜 등).

 

프로토타입 메서드와 __proto__가 없는 객체

 

프로토타입 메서드

 

Object.create(proto, [descriptors])	[[Prototype]]이 proto를 참조하는 빈 객체를 만듦
Object.getPrototypeOf(obj)	obj의 [[Prototype]] 반환
Object.setPrototypeOf(obj, proto)	obj의 [[Prototype]]이 proto가 되도록 설정

Object.create(null) : 프로토타입이 없는 객체 생성

객체의 프로퍼티를 반환하는 메서드

 

Object.keys(obj), Object.values(obj), Object.entris(obj) : obj 내 열거 가능한 프로퍼티 키, 값, 키-값 쌍을 담은 배열 반환

Object.getOwnPropertySymbols(obj) : obj 내 심볼형 키를 담은 배열 반환

Object.getOwnPropertyNames(obj) : obj 내 문자형 키를 담은 배열 반환

Reflect.ownKeys(obj) : obj내 키 전체를 담은 배열 반환

obj.jasOwnProperty(key) : 상속받지 않고 obj 자체에 구현된 키 중 이름이 key인 것이 있으면 true를 반환

 

---

 

⌛ 클래스

 

클래스와 기본 문법

 

클래스(class) :  객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 일종의 틀

객체를 정의하기 위한 상태(멤버 변수)와 메서드(함수)로 구성

 

class MyClass {
  prop = value; // 프로퍼티

  constructor(...) { // 생성자 메서드
    // ...
  }

  method(...) {} // 메서드

  get something(...) {} // getter 메서드
  set something(...) {} // setter 메서드

  [Symbol.iterator]() {} // 계산된 이름(computed name)을 사용해 만드는 메서드 (심볼)
  // ...
}

 

클래스 상속

 

클래스 상속 : class Child extends Parent 클래스를 다른 클래스로 확장

생성자 오버라이딩 : this를 사용하기 전에 Child 생성자 안에서 super()로 부모 생성자를 반드시 호출해야 함

메서드 오버라이딩 : Child에 정의된 메서드에서 super.method()를 사용해 Parent에 정의된 메서드 사용

 

정적 메서드와 정적 프로퍼티

 

정적(static) 메서드 : "prototype"이 아닌 클래스 함수 자체에 설정한 메서드, static 키워드 사용

특정 클래스 인스턴스가 아닌 클래스 '전체’에 필요한 기능을 만들 때 사용

정적 프로퍼티는 데이터를 클래스 수준에 저장하고 싶을 때 사용

 

private, protected 프로퍼티와 메서드

 

내부 인터페이스(internal interface) : 동일한 클래스 내의 다른 메서드에선 접근할 수 있지만, 클래스 밖에선 접근할 수 없는 프로퍼티와 메서드

외부 인터페이스(external interface) : 클래스 밖에서도 접근 가능한 프로퍼티와 메서드

내부 인터페이스를 숨기려면 protected나 private 프로퍼티 사용

protected 필드 : _로 시작, protected 프로퍼티가 정의된 클래스와 해당 클래스를 상속받는 클래스에서만 _가 붙은 필드에 접근해야 함

private 필드 : #로 시작, #로 시작하는 필드는 해당 필드가 정의된 클래스 내부에서만 접근 가능

 

내장 클래스 확장하기

 

배열, 맵 같은 내장 클래스도 확장 가능

내장 클래스는 정적 메서드를 상속받지 못함

 

'instanceof'로 클래스 확인하기

 

instanceof 연산자

 

obj instanceof Class

obj가 Class에 속하거나 Class를 상속받는 클래스에 속하면 true 반환

 

믹스인

 

믹스인(mixin) : 다른 클래스들의 메서드 조합을 포함하는 클래스

자바스크립트는 다중상속을 지원하지 않는데, 믹스인을 사용하면 메서드를 복사해 프로토타입에 구현할 수 있음

 

---

 

⌛ 에러 핸들링

 

'try..catch'와 에러 핸들링

 

try..catch를 이용하면 런타임 에러를 처리할 수 있음, try에서 코드 실행, 에러가 발생하면 catch에서 잡아냄

 

try {
  // 이곳의 코드를 실행
} catch(err) {
  // 에러가 발생하면, 여기부터 실행됨
  // err는 에러 객체
} finally {
  // 에러 발생 여부와 상관없이 try/catch 이후에 실행됨
}

 

커스텀 에러와 에러 확장

 

커스텀 에러 클래스는 Error나 다른 내장 에러 클래스를 상속받아 만들 수 있음

instanceof를 사용하면 에러 종류를 판별할 수 있음

 

---

 

😁 오늘 한 일

---

 

📕 자바스크립트 공부하기

- 책보고 공부하고있는데 이론만 열심히 파봤자 의미가 없을 것 같다고 생각이 들었어요

- 이해하고 정리해야지해도 뭐가뭔지 모르겠고 시간이 너무 없으니 몰라도 넘어가도 하니까

실습부터 해봐야겠다고 생각이 들어서 오늘은 10챕터까지만 정리했어요!

- 개념 한 번이라도 들어보고 몇 번 반복하면 도움이 될테니 조금씩 정리해보려고요 ㅎㅎ

- 3일 남았다 두근두근 리액트 쪼금이라도 보고 시작해야겠습니다!!

 

🎻 바이올린 배우기

- 오늘은 드디어 노래 진도를 나갔어요! 이제 바이올린으로 나비야를 연주할 수 있답니다

- 현을 꾹꾹 누르니까 손가락이 아파요 기타보단 덜아픈데 바이올린도 손가락 아프구나ㅠ

- 연습을 더 해야할 것 같은데 바이올린을 사자니 비싸고 학원에 자주 가자니 너무 멀고

- 다음주부터는 일주일에 두번씩 가겠어요!! 가는 길에도 공부하고 ㅎㅎ

 

🍣 회전초밥 먹기

- 오늘은 무슨 맛있는 음식을 먹을까 하다가 회전초밥집에 갔어요!

- 바이올린 학원 옆 백화점에 가면 샤브샤브, 콩나물국밥, 쌀국수, 간장새우, 스테이크, 초밥이 맛있어요

- 오늘은 회전초밥!! 연어랑 새우랑 타코와사비가 젤 맛있어요! 최고 맛있는건 연어&양파소스초밥~!

- 그냥 초밥집에 가면 찐새우초밥 소라초밥도 먹어야되는데 회전초밥집은 먹고싶은 초밥만 먹을 수 있어서 좋아요