For job interview, about Javascript 면접 공부하기-자바스크립트 2

1. 이벤트 흐름

1. Event bubbling 이벤트 버블링

• 이벤트 발생 시 해당 요소를 포함하고 있는 부모 요소를 통하여 최상위 객체(document)를 만날 때까지 거슬러 올라가면서 이벤트가 발생하는 과정이다.
• IE9, Chrome, Safari는 ‘window’ 객체까지 올라간다.
• 예제

<form onclick="alert('form')">This is FORM
  <div onclick="alert('div')">This is DIV
    <p onclick="alert('p')">This is P</p>
  </div>
</form>

-> 만약 p 태그를 클릭하면, p 의 클릭 이벤트가 먼저 발생하고, 그 다음에 div 의 클릭 이벤트가 발생하고 그 다음에 form 의 클릭 이벤트가 발생한다.

* 최초 이벤트 발생의 위치는 event.target이며, 실제로 이벤트가 실행되는 요소는 event.currentTarget (= this)을 통해 알 수 있다.
* 버블링을 막고 싶으면 희망하는 위치에 onclick="event.stopProgagation()"을 적용한다.

2. Event capturing 이벤트 캡쳐링

최상위 객체(window 또는 document)부터 이벤트가 발생한 요소까지 내려오며 이벤트가 발생하는 과정이다. 잘 사용되지는 않으나 가끔 유용할 때가 있다.

3. Event Delegation 이벤트 위임

• 하위 요소에 각각 이벤트를 붙이지 않고 상위 요소에서 하위 요소의 이벤트를 제어하는 방식이다.
• 예. 상위 요소 ul 태그에 이벤트를 위임하면, ul 태그 하위에 어떠한 태그와 이벤트를 추가해도 ul 태그에서 이벤트를 감지하고 처리한다.

2. Attribute 와 Property의 차이

• attribute는 HTML에 적혀 있는 속성이다. (정적인 속성)
  • e.g. a 태그의 href는 attribute이다.
• property는 DOM 객체에 적혀 있는 속성이다. (동적인 속성)

3. Design Patterns 디자인 패턴

1. Module : 특정 구성요소를 다른 구성요소와 독립적으로 유지하는데 가장 널리 사용되는 디자인 패턴으로, Java의 클래스와 같은 개념이다.
2. Prototype
3. Singleton : 특정 클래스의 인스턴스를 하나만 생성하고 이것을 어디에서든지 참조할 수 있도록 하는 디자인 패턴으로, 자원 낭비를 막기 위해 객체의 인스턴스를 하나만 만들어야 하는 경우에 사용한다.

4. Promise 프로미스

• 생산 코드 producing code 와 소비 코드 consuming code를 연결하는 자바스크립트 객체
  • producing code : 어떤 동작을 하고 시간이 걸리는 코드 (= the executor)
  • consuming code : producing code의 결과를 기다리는 코드
• Statae 상태
  • pending 대기 : 초기 상태
  • fulfilled 이행/완료 : 성공적인 처리를 나타내는 상태 (resolve)
  • rejected 실패 : 실패한 처리를 나타내는 상태 (reject)
• Then, Catch, Finally
  • then : 프로미스가 성공 또는 실패(에러)되었을 때 결과를 받아와 실행한다.
  • catch : 프로미스가 실패(에러)되었을 때 실행한다.
  • finally : 매개변수가 없으며, 성공/실패 여부와 관계없이 프로미스 결과가 나오면 실행한다. 결과 값을 다음 핸들러에게 전달한다.

@ 콜백 callback 과 차이

콜백은 어떤 함수가 실행을 마쳤을 때 바로 실행되는 함수를 말한다. 만약 비동기로처리해야 하는 과정이 많을 경우 콜백 안에 콜백을 무는 형식이 되는 콜백 지옥이 발생할 수 있다. 이러한 문제를 해결하기 위해 프로미스가 등장하였다.

5. Hoisting 호이스팅

• Definition 정의 : Javascript에서 선언부분을 현재 스코프의 최상위로 올리는 것을 말한다. 즉, 변수의 사용 및 함수의 실행 코드가 선언보다 먼저 일어나도 정상 진행이 되도록 해주는 것이다.
• Example 예제 ```javascript

``` 다른 언어에서는 컴파일 단계에서 에러가 발생하지만, Javascript는 호이스팅되기 때문에 var x;라는 선언문이 최상위로 올라가 화면에 ‘5’를 정상적으로 출력한다.

※ 출처 : https://javascript.info/bubbling-and-capturing, https://medium.com/hexlant/attribute-%EC%99%80-property-%EC%9D%98-%EC%B0%A8%EC%9D%B4-c6f1c91ba91, https://javascript.info/promise-basics, https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/, https://www.w3schools.com/js/js_hoisting.asp