[IT 면접대비] 개발자 기술면접 대비 🖥️/ 3️⃣ - JavaScript (1)

블로킹과 논블로킹 언어가 무엇인가요?

예를들어보자면 파이썬은 블로킹 언어고 자바스크립트는 논블로킹 언어입니다. 즉 자바스크립트는 다음 코드가 연산이 끝나는 것을 기다리지 않아도 된다는 것을 의미합니다. 그렇기 때문에 자바스크립트는 비동기적으로 작업이 가능하게 됩니다. 그래서 어떠한 작업이 끝나고 이루어져야 하는 작업들은 async/await 나 콜백 함수를 이용해서 이루어지게 됩니다.

 

 

 

 

자바스크립트의 이벤트 루프에 대해 설명해주세요.

우선 자바스크립트는 기본적으로 싱글 스레드 이벤트 루프 형태를 가지고 있습니다.
자바스크립트에는 Stack 이 있고 Queue가 있는데, setTimeout 과 같은 함수들은 메세지 큐, 즉 콜백 큐로 들어가게 되고, 그 메시지가 실행되야되는 상황에 만약 Stack 이 비었있다면 실행이됩니다.

 

 

 

Hoisting이 무엇인가요?

자바스크립트에서 선언문들이 최상위로 끌어올려지는 것을 의미합니다. 이 때, 할당은 끌어올려지지 않고, 이 호이스팅을 생각하며 주의해서 코드를 짜야 합니다.

Hoisting

 

 

 

 

클로저가 무엇인가요?

클로저란, 외부 변수를 기억하고, 그 변수에 접근할 수 있는 함수를 뜻합니다. 자바스크립트는 중첩 함수로 쉽게 클로저를 구현할 수가 있는데, 원래 함수 내부 변수를 스코핑할 때는 렉시컬 스코핑을 따라서 그 전역 변수에 있는 값을 참조하게 됩니다. 하지만, 함수 내부에 다른 함수를 위치시킴으로서 내부 함수가 감싸는 함수의 environment를 참조하게 되고, 값을 저장하는 것이 가능하게 됩니다. 즉, 다시 말하자면, 클로저함수는 자신이 생성될 때의 환경을 기억하는 함수라고 할 수 있습니다.

 

var color = 'red';
function foo() {
    var color = 'blue'; // 2
    function bar() {
        console.log(color); // 1
    }
    return bar;
}
var baz = foo(); // 3
baz(); // 4

- 블록 스코프 : let

 

 

 

 

This 란 무엇인가요?

자바스크립트에서는 모든 실행중인 코드는 this 라는 객체를 가지게 되는데, this는 호출된 상황에서의 함수를 소유하고 있는 객체를 의미합니다. 만약 글로벌에서 this를 쓰게 되면, 그것은 window 객체를 의미합니다.

 

var Person = function(name) {
  console.log(this);
  this.name = name;
};

var foo = new Person("foo"); // Person
console.log(foo.name); // foo

- 그냥 함수를 호출하는 것이 아니라 new키워드를 통해 생성자 함수를 호출할 때는 또 this가 다르게 바인딩 된다. new 키워드를 통해서 호출된 함수 내부에서의 this는 객체 자신이 된다. 생성자 함수를 호출할 때의 this 바인딩은 생성자 함수가 동작하는 방식을 통해 이해할 수 있다.

new 연산자를 통해 함수를 생성자로 호출하게 되면, 일단 빈 객체가 생성되고 this 가 바인딩 된다. 이 객체는 함수를 통해 생성된 객체이며, 자신의 부모인 프로토타입 객체와 연결되어 있다. 그리고 return 문이 명시되어 있지 않은 경우에는 this로 바인딩 된 새로 생성한 객체가 리턴된다.

 

- apply, call, bind 를 통해 this 를 주입 혹은 추출이 가능하다.

 

 

 

 

화살표함수의 이점이 무엇인가요?

화살표 함수는 일종의 익명 함수로 기존 함수보다 좀 더 간결하게 표현이 가능합니다. 또, this 정적으로 결정된다는 점도 이용해서 좀 더 편하게 쓸 수 있습니다.

 

- 화살표함수 :  programming119.tistory.com/94

 

 

 

async/await 에 대해 설명해주세요.

async/await 은 자바스크립트에서  promise 함수를 쉽게 사용하기 위한 syntax sugar 입니다. 비동기 작업들을 할 때 이용되고, async/await 을 통해 콜백 Hell 이라던가, 무한 then 과 같은 보기 안좋은 코드를 깔끔하게 표현할 수 있습니다.

 

- async/await : joshua1988.github.io/web-development/javascript/js-async-await/

 

 

---

 

참고

- developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop

- 블로킹과 논블로킹 :  kay0426.tistory.com/22

- 이벤트 루프 : www.youtube.com/watch?v=wRPcxR1M7Uc&t=944s

- 클로저 : meetup.toast.com/posts/86

 

 

---

출처

github.com/JaeYeopHan/Interview_Question_for_Beginner

JaeYeopHan/Interview_Question_for_Beginner

'[IT 면접대비] 개발자 기술면접 대비 🖥️' 게시글의 내용들은 위 깃허브를 출처로 합니다.

위 게시글 깃허브에 들어가보시면 이미 자세한 내용들이 기술되어 있고, 저는 그냥 제 생각을 보태서 한번 다시 정리하는 정도로 생각해주세요!