javascript

• event delegation에 관해 설명해주세요.
• this는 JavaScript에서 어떻게 작동하는지 설명해주세요.
• prototype 기반 상속은 어떻게 하는지 설명해주세요.
• AMD와 CommonJS는 무엇이고, 이것들에 대해 어떻게 생각하시나요?
• 다음 코드가 즉시 호출 함수 표현식(IIFE)로 동작하지 않는 이유에 관해서 설명해보세요: function foo(){ }();.
  • IIFE로 만들기 위해서는 어떻게 해야 하나요?
• null과 unedefined 그리고 undeclared의 차이점은 무엇인가요?
  • 두개를 구분하기 위해서는 어떻게 하면 될까요?
• 클로져(Closure)는 무엇이며, 어떻게/왜 사용하는지 설명해주세요.
  • 클로져를 만들 때 선호하는 패턴은 무엇인가요? argyle (IIFEs에만 적용할 수 있다)
• 익명함수(anonymous functions)는 주로 어떤 상황에서 사용하나요?
• 당신의 코드를 어떻게 구성하는지? (모듈 패턴, 전통적 상속)
• 호스트 객체(Host Objects)와 네이티브 객체(Native Objects)의 차이점은 무엇인가요?
• 다음 코드의 차이점은 무엇인가요?

function Person(){} var person = Person() var person = new Person()

• .call과 .apply의 차이점은 무엇인가요?
• Function.prototype.bind을 설명하세요.
• document.write()는 언제 사용하나요?
• UA 문자열을 이용하여 기능 검출(feature detection)과 기능 추론(feature inference)의 차이점을 설명하세요.
• AJAX에 관해 가능한 한 자세히 설명하세요.
• AJAX를 사용했을 때의 장단점에 대해 설명해주세요.
• JSON이 어떻게 동작 되는지 설명하세요. (그리고 AJAX와 어떻게 다른지 설명하세요.)
• 기존에 JavaScript 템플릿을 사용한 적이 있나요? 만약에 있다면, 어떠한 방식으로 사용했는지 말씀해주세요.
• "호이스팅(Hoisting)"에 대해서 설명하세요.
• 이벤트 버블링(Event Bubbling)에 대해서 설명하세요.
• 이벤트 캡쳐링(Event Capturing)에 대해서 설명하세요.
• "속성(Attribute)"와 "요소(property)"의 차이가 무엇인가요?
• 내장된 JavaScript 객체를 확장하는 것이 좋지 않은 이유는 무엇인가요?
• document load event와 DOMContentLoaded event의 차이점은 무엇인가요?
• ==와 ===의 차이점은 무엇인가요?
• JavaScript의 "동일출처정책(the same-origin policy)"에 대해서 설명하세요.
• 다음 코드를 동작하게 만드세요.

duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]

• 삼항식(Ternary statement)을 사용하는 이유는 무엇이고, 그것을 표현하기 위한 연산자 단어는 무엇인가요?
• use strict;은 무엇이고, 사용했을 때 장단점에 관해서 설명해주세요.
• 100번 반복되는 반복문이 있습니다. 3의 배수일 때는 fizz, 5의 배수일 때는 buzz, 3과 5의 공배수일 때는 fizzbuzz가 출력되는 코드를 작성해보세요.
• 전역 scope를 사용했을 때 장단점에 관해 설명해주세요.
• 때때로 load event를 사용하는 이유에 관해 설명해주세요. 또 단점이 있다면 대안에 대해서도 설명해주세요.
• SPA에서 SEO에 유리하도록 만들기 위한 방법에 대해 설명해주세요.
• Promise를 사용해 본 경험이 있나요?
• Promise가 콜백 대비 장/단점은 무엇인지 설명해주세요.
• JavaScript의 작동방식의 장단점에 관해 설명해주세요.
• JavaScript를 디버깅할 때 사용하는 도구가 있으면 설명해주세요.
• 객체 안의 속성과 배열의 아이템을 순회할 때 사용하는 문법에 관해 설명해주세요.
• mutable object와 immutable object에 관해 설명해주세요.
  • JavaScript에서 immutable 객체의 예를 들어보세요.
  • immutability의 장/단점은 무엇인가요?
  • 자신의 코드에서 불변성(immutability를) 어떻게 달성할 수 있나요?
• 동기방식과 비동기 방식 함수의 차이에 관해서 설명해주세요.
• event loop이란 무엇인가요?
  • call stack과 task queue에 관해 설명해주세요.
• function foo() {}와 var foo = function() {}에서 foo 의 차이가 무엇인지 설명해보세요.
• let, var, const의 차이점에 관해서 설명해주세요.

 

---

this는 JavaScript에서 어떻게 작동하는지 설명해주세요.

this는 함수의 호출 방식에 따라 컴파일러가 자동으로 결정을 해 주는데요. 객체의 메소드일 경우에는 해당 객체가 this로 바인딩이 되고, 일반 함수 호출일 경우에는 window, global 등의 전역 객체로 바인딩이 됩니다.
new 키워드로 호출된 생성자 함수일 경우 함수 호출시에 새로운 객체가 생성되고 그 객체의 prototype을 생성자 함수의 prototype이 설정 되며 생성된 새로운 객체가 this로 바인딩 됩니다.

 

null과 unedefined 그리고 undeclared의 차이점은 무엇인가요?

null은 빈 객체를 뜻하며 undefined는 선언만 되고 할당되지 않음을 뜻합니다.
undeclared는 유효범위를 지정하지 않은 전역을 뜻합니다.

클로져(Closure)는 무엇이며, 어떻게/왜 사용하는지 설명해주세요.
클로저는 독립적인 변수를 가리키는 함수이다. 그리고 클로저 안에 정의된 함수는 만들어진 환경을 기억한다. 클로저를 통해 은닉화를 할 수 있으며, 콜백 함수 등을 사용할 때 발생할 수 있는 에러를 해결하는데도 유용하다.
- 사용 하는 이유
1) 현재 상태를 기억하고 변경된 최신 상태를 유지하기 위해
2) 전역 변수의 사용을 억제 하기위해
3) 정보를 은닉하기 위해

 

JavaScript의 작동방식의 장단점에 관해 설명해주세요.
- 자바스크립트는 V8 엔진을 사용하며, 싱글 쓰레드 기반이고 콜백 큐를 사용한다.
- 자바스크립트는 싱글 쓰레드 기반 언어이기 때문에 호출 스택이 하나이고 따라서 그 하나의 호출 스택에 실행된 코드가 하나씩 쌓이게 된다.
- 싱글 스레드이기 때문에 데드락 같은 문제나 복잡한 시나리오를 고민할 필요는 없으나, 호출 스택에 처리 시간이 어마어마하게 오래 걸리는 함수가 있다면 브라우저는 해당 함수가 실행되는 동안 아무것도 하지 못하고 가만히 있게 된다.

자바스크립트의 원시 타입(Primitive Data Type)은 몇가지이며, 전부 말해달라
5가지 : Number, String, Boolean, Null, Undefined, (Symbol)

자바스크립트의 Number Type은 다른 언어들과 차이점이 무엇인가, 왜 하나만 존재하는가
자바스크립트의 넘버타입은 굉장히 유연해서 엔진이 원할때마다 암시적 변환이 가능하다. 다양한 엔진이 존재하는 현 웹 개발환경 상 이러한 자바스크립트 타입의 유연성은 필수적인 요소라고 생각한다.

익명함수(anonymous functions)는 주로 어떤 상황에서 사용하나요?
익명함수는 즉시 실행이 필요한 상황에서 사용한다.

AJAX
AJAX는 비동기 자바스크립트 xml의 약자이다. 쉽게 말하면 클라이언트와 서버가 xml 데이터를 주고 받는 기술이다. 기존에는 클라이언트에서 서버로 요청을 보내고 응답을 받으면 다시 화면을 갱신해야 했고 이 과정에서 많은 리소스가 낭비되었다. 이 문제를 해결하기 위해 ajax는 페이지에서 필요한 일부만 갱신할 수 있도록 XMLHttpRequest 객체를 서버에 요청한다. 이로 인해 자원과 시간을 많이 아낄 수 있다.

호이스팅(Hoisting)
호이스팅은 인터프리터가 자바스크립트 코드를 해석함에 있어서, Global 영역 또는 함수 영역 안에 대해서 주어진 선언들을 모두 끌어올려서 해당 유효 범위 최상단에 선언하는 것을 의미한다.

Callback과 Promise의 차이점

Callback	Promise
비동기 처리를 구현하기 위해 만들어 졌다. 이 함수는 다른 함수에게 인자로 전달되어 어느 시점에 실행될 수 있도록 던져주는 함수이다. 하지만 콜백 지옥이라 불리는 중첩문이 발생하면서 에러처리 한계가 생기기 시작했고 이를 해결하기 위해 Promise가 나타났다.	어떤 값이 생성 되었을 때 그 값을 대신하는 대리자이다. 비동기 연산이 종료된 이후에 그 결과 값이나 에러를 처리할 수 있도록 처리기를 연결하는 역할을 하는 객체이 다. Promise 객체를 통해 성공, 실패, 오류에 따른 후속처리가 바로 가능해서 가독성도 좋고, 비동기 에러를 처리하기도 수월하다.

ES6 에서 추가된 스펙(let, const, rest parameter, class, arrow function 등)
- const를 기본으로 사용하고 변경이 될 수 있는 변수는 let을 사용한다.
- var은 이제 사용하지 않는다.
- startWith(), endWirh(), includes()등의 String 메서드가 추가되었다.
- set, weakset 으로 중복되는 값이 있는지 탐색이 가능하다.

let, var, const의 차이점에 관해서 설명해주세요.
let, const 중복이나 호이스팅을 선언하지 않는다. 블록 단위의 변수타입이다.

event loop란 무엇인가요?
자바스크립트 엔진이 Call Stack과 Callback Queue의 상태를 체크하여 Call Stack이 빈 상태가 되면, Callback Queue의 첫번째 콜백을 Call Stack으로 밀어 넣는다.

this는 JavaScript에서 어떻게 작동하는지 설명해주세요.
this는 자바스크립트 런타임 시에 바인딩이 이루어지는 실행 컨텍스트 중 하나로, 해당 함수가 실행되는 동안에 사용할 수 있으며 함수 호출 부분에서 this가 가리키는 것이 무엇인지를 확인할 수 있다. 때로는 복잡한 코드에서 암시적 바인딩에 의해 혼란스러운 경우가 많은데, 이런 문제를 해결하기 위해서 call이나 apply 같은 내장 유틸리티를 사용하여 명시적으로 바인딩을 해 준다.

prototype 기반 상속은 어떻게 하는지 설명해주세요.
자바스크립트 객체에는 Prototype이라는 내부 프로퍼티가 있고, 이는 다른 객체를 참조할 때 사용한다. 자바스크립트에서 상속을 진행할 때는 프로토타입끼리 연결을 하는데, 부모 프로토타입을 create()나 setPropertyOf() 메서드를 사용하여 자식 프로토타입과 연결한다.

 

async과 await의 차이점
- async/await은 비동기 코드를 동기식으로 표현하는 더 나은 방법으로 ES2017에 등장하였다.
- async와 await는 항상 같이 붙어 있어야 한다.
- await 모드는 Promise 객체를 받아 처리하고, 만약 비동기 함수가 아닌 동기적 함수라면 리턴 값을 그대로 받는다.
- async 함수는 Promise 객체를 통해 비동기적으로 처리된 내용을 동기적인 코드 진행 순서로 보여주는 역할을 한다.

Class는 무엇이고, Prototype, fucntion의 ES5 스펙만으로 Class를 구현할수 있는가
class는 빵틀이다. 반죽(객체)를 class에 넣으면 원하는 모양의 빵이 나오는 빵틀이라고 보면 된다.
프로토타입으로 클래스를 구현 가능하다. 생성자를 이용하여 클래스처럼 사용 할 수는 있지만 대부분의 경우 같은 호출을 반복한다던가의 불필요한 행동이 반복되어 효율적인 코드가 되지 못합니다. 그래서 프로토타입이라는 빈 객체에 미리 값들을 담아두고 새로 생성한 객체는 그 프로토타입의 값을 가져오는 방식을 갖춰서 클래스의 활용처럼 재사용성을 높일 수 있다.

use strict 은 무엇이고, 사용했을 때 장단점에 관해서 설명해주세요.
use strict는 엄격 모드로 전체 스크립트 또는 부분 함수에 적용이 가능하다.

장점	1. 기존에 무시되던 에러들이 throw 되며 2. JS 엔진 최적화 작업을 어렵게 만드는 실수들을 바로 잡고 3. ECMAScript의 차기 버전에서 정의될 문법들을 금지하는 특성을 가지고 있다.
단점	엄격 모드에서는 이전에 허용되던 실수를 오류로 바꾸어 놓는다. 또한 삭제할 수 없는 프로퍼티를 삭제하려고 하면 예외를 발생시킨다.

 

모듈 패턴과 전통적 상속, 각각의 장단점을 말해달라.

전통적 상속	모듈 패턴
(장) 모듈 패턴을 사용하지 않으면 해당 객체가 모두 전역에서 인스턴스화 되어 다른 코드와 충돌 가능성이 높아진다. (단) 객체 간의 연관성을 알기 어려워 코드관리가 어려우며 가용성이 떨어진다.	- 모듈 패턴은 전역 영역에서 특정 변수영역을 보호하기 위해 단일 객체 안의 public/private의 변수를 포함할 수 있는 각 클래스 형식의 개념을 구현하는데 사용된다. - 은닉화, 다형성, 상속을 통해 객체지향적으로 코드를 구성할 수 있다 - 추가적인 자바스크립트 객체가 다른 스크립트의 객체와 충돌하는 것을 줄여줄 수 있다.
const count = 3 const publicMethod = function () {     console.log('Public Method : ', count); } const publicMethod2 = function () {     console.log('Public Method2 : ', count); } publicMethod(); publicMethod2();	class Module {     private count: number = 3     private privateMethod() {         console.log('Private Method : ', this.count);     }     publicMethod() {         console.log('Public Method : ', this.count);     }     public publicMethod2() {         console.log('Public Method2 : ', this.count);     } } const mod = new Module(); // mod.privateMethod(); // coudn't access mod.publicMethod(); mod.publicMethod2();

Javascript Scope Chaining
실행 컨텍스트 내에서 변수를 탐색할 때 중복되는 변수가 있더라도 먼저 탐색된 변수를 우선적으로 실행시키는 방식이다.

이벤트 버블링(Event Bubbling), 이벤트 캡쳐링(Event Capturing)에 대해서 설명하세요.
- 이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 더 상위 요소들로 전달되어가는 특성을 의미한다.
- 이벤트 캡처링은 이벤트 버블링과 반대로 상위 요소에서 하위 요소로 탐색하며 이벤트를 전파하는 방식이다.

ES6에서 화살표 함수와 일반 함수의 차이
일반 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다. 반면에, 화살표 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정된다.

 

JSON과 장점
JSON은 경량화된 파일 형식이다.
(장) 자바스크립트에서 모든 객체는 연관배열(Key/Value)을 기초로 구성되어 있는데, JSON은 이러한 연관 배열을 표시하는데 매우 효과적인 방식이다. JSON은 텍스트 포멧이며 유니코드 인코딩이다. AJAX에서 JSON 방식을 사용하게 되면 eval() 메서드를 사용하지 않아도 키 값을 바로 불러올 수 있다.
(단) XML로도 데이터를 불러올 수 있지만, 데이터의 크기를 불필요하게 증가시킬 수 있으며, 파싱 시에 브라우저 호환성도 신경을 써 주어야 한다는 단점을 가지고 있다.

전역 scope의 장단점
자바스크립트에는 스코프 체인(scope chain)이라는 개념이 있는데, 내부 함수에서는 외부함수의 변수에 접근이 가능하지만 외부 함수에서는 내부 함수의 변수에 접근할 수 없다. 내부 함수에서는 변수를 먼저 해당 스코프에서 찾은 뒤, 만약 없으면 outer 스코프에서 찾고, 그렇게 타고 올라가다가 결국 전역 scope에서 찾는다. 따라서 전역 변수를 만들어서 작업하면 다른 개발자와 협업할 때 우연히 같은 변수 이름을 사용해서 이전의 변수를 덮어쓰는 불상사가 발생할 수도 있다. 굳이 전역 변수의 장점을 꼽자면 함수 내의 지역 변수와 달리, 저장된 값이 사라지지 않는다는 점이다.

function foo() {} 와 var foo = function() {} 에서 foo의 차이
전자는 함수 선언(function statement)이며 후자는 함수 표현(function literal)이다.
- 함수 선언은 코드 블럭 자체가 실행 가능 코드가 아니라는 것이다. 해당 코드 블럭을 콘솔에서 실행하여도 어떠한 결과가 리턴되지 않는다. Class와 동일한 개념으로 이해해도 된다.
- 함수 표현은 특정 변수에 할당되거나 즉시 실행가능한 코드 블럭으로서 존재하는 함수를 의미하는 것이다. 둘은 호이스팅 관점에서 차이가 있다. 선언식은 호이스팅 되지만 표현식은 호이스팅 되지 않는다.

함수형 프로그래밍에 대해 설명해 주세요.
함수형 프로그래밍은 계산을 수학적 함수의 조합으로 생각하는 방식을 말한다. 이것은 일반적인 프로그래밍 언어에서 함수가 특정 동작을 수행하는 역할을 담당하는 것과는 반대되는 개념으로, 함수를 수행해도 함수 외부의 값이 변경될 수 없다.
함수형 프로그래밍은 순수 함수(pure function)를 조합하고 공유 상태(shared state), 변경 가능한 데이터(mutable data) 및 부작용(side-effects)을 피하여 소프트웨어를 만드는 프로세스다. 함수형 프로그래밍은 명령형(imperative)이 아닌 선언형(declarative)이며 어플리케이션의 상태는 순수함수를 통해 전달된다.

Callback과 이것을 사용하는 이유
- 디자인 패턴 중 하나인 옵저버(Observer) 패턴에서 나온 개념으로써 객체의 상태 변화(이벤트)가 발생 하였을 경우에 이러한 사실을 함수를 통해 전달하게 되는데, 이를 콜백 함수라고 한다.
- 콜백 함수를 사용하는 이유는 서버로 어떠한 요청을 보낸다고 가정할 때 응답을 기다리는동안 가만히 시간을 버리는 것이 아닌, 다른 작업을 함으로써 동기적인 코드에 비해 성능을 향상시킬 수 있기 때문이다.

자바스크립트 메서드 .call()과 .apply(), .bind() 차이를 설명하시오.
this가 함수 호출식에 따라 객체를 가르켰다면 call apply bind는 함수가 직접 실행문맥을 결정한다. 그 중에 call, apply는 함수를 호출해 실행한다. call apply를 사용했을때의 장점은 첫번째 인자가 없더라도 에러없이 실행이 가능하다.(자동으로 전역객체를 지정하여 실행) bind는 지정한 객체의 함수를 만든다. 정리하면 call apply는 함수를 실행시켜주는 것이고,
bind는 새 함수를 만들어주는 것이다.

호스트 객체(Host Objects)와 네이티브 객체(Native Objects)의 차이점
- 호스트 객체는 브라우저 환경에서 제공하는 window, XMLHttpRequest, HTMLElement 등의 DOM 노드 객체와 같이 호스트 환경에 정의된 객체를 말한다. 예를 들어 브라우저에서 동작하는 환경과 브라우저 외부에서 동작하는 환경의 자바스크립트(Node.js)는 다른 호스트 객체를 사용할 수 있다. 브라우저에서 동작하는 환경의 호스트 객체는 전역 객체인
window, BOM(Browser Object Model)과 DOM(Document Object Model) 및 XMLHttpRequest 객체 등을 제공한다.
- 네이티브 객체는 ECMAScript 명세에 정의된 객체를 말하며, 어플리케이션 전역의 공통 기능을 제공한다. 네이티브 객체는 어플리케이션 환경과 관계없이 언제나 사용할 수 있다.
Object, String, Number, Function, Array, RegExp, Date, Math와 같은 객체 생성에 관계가 있는 함수 객체와 메소드로 구분된다.