02. 면접 대비 js

https://velog.io/@developer-sora/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EB%A9%B4%EC%A0%91-%EC%A7%88%EB%AC%B8-%EC%A0%95%EB%A6%AC-Part1CS-JSReact

프론트엔드 면접 질문 정리 Part1(CS, JS,React)

 

해당 사이트의 질문을 참고 했습니다.

---

Promise와 Callback의 차이를 설명해주세요.

콜백함수의 경우 비동기 작업 결과에 대한 처리를 콜백 함수의 중첩을 통해서 할 수 있고
프로미스의 경우 then catch 메서드를 사용해서 처리할 수 있습니다.

 

https://js0616.tistory.com/272

 

async, await의 사용 방법을 설명해주세요.

여러 비동기 작업을 순차적으로 진행할때 사용합니다.

함수 앞에 async 를 붙이고 promise 객체 앞에 await 를 붙이며,

err 처리를 위해서 try-catch 구문을 사용해야 합니다. 

 

 

https://js0616.tistory.com/286

 

 

var, let, const의 차이를 설명해주세요.

 

 

이벤트 버블링과 캡처링에 대해 설명해주세요(예시와 함께).

이벤트 버블링은 이벤트가 발생한 요소에서 시작하여 상위 요소로 전파되는 방식입니다.

이벤트 캡처링은 최상위 요소에서 시작하여 이벤트 대상 요소로 전파되는 방식입니다. 

 

https://js0616.tistory.com/287

 

클로저에 대해 설명해주세요.

클로저는 반환된 내부함수가 자신이 선언됐을 때의 환경(Lexical environment)인 스코프를 기억하여

외부에서 호출되어도 기존 환경(스코프)에 접근할 수 있는 함수를 의미한다.

 

https://js0616.tistory.com/260

 

실행 컨텍스트에 대해 설명해주세요.

실행 컨텍스트란, 코드가 실행시 필요한 정보를 모아놓은 환경입니다.

 변수 객체(Variable Object), 스코프 체인(Scope Chain), this 바인딩 등의 정보를 포함합니다.

 

https://js0616.tistory.com/288

 

 

호이스팅에 대해 설명해주세요.

변수나 함수의 선언이 해당 스코프의 최상단으로 끌어올려지는 현상을 말합니다.

-> let 이나 const 를 사용하여 해결 할 수 있습니다. 

-> 사실  let과 const는 호이스팅이 발생하지만, tdz에 갇히게 되어 초기화 이전에 접근을 방지합니다.

 

불변성을 유지하려면 어떻게 해야하나요?

불변성(Immutability)을 유지하기 위해서는 변수나 데이터를 한 번 생성된 후에 수정할 수 없도록 처리하는 것이 중요합니다. 원시타입의 경우 불변성을 가지며, 객체타입의 경우 

• 스프레드 문법을 사용한 얕은 복사
• immer 라이브러리 사용
• structuredClone 함수 사용

 

 

자바스크립트가 유동적인 언어인 이유는 무엇인가요?

정해진 변수의 타입이 없으며, 런타임 환경에서 변수의 타입이 정해지기 때문에

 

 

this에 대해 설명해주세요.

함수 호출에 따라 특정한 객체를 가리키는 키워드입니다.

기본적으로 this는 전역객체(Global object)에 바인딩된다.

전역함수 -> 전역객체 this 
내부함수 -> 전역객체 this 
메소드 -> 메소드를 호출한 객체 this 
new 생성자 함수 -> 생성한 객체 this
new 없는 생성자 함수 -> 전역객체 this 
=> Scope-Safe Constructor 패턴으로 new 추가
객체 리터럴 -> x 사용하지않음

 

 

https://js0616.tistory.com/259

 

콜백 지옥(Callback hell)을 해결하는 방법을 말씀해주세요.

Promise 나 async-await 을 사용합니다.

 

 

Promise를 사용한 비동기 통신과 async, await를 사용한 비동기 통신의 차이를 설명해주세요.

에러 처리 : Promise catch 메서드 를 사용하고 async-await 은 try - catch 를 사용합니다. 

가독성 : Promise 는 then() 이 길어질 위험이있다, async-await 은 동기식 코드처럼 읽게 해줘서 가독성이 좋다.

 

 

함수 선언형과 함수 표현식의 차이에 대해 설명해주세요.

선언형은 function 키워드를 사용하여 함수를 만들고 함수명이 필수이며,  함수 호이스팅이 발생합니다.

표현식은 변수에 함수를 담아서 사용합니다. 

 

 

렉시컬 환경(Lexical Environment)에 대해 설명해주세요.

함수나 변수가 선언되었을때의 환경

 

 

데이터 타입에 대해 설명해주세요.

원시타입과 객체타입이 있습니다. 

원시 : string, number, boolean, null, undefined, symbol (ES6에서 추가)

객체 : object 

 

원시타입은 변경 불가능한 값을 가지며 '값에 의한 전달'을 하고

객체타입의 경우 변경가능하며 '참조에 의한 전달'을 합니다. 

 

https://js0616.tistory.com/248

 

 

깊은 복사와 얕은 복사에 대해 설명해주세요.

객체나 배열을 복사할 때의 방식으로

얕은 복사는 최상위 값들만을 복사하고 내부에 있는 객체나 배열은 참조(주소)로 복사됩니다.

깊은 복사는 새로운 객체를 생성하여 원본 객체 독립적입니다.

 

 

requestAnimationFrame을 사용해본 적 있나요?

아니요