JavaScript
Q : 자바스크립트의 데이터 타입은 두 가지가 있습니다. 두가지가 뭔가요?
기본형인 원시형과 참조형입니다.
Q : 기본형에는 어떤 타입이 있죠?
number, bigint, string, boolean, null, undefined, symbol 7가지 가 있습니다.
Q : 참조형에는 어떤 타입이 있나요?
참조형은 원시형이 아닌 모든 것들이 있습니다. 예를 들어 배열, 객체, 함수등이 있습니다.
Q : 그럼 기본형과 참조형의 가장 큰 차이가 뭔가요?
변할수 있고 없고의 차이입니다.
기본형은 변수에 다른 데이터를 할당할 순 있지만, 이미 생성된 원시값은 변경할 수 없습니다.
반면에 참조형의 경우, 객체의 메모리 주소를 변수에 할당하는 방식입니다. 따라서 같은 객체를 참조하기 때문에 변수간의 값이 변경될 수 있습니다.
Q : 상수와 불변의 차이는 무엇일까요?
상수는 변수에 데이터를 재할당할 수 없는 변수이고
불변은 기본형데이터 모두 불변값인데, 메모리에 있는 데이터를 변경할 수 없는 것을 의미합니다.
Q : 불변성은 왜 필요할까요?
원본 데이터가 변하지 않아야하는 경우가 있기 때문입니다.
원본 데이터가 변경되면 변경 추적이 어려워질 수 있습니다. 따라서 불변성이 필요합니다.
Q : undefined와 null의 차이는 무엇일까요?
undefined는 변수를 선언했지만, 값이 할당되지 않았을 경우 이 변수에 접근할때 나타나는 값입니다.
null은 사용자가 의도적으로 값이 없음을 표시하기 위한 값입니다. 따라서, null을 할당하면, 이 변수는 값이 없다는 것을 나타냅니다.
Q : 프로토타입은 무엇인가요?
프로토타입은 JavaScript에서 OOP로 개발하기 위해 사용하는 패턴으로 상속 개념과 같이 부모 객체의 프로퍼티 메소드를 상속받아 사용할 수 있습니다. JavaScript의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어있기때문에, OOP의 상속 개념과 같이 부모 객체의 프로퍼티 메소드를 상속받아 사용할 수 있기 때문입니다.
Q : 프로토타입 체인이란 무엇인가요?
JavaScript는 객체가 다른 객체를 상속할 때, 해당 객체에서 찾는 속성 값이 없을 경우 상위 객체의 프로토타입에서 값을 찾는 과정을 말합니다. 이 과정에서 상속된 모든 객체의 프로토타입은 체인 형태로 연결되어 있기때문에 프로토타입 체인이라 말합니다.
(최상위 객체까지 확인했는데 프로토타입 값을 찾을 수 없으면 undefined 반환)
Q : 일반 클래스 언어와 프로토타입 언어의 차이는?
클래스 기반 언어는 객체 형식이 정의된 클래스라는 개념을 가지지만 프로토타입은 class개념이 없습니다.
따라서 클래스기반 언어의 경우 틀 자체틀 자체를 상속시키고 상속시킨 틀을 이용해서 객체를 생성시킵니다.
반면 프로토타입 기반 언어는 클래스라는 개념이 없으니 객체를 prototype으로 연결시킵니다.
자바스크립트는 동기? 비동기?
자바스크립트는 원래 동기적으로 처리되어 한줄씩 순서대로 처리됩니다.
그러나 setTimeout, 이벤트리스너, ajax함수를 사용하면 비동기적 처리가 가능합니다.
Q : 이벤트 루프에 대해서 설명해주세요
자바스크립트는 싱글 스레드로 하나의 스택에서 작업을 처리할 수 있습니다.
코드들이 스택에 쌓여서 바로바로 실행이 되는데, ajax코드나, setTimeout, 이벤트리스너 같이 대기시간이 필요한 코드들은 task queue에 순서대로 쌓입니다.
이 queue에 쌓인 코드들은 스텍이 비어잇을 때, 다시 스텍에 담겨서 실행시키는데 이 작업이 event loop입니다.
Q : 그럼 event loop는 왜 필요할까요?
자바스크립트는 싱글스레드기 때문에 한번에 하나의 작업만 수행할 수 있습니다.
그러나 웹 애플리케이션은 사용자랑 상호작용하여 비동기작업이 필요하기 때문에, 이런 비동기 작업을 지원하기 위해서 이벤트 루프가 필요합니다.
Q : JavaScript에서 Promise가 무엇인가요?
promise는 JavaScript에서 하는 비동기 통신 패턴으로 비동기 작업 완료 후 결과를 담은 객체입니다.
기존의 사용하던 콜백 방식의 약점을 보완하여 나온 패턴으로 가독성을 높이고 콜백 지옥을 피할 수 있으며, 비동기 처리 시점을 명확하게 표현할 수 있습니다.
성공하면 resolve로 then 메소드를, 실패하면 reject를 반환하며 catch 메소드를 실행합니다.
프로미스 상태로는 pending(대기), fulfilled(이행), rejected(실패 -reject 호출)가 있습니다.
Q : 더 자세히 설명해주세요
비동기 통신은 요청을 보내면 응답을 기다리지 않고 다른 일을 하기 때문에 일의 처리 순서를 보장하기가 어렵습니다. 이를 해결하기 위해서 콜백으로 중첩을 사용하는데, 중첩이 쌓여서 복잡도가 높아지면 결국 콜백헬이 발생하는겁니다. 이렇게되면 가독성이 좋지 않기때문에 비동기 처리 시점을 상태로 나타내서 콜백헬을 극복할 수 있습니다.
동기 통신 : req를 보내면 res를 받기 전까지 기다려야해서 req-res 순차적으로 진행함.
비동기 통신 : req를 보내면 res를 기다리지 않고 다른 일을 한다.
1. 네트워크 응답 처리할때,
2. 사용자 이벤트 처리할때,
3. 파일을 읽고 쓰는 것처럼 파일 작업 할때,
4. 의도적으로 시간을 지연할 때 비동기처리를 한다.
콜백, 프로미스, async await이 있다.
-> 콜백: 콜백은 서버로 어떤 요청을 보낼 때 응답을 기다리고만 있는게
아니라 다른 작업을 함으로써 동기적인 코드에비해 성능을 향상시킬 수
있기 때문에 사용합니다.
-> async awiat은 promise를 더 쉽게 사용하도록 하며 코드를
더 간결하게 만들 수 잇고 특히 화살표 함수를 사용할 수도 있습니다.
async 함수 키워드를 이용하여 비동기 함수를 선언하고, await키워드를 이용해서
비동기 작업이 완료될 때까지 기다리고 결과값을 반환할 수 있습니다.
이를 통해 콜백 지옥과 프로미스 체인을 피하고, 보다 가독성이 좋은 코드를
작성할 수 있습니다.
예외처리는 try와 catch를 사용하면 됩니다. Q : 프로미스 에러 캐치방법에대해 설명해주세요
then()메소드의 두개의 콜백 함수를 인자로 받아 두번째 함수가 호출되면 에러를 핸들링할 수 있고, catch 메소드를 활용해서 예외 처리를 할 수 있습니다.
그러나 catch를 사용하는 것이 더 좋습니다.
then으로 에러를 핸들링하게 되면, 첫 번재 콜백 함수에서 발생하는 에러를 잡아내지 못하기 때문에 catch를 사용하는 것이 더 좋습니다.
Q : 클로저에 대해 설명해주세요
클로저는 자신이 생성될 때의 환경을 기억하기때문에 함수가 호출될 때 해당 환경 정보에 접근할 수 있는 함수를 말합니다.
자신을 포함하고 있는 외부함수보다 내부 함수가 더 오래되는 경우, 외부 함수 밖에서 내부 함수가 호출되더라도 외부 함수의 지역 변수에 접근할 수 있습니다.
(클로저는 함수형 프로그래밍 패러다임에서 많이 사용되고, 콜백 함수나 비동기 처리에서도 많이 사용됩니다.)
Q : 클로져 사용 예제를 알려주세요.
클로저가 가장 유용하게 사용되는 경우는, 현재 상태를 기억하고 변경된 최신 상태를 유지하는 것입니다.
예를 들어 toggle버튼으로 다크모드를 구현할 경우, 클로저를 제거하지 않는 한 클로저에 의해 변경된 상태 값을 기억하고 있기 때문에, 다크모드이전 이후를 계속 반복 변경할 수 있습니다.
이벤트 관리법
Q : 이벤트 캡처링과 버블링이란?
이벤트 캡처링은 상위 엘리먼트의 이벤트가 하위 엘리먼트로 가는 걸 말하며,
이벤트 버블링은 하위 엘리먼트의 이벤트가 상위 엘리먼트로 가는 걸 말합니다.
Q : 이벤트 위임에 대해 설명해주세요
이벤트 버블링과 캡쳐링을 이용한 방법으로, 이벤트 리스너를 해당 요소에 추가하는 대신, 상위 요소에 이벤트를 위임하면, 하위 요소의 이벤트를 처리할 수 있게 됩니다.
이렇게 되면, 이벤트 리스너 남발로 인한 메모리 낭비를 줄여줍니다.
Q : 클래스의 extends를 사용하지 않고 상속하려면?
- 자바스크립트는 모든 객체가 프로토타입체인을 가지고 있기 때문에
프로토타입 체인을 활용해서 부모객체의 프로토타입을 자식 객체의 프로토타입 체인에 추가하여 상속할 수 있습니다. Object.create()메소드를 사용해서 자식객체가 부모 객체를 상속하는 객체로 생성하는 방법이 있습니다.
이 둘의 차이점은 프로토타입 체인을 사용하면 생성자 함수를 사용하는 것이며, 두번째 방법은 객체 리터럴을 사용한다는 점입니다.
Q : 실행컨텍스트란?
실행컨텍스트는 코드 실행에 필요한 정보들을 담은 객체입니다.
함수를 실행할때마다 생성되며, 변수, 스코프체인, this등의 정보를 저장하고 있습니다.
스택의 형태로 관리되고 있고, 가장 위에 있는 실행컨텍스트가 현재 실행중인 컨텍스트입니다.
Q :this
this는 현재 실행되는 함수내에서 사용되는 키워드로, 해당 함수가 호출될 때 결정됩니다.
this는 해당 함수가 어떻게 호출되었는지에 따라 달라집니다.
예를들어, 객체의 메소드로 호출하면 this는 해당 객체를 참조하고, 일반함수로 호출하면 this는 전역 객체를 참조합니다.
Q : Call, apply, bind 차이점
call, apply, bind는 함수 호출방법을 지정하여 this값과 인수를 변경시킬 수 있는 메소드입니다.
call과 apply는 함수를 호출하면서 인수를 전달하고, bind는 함수호출 없이 새로운 함수를 생성하는 차이가 있습니다.
call은 함수를 호출할 때, 첫번째 인자로 전달된 객체를 함수 내부에서 this값으로 사용하고, 두 번째 인자부터는 호출된 함수의 매개변수로 전달됩니다.
apply는 함수를 호출할 때, 첫 번재 인자는 call과 동일하지만, 두번째 인자부터 모두 배열에 놓어야합니다.
bind는 함수를 호출하지 않고, 함수와 this 값을 유지하는 새로운 함수를 생성합니다.
정리
call, apply, bind는 함수 호출방법을 지정하여 this값과 인수를 변경시킬 수 있는 메소드입니다.
call과 apply는 함수를 호출하면서 인수를 전달하고, bind는 함수를 호출하지 않고, 함수와 this값을 유지하는 새로운 함수를 생성하는 차이가 있습니다.
그리고 call과 apply의 차이는 call은 호출할 함수의 인수를 쉼표로 구분한 리스트형식으로 전달하는 것이고, apply는 배열을 전달하는 것입니다.
Q : use strict이란 무엇인가요? 장단점은 무엇인가요?
use strict은 엄격모드로 전체 스크립트나 부분 함수에 적용할 수 있습니다.
strcit 모드를 사용해서 코드 실수나 오류를 예방할 수 있어 이전에 자바스크립트의 유연성때문에 디버깅이 어려웠던 에러들을 출력해서 바로 잡을 수 있도록 도와줍니다.
장점으로는 변수나 함수를 중복으로 선언하는것을 막아줘 코드의 가독성과 유지보수성을 높여줍니다.
또, 혼란스럽거나 제대로 고려되지 않은 기능들을 비활성화 시킵니다.
그리고 일반 모드에서는 null이나 undefined가 출력되야할때 this는 최상위 컨텍스트로 대체하는 반면, strict 모드에서는 null과 undefined가 대체되지 않고 그대로 출력됩니다.
단점으로는 ES5에서 나온 기능이기때문에 이전 버전의 브라우저에서는 작동하지 않을 수 있어 호환성 문제가 발생할 수 있습니다.
또 다른 단점으로는 서로 다른 strict 모드로 작성된 스크립트를 병합하면 문제가 발생할 수 있습니다.
Q : strict 모드와 일반 모드의 차이는?
this 차이라고 할 수 있습니다.
일반모드에서의 null이나 undefined로 출력되어야하는 상황에서 this는 최상위 컨텍스트로 대체됩니다.
그러나 strict 모드에서의 this는 대체되지 않고 그대로 null과 undefined가 출력됩니다.
ES6에서 달라진 점
Q : ES6에서 달라진 점이 뭔지 아는대로 말해주세요
let, const 키워드가 추가,
화살표 함수 추가,
백틱 추가,
promise와 async await 추가,
symbol추가,
디스트럭처링 추가,
sread 연산자 추가
ES6이상의 버전을 브라우저에서 인식하지 못하면 어떻게 해결해야하나요?
브라우저별로 지원하는 것이 다르기 때문에 트랜스파일러인 바벨을 사용해서 변환합니다.
Q : var, let, const의 차이에 대해 설명해주세요.
var, let, const의 가장 큰 차이는, 스코프범위와 호이스팅이 가능한지의 여부입니다.
우선 var의 경우 함수스코프를 가지고 있어 함수가 끝나기 전까지 계속 참조가 가능합니다.
그러나 let과 const의 경우 블록 스코프를 가지고 있어 블록 내부에 선언된 변수는 블록을 벗어나면 참조할 수 없습니다.
호이스팅의 경우 var은 호이스팅이 가능합니다. 코드 실행 전 자바스크립트 내부에서 미리 변수를 선언하고 undefined라고 초기값을 설정해주기 때문에 선언되기 전에 참조하면 undefined가 출력됩니다.
반면, let과 const의 경우 호이스팅이 가능하지만, TDZ에빠져 var과 다른 방식으로 작동합니다.
let과 const는 선언 후 초기화해두지 않기 때문에 선언 전에 참조하면 에러가 발생합니다.
Q : 호이스팅이 무엇인가요?
호이스팅은 함수 내부에 있는 선언들을 해당 함수 범위 최상단에 끌어올리는 것을 말합니다.
실제로 코드를 끌어올리는 것이 아니기 때문에 메모리에는 변화가 없습니다.
Q : TDZ를 언급하셨는데 TDZ가 무엇인가요?
TDZ는 스코프의 시작지점부터 초기화시작 시점까지의 구간을 말합니다.
변수를 선언할때는 선언, 초기화, 할당 단계를 거칩니다.
var은 변수를 선언할때 초기화가 동시에 진행되어 할당 전에 변수를 호출해도 이미 초기화 되어있어 undefined가 출력되어 호이스팅이 발생합니다.
그러나 let과 const는 선언과 초기화가 동시에 진행되지 않습니다.
따라서 변수는 선언해도 초기화가 되어있지 않기 때문에 TDZ구간에 메모리가 할당되지 않아 참조에러가 발생하고 호이스팅이 되지 않는 것처럼 보여집니다.
Q : 일반 함수와 화살표 함수의 차이점
함수 선언 방식과 this바인딩이 다릅니다.
일반 함수는 function 키워드를 사용하여 함수를 선언하지만, 화살표 함수의 경우 화살표 기호로 함수를 선언합니다.
this의 경우, 컨텍스트 차이가 있습니다.
일반함수는 자신만의 this를 가지고 있고, 그 this는 함수가 선언된 위치와 상관없이, 함수를 호출하는 방법에 따라 달라집니다. 즉, 일반 함수는 함수를 호출한 객체를 가르키게 됩니다.
그러나 화살표 함수는 자신만의 this를 가지고 있지 않기때문에, 화살표 함수 내부에서 this에 접근하면, 자신을 감싸고 있는 상위 스코프로 올라가서 this를 찾게 됩니다.
그렇게해서 찾은 this를 그대로 가져와서 사용합니다. 따라서 화살표 함수에서 this는 함수 호출 방법과는 상관 없이, 함수를 선언한 위치에서 this가 결정되고 더 이상 변하지 않습니다.
Q : 왜 다를까?
일반 함수에서 this는 호출부에 따라 결정됩니다. 클로저에서 상위 스코프 this를 참조할 때, this가 호출부에 따라 결정되며, 상위 스코프의 this를 기억하기 위해 변수에 상위 스코프의 this를 할당하고, 해당 변수를 참조했었습니다.
그러나, 화살표 함수에서는 이를 더쉽게 하기 위해서 this 자체가 상위 스코프의 this를 바라볼 수 있도록 만들어진 것입니다.
Q : 그렇다면 화살표 함수를 객체의 메소드로 사용하는 것이 좋은 것인가?
그렇지 않다.
메서드 내부에서 this를 통해서 객체의 속성에 접근해야할때, 화살표 함수에서는 this가 더이상 obj 객체가 아니기 때문에 this.name처럼 해당 속성에 접근할 수 없게 됩니다. 따라서 객체의 메소드로는 일반함수를 사용하는 것이 더 적합할 수 있습니다.
Q : forEach와 map의 차이점은 무엇인가요?
forEach는 값을 리턴하지 않지만, map은 결과값을 모아 새 배열을 리턴합니다. 대신 return이 있어야 undefined가 출력되지 않고 실행 결과값이 출력됩니다. 따라서 배열을 순회하고나서 새로운 배열의 결과 값이 필요하다면 map을 사용하면 됩니다.
Q : 디스트럭처링이란 무엇인가요?
배열이나 객체에서 값을 추출하여 변수에 할당하는 문법이며, 코드를 더 간결하고 가독성있게 만들어주거나, 배열이나 객체에서 필요한 값만 추출하여 사용할 수 있습니다.
Q : 모듈이란?
모듈은 특정 기능별로 나눠진 덩어리입니다.
만약 기능별로 나눠지지 않고 방대한 양의 코드가 한 파일에 작성되면 다른 개발자와 협업하는 상황에서 업무 효율성도 떨어질 뿐더러 코드를 유지보수하는데도 힘들 것입니다.
따라서 유지보수와 재사용성을 높이기 위해 모듈화하는 것이 좋습니다.
Q : 콜 스택 (Call Stack)과 힙 (Heap)에 대해 설명해주세요.
JS엔진은 Memory heap과 call stack으로 구성되어있습니다.
여기서 JS는 단일 스레드 언어이기 때문에 하나의 스택으로 구성되어있어 하나씩 처리됩니다.
콜 스택에서는 보통 원시타입(number, bigint, string, boolean, null, undefined, symbol) 데이터 타입이 저장됩니다. 그리고 실행컨텍스트를 통해서 스코프체인, this, 변수등의 데이터를 저장하고 수행시켜줍니다.
반면, heap의 경우 참조데이터(함수, 배열, 객체)가 저장되며, 메모리 할당이 일어납니다.
Q : 가비지 컬렉터가 뭔가요?
메모리 할당을 추적해서 더 이상 참조되지 않는 데이터를 가비지 컬렉터가 적절한 시점에 메모리 영역에서 회수하는 것을 말합니다
메모리 생명주기: 필요할 때 할당 -> 할당된 메모리 읽고 쓰는것처럼 사용 -> 더 이상 필요하지 않으면 해제합니다.
Q : AJAX는 무엇인가요?
자바스크립트를 통해서 서버에 데이터를 요청하여 작업을 수행하는 것으로 페이지 전체를 새로고침하지 않고 일부만 업데이트 할 수 있도록 수행할 수 있는비동기성입니다.
