오늘은 JS에 대해 공부한 것을 Notion에 필요하다고 생각한 부분만 복사해 둔 내용과 스스로 정리한 내용을 합친 글을 올리는 것으로 TIL을 작성했다.
함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다.
함수의 상위 스코프를 결정하는 방식인 렉시컬 스코프(Lexical scope)는 함수를 선언할 때 결정된다.
This
함수 호출 - 전역에서 호출할 경우 this는 window
메소드 호출 - 메소드 안에서 호출할 경우 this는 해당
생성자함수 호출 - 생성자 안에서 호출할 경우 해당 instance
apply, call, bind - 모두 인자로 들어온 값이 this.
전역함수는 물론이고 심지어 내부함수의 경우도 this는 외부함수가 아닌 전역객체에 바인딩
메소드의 내부함수일 경우에도 this는 전역객체에 바인딩된다.
내부함수는 일반 함수, 메소드, 콜백함수 어디에서 선언되었든 관게없이 this는 전역객체를 바인딩한다
실행 컨텍스트 스택에 전역 객체 생성 후에 쌓이고, 지역? 객체 생성 후에도 쌓임
실행 컨텍스트는 크게 3가지로 구성,
Variable Object, Scope Chain, this
Variable Object는 전역에서는 전역 객체, 함수에서는 활성 객체를 가리킨다.
Scope chain 은 본인을 기준으로, 참조할 수 있는 대상에 대한 chaining값을 배열에 저장.
→ 함수 실행중에 변수를 만나면 그 변수를 우선 현재 Scope, 즉 Activation Object에서 검색해보고, 만약 검색에 실패하면 스코프 체인에 담겨진 순서대로 그 검색을 이어가게 되는 것이다. 이것이 스코프 체인이라고 불리는 이유이다.
전역 객체는 단일 사본으로 존재하며 이 객체의 프로퍼티는 코드의 어떠한 곳에서도 접근할 수 있다.
내부 함수의 [[Scopes]] 프로퍼티는 자신의 실행 환경(Lexical Enviroment)과 자신을 포함하는 외부 함수의 실행 환경과 전역 객체를 가리키는데 이때 자신을 포함하는 외부 함수의 실행 컨텍스트가 소멸하여도 [[Scopes]] 프로퍼티가 가리키는 외부 함수의 실행 환경(Activation object)은 소멸하지 않고 참조할 수 있다. 이것이 클로저이다.
지금까지 살펴본 실행 컨텍스트는 아직 코드가 실행되기 이전이다. 하지만 스코프 체인이 가리키는 변수 객체(VO)에 이미 함수가 등록되어 있으므로 이후 코드를 실행할 때 함수선언식 이전에 함수를 호출할 수 있게 되었다.
함수선언식의 경우, 변수 객체(VO)에 함수표현식과 동일하게 함수명을 프로퍼티로 함수 객체를 할당
함수선언식은 변수 객체(VO)에 함수명을 프로퍼티로 추가하고 즉시 함수 객체를 즉시 할당하지만 함수 표현식은 일반 변수의 방식을 따른다. 따라서 함수선언식의 경우, 선언문 이전에 함수를 호출할 수 있다. 이러한 현상을 함수 호이스팅(Function Hoisting)이라 한다.
위 코드를 실행하면 아래와 같이 실행 컨텍스트 스택(Stack)이 생성하고 소멸
var 키워드로 선언된 변수는 선언 단계와 초기화 단계가 한번에 이루어진다.
스코프 체인을 자바스크립트 엔진이 검색
함수 호출 패턴에 따라서 this가 달라짐
- 전역 패턴
- 메서드 패턴
- 생성자 패턴
생성자 함수를 new 없이 호출한 경우, 함수 Person 내부의 this는 전역객체를 가리키므로 name은 전역변수(window)에 바인딩된다. 또한 new와 함께 생성자 함수를 호출하는 경우에 암묵적으로 반환하던 this도 반환하지 않으며, 반환문이 없으므로 undefined를 반환하게 된다.
apply, call, bind
Function.prototype 객체의 메소드
call은 보통 함수와 똑같이 인자를 넣고, apply는 인자를 하나로 묶어 배열로 만들어 넣는 것을 알 수 있습니다.
→ call, apply는 변화된 함수를 return 해주기때문에 뒤에 인자에 대한 값이 필요(call은 열거형, apply는 배열)
→ 대신 bind는 this값만 변경시켜주고 return하는것이 없기 때문에, 인자는 this를 대체할값만 필요.
apply() 메소드의 대표적인 용도는 arguments 객체와 같은 유사 배열 객체에 배열 메소드를 사용하는 경우이다. arguments 객체는 배열이 아니기 때문에 slice() 같은 배열의 메소드를 사용할 수 없으나 apply() 메소드를 이용하면 가능하다.
함수의 arguments를 조작할 때 사용합니다. arguments는 함수라면 처음부터 갖고 있는 숨겨진 속성인데요. 바로 함수에 들어온 인자를 배열 형식으로(배열은 아닙니다. 유사 배열이라고 부릅니다.) 반환합니다.
OOP 란?
→ 실생활에 있는 객체 를 표현하기 위해 핵심적인 속성이나 기능을 추출하여 추상화를 통해 모델링 하려는 프로그래밍 패러다임
→ 캡슐화, 상속, 다형성
일급 객체??
- 변수나 데이터 구조(자료 구조) 안에 담을 수 있다.
- (하위 루틴의) 파라미터로 전달할 수 있다.
- (하위 루틴의) 반환 값(Return Value)로 사용할 수 있다.
- 할당에 사용된 이름과 관계없이 고유한 구별이 가능하다.
OOP를 실생활에 적용시키자면
축구 클럽과 같은 것을 하나의 클래스로 생각한다면
어떤 집단을 '축구 클럽'이라고 정의하기 위한 주요한 속성.
즉 어떠한 법인? 이나 해당 리그에 대한 자격? 라이센스,
선수로 등록되어있는 사람의 수 등등 의 속성을 가지고 있어야만 축구 클럽이라고 정의할 수 있다.
이에 대한 상속체로는 FC서울이 될수도 있고 여러가지 집단이 들어올 수 있겠지만.
해당 속성을 가지고 있어야만 하나의 집단으로 인정 할수 있는 개념같음
OOP 구성요소
클래스, 객체, 메서드
객체 리터럴 방식과 생성자 함수 방식의 차이는 프로토타입 객체([[Prototype]])에 있다.
- 객체 리터럴 방식의 경우, 생성된 객체의 프로토타입 객체는 Object.prototype이다.
- 생성자 함수 방식의 경우, 생성된 객체의 프로토타입 객체는 Person.prototype이다.
함수형 프로그래밍?
→ 부수 효과를 없애고 순수 함수를 만들어 모듈화 수준을 높이는 프로그래밍 패러다임
순수함수?
→ 동일한 입력에 대해서는 동일한 값만을 return하고, 외부의 값에 영향을 주지 않는 함수.
모듈화?
JSON - 키는 반드시 큰따옴표(작은따옴표 사용불가)로 둘러싸야 한다.
JSON.parse 메소드는 JSON 데이터를 가진 문자열을 객체로 변환한다.
JSON.stringify 는 해당 객체를 JSON 타입으로 바꿔줌 ( 키와 값이 모두 string )
parsing - 브라우저가 읽을수 있는 형태로 바꿔주는 작업
AJAX
→ 자바스크립트를 이용해서 비동기적(Asynchronous)으로 서버와 브라우저가 데이터를 교환할 수 있는 통신 방식을 의미한다.
비동기 함수를 순차적으로 호출하기 위해서는 아래와 같이 복잡한 코드 구조를 가져야된다.(Callback 패턴)
Promise 객체를 통해 이를 간단하게 표현 가능.
선언 시에는 resolve, reject 인자를 사용해 성공 케이스와 실패 케이스에 대해 정의하고,
호출 시에는 성공했다면 then, 실패했다면 catch 로 resolve, reject로 지정한 값을 return 해준다.
async, await 의 경우는 비동기적 동작을 동기적인 방식으로 인지할 수 있도록 도와주는 방식이다.(???)
async로 선언된 함수는 Promise 객체를 반환한다
REST API
URI는 자원을 표현하는 데에 집중하고 행위에 대한 정의는 HTTP Method를 통해 하는 것이 REST한 API를 설계하는 중심 규칙이다.
