📌 기술 면접 준비 관련_Javascript

Q : 스코프에 대해서 설명해 주세요.

A : 스코프는 변수 또는 함수가 유효한 범위를 나타내는 개념입니다. 스코프는 코드에서 변수에 접근하거나 참조할 수 있는 범위를 결정하며, 프로그램에서 변수 또는 함수의 가시성과 생존 기간을 관리합니다.

스코프는 변수의 유효범위를 관리하고 충돌을 방지하는 데 도움이 되며, 올바른 변수 및 함수 선언 및 사용을 보장하여 코드의 가독성과 유지 보수성을 향상시킵니다.

📍 주요 유형의 스코프

1. 전역 스코프(Global Scope) : 프로그램 전체에서 접근할 수 있는 범위. 전역 스코프에서 선언된 변수는 프로그램이 실행되는 동안 계속 접근이 가능함.
   
2. 지역 스코프(Local Scope) : 특정 블록 또는 함수 내에서 선언된 변수가 해당 블록 또는 함수 내에서만 유효한 범위를 가짐.
   
   ⭐️ ES6부터는 let과 const를 사용하여 블록 스코프 변수를 도입했다.
   이들은 블록내에서만 유효하며 전역 스코프나 함수 스코프에 영향을 주지 않는다.

---

Q : 스코프와 클로져, 실행 context를 연관지어 설명해주세요.

A : 자바스크립트에서 스코프는 변수와 함수의 유효 범위를 결정하고 실행 컨텍스트는 코드가 실행되는 환경을 제어하며 클로저는 함수가 선언된 스코프에 있는 변수를 기억하여 외부에서 접근 가능하게 하는 개념입니다.

함수가 호출되면 새로운 실행 컨텍스트가 생성되며, 이때 함수의 스코프가 결정됩니다. 클로저는 함수가 다른 스코프에서 변수에 접근할 때 형성되며, 이때 클로저가 형성된 스코프가 실행 컨텍스트의 일부가 됩니다.

---

Q : 배열, 객체를 const로 선언했는데 요소나 속성을 추가할 수 있는 이유에 대해서 설명해 주세요.

A : const 키워드는 변수에 대한 재할당을 막습니다. 하지만 변수가 가리키는 객체나 배열은 변경이 가능합니다. 이는 변수의 불변성과 객체와 배열의 가변성을 구별하는 Javascript의 특징입니다. 배열과 객체의 내용까지 불변하게 만든다면 데이터를 업데이트할때마다 새로운 배열이나 객체를 생성하게 되어 메모리의 사용과 성능에 부담을 줄 수 있기 때문에 Javascript에서는 이러한 유연성을 제공하여 효율적으로 코드를 작성할 수 있도록 합니다.

1. 변수에 대한 불변성 : const로 변수를 선언하면 해당 변수는 재할당이 불가능. 이것은 변수가 메모리에서 차지하는 위치를 다른 값으로 변경할 수 없음을 의미
2. 객체와 배열의 가변성(mutable) : 배열과 객체는 가변성 데이터 타입. 해당 데이터 구조의 내부 요소나 속성을 변경할 수 있다는 것을 의미하며 객체 또는 배열을 가리키는 변수를 const로 선언하더라도 객체, 배열의 내용은 변경될 수 있음

---

Q : 원시 자료형과 참조 자료형에 대해서 설명해 주세요.

A : 원시 자료형은 숫자, 문자열, 불리언 등과 같은 단순한 데이터를 나타내며 변수에는 값 자체가 저장되어 있고 이 값은 복사될 때 변수 간에 독릭적으로 저장이됩니다.

참조 자료형은 객체, 배열, 함수 등과 같은 복잡한 데이터 구조를 나타내며 변수에는 값이 아닌 값이 저장된 메모리 주소(heap)가 저장되어 있고 이 주소를 통해 데이터에 접근을 하게 됩니다. 변수 간에 값을 공유하므로 한 변수에서 데이터를 변경하면 다른 변수에서도 영향을 받을 수 있습니다.

---

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

A : 얕은 복사는 주로 참조 자료형의 최상위 레벨만을 복사하며 내부에 있는 객체나 배열은 원본과 동일한 메모리 주소를 참조합니다. 얕은 복사를 사용하면 최상위 레벨의 값만을 복사하기 때문에, 중첩된 객체나 배열은 공유됩니다.

깊은 복사는 내부의 모든 레벨의 값을 복사하므로 새로운 변수와 원본 변수는 완전히 독립적인 데이터를 가집니다. 깊은 복사를 위해서는 추가적인 작업이 필요하며, 주로 재귀적인 방법, JSON.stringfy와 JSON.parse를 활용하는 방법 등이 사용됩니다.

---

Q : 동기와 비동기에 대해 설명해주세요

A : 동기 코드는 순서대로 실행되고, 한 작업이 끝날 때까지 다음 작업으로 진행하지 않습니다. 반면, 비동기 코드는 작업이 시작된 후에도 다음 작업을 기다리지 않고 동시에 진행됩니다.

---

Q : 콜백함수에 대해서 설명해주세요

A : 콜백 함수(callback function)는 다른 함수에게 인자로 전달되어 나중에 실행되는 함수를 말합니다. 즉, 어떤 일이 완료되었을 때, 특정한 동작이나 로직을 실행하기 위해 사용됩니다.

하지만 콜백 함수는 여러 비동기 작업이 중첩되면 콜백 함수를 계속해서 사용하게 되면서 코드가 복잡해지고 가독성이 떨어지는 "콜백 헬" 현상이 발생할 수 있, 에러를 처리하기가 번거롭고 어렵습니다.

---

Q : Promise의 기능과 필요한 이유에 대해서 설명해 주세요.

A : 간단하게 말하면 콜백 함수의 중첩을 피하고 비동기 코드를 보다 효과적으로 다룰 수 있도록 하며, 코드의 가독성과 유지보수성을 향상 시키고 에러 처리를 간편하게 할 수 있는 장점을 제공합니다.

📍 Promise의 기능

1. 비동기 작업 처리
   • Promise는 비동기적인 작업을 논리적으로 구성하고 처리하는 방법을 제공합니다.
   • 특히 네트워크 요청, 파일 읽기, 데이터베이스 쿼리 등과 같은 비동기적인 작업을 수행할 때 유용합니다.
2. 중첩된 콜백 함수 방지 : 콜백 지옥의 단점을 보완하고 코드를 더 읽기 쉽고 유지보수가 용이해집니다.
3. 비동기 코드의 선언적 표현 : 코드를 선억적으로 표현하여 코드의 의도를 더 명확하게 전달하여 가독성을 향상 시킴
4. 에러 처리
   • catch() 메소드를 사용하여 Promise 체인 내에서 발생하는 에러를 처리할 수 있습니다.
   • 콜백 기반의 비동기 코드에서는 다루기 어려웠던 에러 처리를 효과적으로 할 수 있도록 도와줍니다.
     

📍 Promise가 필요한 이유

1. 비동기 작업의 즉시성 보장 : Javascript는 싱글 스레드 언어이기 때문에, 비동기 작업을 통해 다른 코드가 블록되지 않고 계속 실행될 수 있어 비동기 작업을 효율적으로 처리할수 있음
2. 가독성과 유지보수성 향상 : 비동기 코드를 보다 명확하게 표현할 수 있어 가독성이 향상되고 유지보수가 쉬워집니다.
3. 에러 처리의 편의성 : catch()를 사용하여 에러를 처리할 수 있어 코드 내에서 예외 상황에 대한 적절한 조취를 취해 에러 처리 코드를 중앙에서 관리하고 추적하기가 더 용이해집니다.
4. Promise 기반 라이브러리 및 API와의 호환성 : 많은 라이브러리와 API가 Promise 기반으로 비동기 작업을 수행하도록 설계되어 있고 이를 사용하면 이러한 자원과 더 쉽게 통합할 수 있습니다.

---

Q : Promise.all()이란 무엇인가요?

A : 여러개의 비동기 작업을 동시에 처리하고 싶을때 사용합니다.

---

Q : Async/ await 이란 무엇인가요?

A : async와 await는 JavaScript에서 비동기 코드를 더 간편하게 다룰 수 있도록 도입된 기능입니다.
async 함수 내에서는 await 키워드를 사용하여 비동기 작업이 완료될 때까지 기다릴 수 있습니다.

---

Q : Promise와 Async, await의 차이를 설명해주세요

A : Promise는 비동기 작업을 객체로 다루고, async/await는 비동기 코드를 동기식으로 작성할 수 있게 해주는 문법적인 확장입니다. async/await를 사용하면 코드가 간결해지고 가독성이 향상되며, 에러 처리도 간편해집니다.

---

Q : 순수함수란 무엇인가요? 불변성과 사이드 이펙트와 연결하여 설명해 주세요.

A : 순수 함수는 동일한 입력에 대해 항상 동일한 출력을 반환하며, 외부 상태를 변경하지 않고 부작용이 없는 함수입니다. 이는 불변성과 사이드 이펙트를 제어하여 예측 가능하고 안정적인 코드를 유지하는 데 도움이 됩니다.

불변성(Immutability) : 데이터가 생성된 후에 변경할 수 없는 성질을 나타내며 이를 유지하게 되면 코드의 예측 가능성이 높아지고, 디버깅이 쉬워지며 코드가 안정적으로 동작할 수 있습니다.

사이드 이펙트(Side Effect) : 함수의 실행이 외부에 영향을 미치는 것을 의미하며 이는 주로 외부 변수의 변경, 예외 발생, 네트워크 요청등을 표현합니다.

---

Q : Javascript에서 함수 호출방식에 대해서 설명해주세요

A : 함수 호출은 크게 메소드 호출의 두가지 방식으로 나뉩니다.

1. 함수 호출 : 함수 호출은 일반적은 함수 호출 방식으로 함수를 직접 호출합니다.

  function greet(name) { 
  console.log('Hello,'+name+'!');
  }
  
  greet('Jhon') // 함수 호출 = Hello, John!

2. 메소드 호출 : 함수가 객체의 메소드로 정의되어 있을 때 그 함수를 호출하는 방식입니다.

  var person = {
  name : 'Alice',
  greet: function() {
  console.log('Hello,'+this.name+'!');
  }
 };
  
 person.greet(); // 메소드 호출 = Hello, Alice

3. 생성자 호출 : 함수를 생성자로 사용하여 객체를 생성하는 방식입니다. new 키워드를 사용합니다.

  function Dog(name) {
  this.name = name;
  }
  
  var myDog = new Dog('Buddy'); // 생성자 호출

---

Q : 호이스팅의 개념과 발생하는 이유를 설명해주세요.

A : 호이스팅이란 Javascript에서 변수 및 함수 선언이 코드의 상단으로 옮겨지는 현상을 말하며 이는 코드 실행 전에 변수와 함수가 메모리에 등록되기 때문에 발생합니다.

이를 방지하기 위해 변수 선언시 var 사용 대신에 let과 const를 사용하여 블록스코프를 활용하고, 변수 및 함수 선언 순서에 주의하여 코드를 작성하는 것이 호이스팅에 대한 예기치 못한 동작을 방지하는 데 도움이 됩니다.