3주차 WIL

😊이번 주 알게된 것😊

실행 컨텍스트

실행 컨텍스트는 자바스크립트의 동작원리를 담고 있는 핵심 개념이다. 실행 컨텍스트가 활성화되는 시점에서 수집되는 정보는 VariableEnvironment, LexicalEnvironment, ThisBinding 이 있다. 이 정보값들을 바탕으로 코드를 관리한다.

1. 호이스팅 : 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것
2. 스코프 : 변수가 접근할 수 있는 범위

this

함수와 객체의 관계가 느슨한 자바스크립트에서 this는 이 둘을 연결시켜주는 실질적인 연결점 역할을 한다.

1. 일반 적인 형식으로 함수를 호출하면 그 함수의 this는 전역객체인 window이다. ex) func() 라고 호출하면 this는 window

2. 메소드로 함수를 호출하면 this는 메소드가 소속되어 있는 객체이다.  ex) obj.func() 의 경우 func()의 this는 obj

3. 생성자 안에서의 this는 생성자 함수로 생성된 객체이다. 

4. 간혹 this가 개발자가 원하는 것을 가리키지 않을 때가 있는데 그럴때는 apply, call, bind로 this의 값을 제어할 수 있다.

1. call : Function.protptype.call(this, arg,arg...)  //첫번째 인자는 this, 나머지 인자들은 호출할 함수의 매개변수
2. apply : Function.prototype.apply(this,[arg])  //call 과 사용 방법은 같으나 매개변수를 배열로 받는다.
3. bind : Function.protptype.bind(this,arg,arg...) //call,apply와 다르게 즉시 호출하지 않고 미리 this를 적용한다.

동기와 비동기

자바 스크립트는 싱글 스레드로 동작한다 싱글 스레드로 동작하는 것이 장점도 많지만 구조적으로 시간이 걸리는 작업을 하는 경우, 그 작업이 완료되어야 다른 작업을 수행할 수 있다는 큰 단점이 있다.

비동기 작업은 싱글스레드의 단점을 보완해줄 수 있는 요소이다. 자바스크립트에서는 비동기 작업을 하기 위해 Web API에게 비동기 작업을 전달하며 작업이 완료되면 Task Queue에 콜백 함수가 전달된다. Event Loop는 Task Queue에 전달 된 콜백 함수를 다시 콜스택으로 보내면서 비동기 작업이 완료된다!! 비동기 작업이 성공했는지 실패했는지 확인하고 다음 작업을 진행하기 위해서 promise 문법을 사용한다.

let promise = new Promise(resolve => {
  setTimeout(() => resolve("완료!"), 1000);
});

promise.then(alert); // 성공했을 때

하지만 비동기 작업도 가끔 동기적으로 처리해야 하는 경우가 생기는데 그때 async 와 await를 사용해줄 수 있다.

function delay(ms){
    return new Promise (resolve => setTimeout(resolve,ms));
}

async function getApple(){
    await delay(2000); //await 다음에 쓰여진 함수가 완료될 때까지 기다려준다
    return 'apple'
}

ES5/ES6 문법 차이

ES6에서 바뀐 대표적인 문법들은 아래와 같다

• Hoisting을 개선했다.
  기존에는 var키워드를 사용하여 호이스팅이 빈번하게 일어났는데 이를 방지하기 위해 블록 스코프를 가진 let과 const를 추가했다.
• 화살표 문법을 지원한다.
  장점 : 코드의 간결화, this를 바인딩하지 않는다.
• iterator와 generator 추가.
• module의 import/export 추가.
• Promise 도입
  자바스크립트는 비동기적 언어이기 때문에 callback에 대한 이슈가 많았으나 이부분을 해결할 수 있는 문법을 제공한다.

🤩 다음 주 목표🤩

1. node.js 기본기 다시 공부하기
2. 과제 스케줄 맞춰서 진행하기
3. 터미널로 git 관리하면서 과제하기
4. + Class와 클로저 등 지난 주에 못 본 자바스크립트 기본 문법 공부하기