[ TIL ] [ 정규과정 : 실전프로젝트주차 ] 기술면접 대비 1. Hoisting, async/await, Arrow Function

Q1. Hoisting이란 무엇인지 설명해주실 수 있을까요?

변수와 함수 선언이 그들의 스코프 상단으로 끌어올려지는 동작을 의미합니다. 이러한 동작은 실행 컨텍스트의 생성 단계에서 발생한다.

(나는 처음, 호스팅으로 공부해버렸다... 호이스팅이라는걸 다시 확인했고, 아래의 블로그를 참조해서 공부했다.)

 

https://tecoble.techcourse.co.kr/post/2021-04-25-hoisting/

호이스팅에 대한 오해와 진실

---

Q2. async/await 이란 무엇인지 설명해주실 수 있을까요?

async와 await는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법입니다. 기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있게 되었다.  

1) async 키워드는 function 앞에 사용한다. function 앞에 async를 붙이면 해당 함수는 항상 프라미스를 반환한다. 프라미스가 아닌 값을 반환하더라도 이행 상태의 프라미스(resolved promise)로 값을 감싸 이행된 프라미스가 반환되도록 한다.

2) await: await 키워드는 async 함수 내에서만 사용될 수 있다. await는 Promise가 완료될 때까지 함수의 실행을 일시 중단시킵니다. Promise가 성공적으로 완료되면 그 결과값을 반환하고, 실패하면 에러를 발생시킨다.

 

참고 URL : https://joshua1988.github.io/web-development/javascript/js-async-await/

자바스크립트 async와 await

참고 URL : https://velog.io/@khy226/%EB%8F%99%EA%B8%B0-%EB%B9%84%EB%8F%99%EA%B8%B0%EB%9E%80-Promise-asyncawait-%EA%B0%9C%EB%85%90

동기, 비동기란? (+Promise, async/await 개념)

 

---

 

Q3. Arrow Function 이란 무엇인지 설명해주실 수 있을까요?

 

ES6 문법 이후부터는 자바스크립트에서 함수를 만들 수 있는 문법이 새롭게 하나 등장했다.
arrow function 이라는 문법인데 이걸 이용하면 함수를 만들 수 있다.

function이라는 길고 복잡한 키워드 대신에
=> 이런 예쁜 화살표를 사용해서 함수를 만들어내는 신문이다.

1) 함수 본연의 기능을 아주 잘 표현하는 문법이다.
 
로그래밍할 때 function 문법은 왜 사용할까? 
1. 여러가지 기능을 하는 코드를 한 단어로 묶고 싶을 때 (그리고 나중에 재사용할 때)
2. 입출력기능을 만들 때 
이럴 때 함수를 사용한다. 

arrow function을 사용하면 함수 본연의 입출력기능을 아주 직관적으로 잘 표현해준다.

arrow function을 쓰시면 입출력기능이 쉽고 예쁘게 표현된다.

var 두배만들기 = (x) => { return x * 2 }

console.log( 두배만들기(4) );
console.log( 두배만들기(8) );

숫자를 넣으면 2배를 해주는 함수를 만들면, 매우 이해하기 쉬워진다.

2) 소괄호 생략이 가능하다.

파라미터가 하나라면 소괄호 생략이 가능하다. 

var 두배만들기 = x => { return x * 2 }

console.log( 두배만들기(4) );
console.log( 두배만들기(8) );

 

x에 소괄호를 생략해도 된다.

3) 중괄호 생략이 가능하다. 

중괄호 안에 return 한줄 뿐이라면 중괄호와 return도 생략가능하다. 

var 두배만들기 = x => x * 2 ;

console.log( 두배만들기(4) );
console.log( 두배만들기(8) );

결론: x가 어떻게 변하는 함수인지 입출력기능이 바로 한눈에 들어온다.


4) this 바인딩 :  arrow function은 어디서 쓰든간에 내부의 this 값을 변화시키지 않는다. 
그러니까 바깥에 있던 this의 의미를 그대로 내부에서도 사용하는 함수가 바로 arrow function 이라는 함수입니다. 
(*항상 장점은 아니다. 내가 예측하던 this값과 달라질 수도 있으니 단점이 될 수 있다.  )

 

참고 URL : https://codingapple.com/unit/es6-3-arrow-function-why/

Arrow function은 function을 대체하는 신문법이 아님 - 코딩애플 온라인 강좌

---

 

오늘부터 기술면접 대비를 진행했다. 

하루에 2개정도 내가 알아본 내용들을 제출했고, 

오늘은 내가 미리 내가 기존에 알아본 내용들로 롤플레잉도 진행햬보았는데, 걱정이다..! 

나 나중에.. 기술면접 잘 볼수있겠지? 

벌써 걱정이다! 

아직 전문지식이 부족해서 꼬리질문 나오면 긴장부터 된다!

많이 배워야겠다!