분류 전체보기

이벤트 캡처링 (Event Capturing) 이란?

이벤트 캡처링이란? 이벤트 버블링 전에 일어나는 단계이다. 이벤트 캡처링 개념을 알기 위해서 이벤트 버블링부터 공부하는 것이 좋다. 캡처링 -> 타겟 -> 버블링 순으로 이벤트가 흘러간다. 엘리먼트에 캡처링 이벤트를 등록하는 방법 element.addEventListener("click", () => {}, true); 위와 같이 코딩하면, 캡처링 이벤트를 등록할 수 있다. 캡처링, 버블링 결과 예측해보기 HELLO 위의 코드를 실행하면, 순서대로 어떤 것이 로그에 찍히는지 예상할 수 있으면, 캡처링과 버블링을 명확히 이해한 것이다. 헷갈린다면 버블링은 바닥에서부터 거품이 뽀글뽀글 올라오는 이미지라고 생각해보자. 정답은 아래의 순서로 로깅된다. capturing div capturing span bubb..

event.target 과 event.currentTarget 의 차이

event.target 과 event.currentTarget event.target 과 event.currentTarget 은 비슷한 이름을 가졌지만, 다른 결과를 낸다. event.target HELLO div 의 onclick 은 event.target 을 띄운다. 자식 엘리먼트인 span 을 클릭하면, alert 에 표출되는 내용은 [object HTMLSpanElement] 이다. 즉 span 을 클릭하면, div 에 이벤트를 걸어도 event.target 은 span 이다. div 만 정확하게 클릭하면 출력 내용은 [object HTMLDivElement] 이다. event.target 은 내가 실제로 클릭한 요소를 나타낸다. event.currentTarget HELLO event.curre..

이벤트 버블링 (Event Bubbling) 이란?

이벤트 버블링이란? 간단하게 설명하면, 이벤트가 자식에서 부모로 올라가는 현상을 말한다. hello 위와 같은 내용의 html 태그가 존재할 때, span 을 클릭하면 div 의 onclick 이벤트까지 같이 호출되는 현상을 말한다. 사실 이 현상은 document 객체를 만날 때까지 올라간다. 정리하자면, 자식 엘리먼트의 이벤트가 호출된 이후에 자동으로 부모 엘리먼트의 이벤트도 호출된다. 마치 물 아래서 기포가 올라가는 모양과 같다고 하여 버블링이라고 한다. 버블링 되는 이벤트의 종류 거의 모든 이벤트이다. 몇가지 예외로 focus 와 같은 이벤트는 버블링되지 않는다. 버블링을 중단하는 방법 (event.stopPropagation()) HELLO 이렇게 자식 엘리먼트에서 event.stopPropag..

싱글톤 패턴 (Singleton Pattern) 이란?

싱글톤 패턴이란? 클래스의 인스턴스를 오직 하나만 두고 사용하는 패턴이다. 1개 외에 추가적인 인스턴스 생성을 의도적으로 막아야 한다. 용례 애플리케이션의 구성(configuration) 정보와 같이 런타임 내에 공유되어야 하는 정적인 정보를 가지고 있는 클래스의 인스턴스를 만들 때 이 패턴을 사용할 수 있다. 생성 비용이 큰 인스턴스가 있을 때, 이 인스턴스를 한번 만들고 계속 재활용이 가능하다면 이 인스턴스를 싱글톤으로 공유하는 것을 생각해볼 수 있다. 자바에서의 나이브한 싱글톤 구현 public class SingletonClass { private static instance; private SingletonClass() { // 생성자를 private 으로 만들면, 외부에서 생성자 호출이 불가능..

자바스크립트의 TDZ (Temporal Dead Zone) 에 대해서 간단히 설명해주실 수 있나요?

Temporal Dead Zone (TDZ) 란? Temporal Dead Zone 은 줄여서 TDZ 라고 부르며 한국어로 해석하면 시간상 사각지대 정도로 해석할 수 있습니다. let 과 const 로 선언된 변수는 var 와 같이 호이스팅을 거치지만, 초기화 전까지는 TDZ 에 들어간 변수입니다. TDZ 에 들어가 있는 변수를 사용하는 경우, Reference Error 를 만나게 됩니다. console.log(a); // 레퍼런스 에러! TDZ 에 들어간 변수입니다. let a = 10; typeof 와 TDZ console.log(typeof a); // 레퍼런스 에러! let a = 10; typeof 연산자를 사용해도 마찬가지로 Reference Error 를 만나게 됩니다. 어휘적 스코프와 결..

switch 문에서 에러 없이 let 으로 변수를 재선언해보세요.

switch 문에서 에러를 내지 않고 변수를 재선언해보세요. let x = 1; switch (x) { case 0: let name; break; case 1: let name; // SyntaxError for redeclaration. break; } 위의 코드는 에러가 발생합니다. 왜일까요? let 키워드가 블록 스코프를 갖는데, 같은 블록 내에 중복된 이름의 식별자가 존재하기 때문입니다. 각 let name 이 존재하는 곳을 블록으로 나눠주면, 에러가 사라집니다. 이는 ES6(ES2015) 에서 추가된 문법입니다. let x = 1; switch (x) { case 0: { let name; break; } case 1: { let name; break; } }

let 키워드를 var 와 비교하여 설명해보세요

let 키워드와 var 키워드 let 은 변수를 선언할 때 사용합니다. 블록 스코프를 가집니다. 호이스팅이 됩니다. 단, 초기화 전까지는 Temporal Dead Zone 에 속합니다. var 도 변수를 선언할 때 사용합니다. 함수 스코프를 가집니다. 호이스팅이 됩니다. 초기화 전에도 참조가 가능하지만, undefined 라는 값을 가지고 있습니다. 함수 스코프의 특징 function foo() { for (var a = 0; a < 10; a++) { console.log(a); } console.log(`outside: ${a}`); } var 로 for 문을 작성하고 외부에서 a 를 참조해도 참조가 가능합니다. 이는 함수 스코프라는 특성 때문입니다. 블록에 갇혀있더라도 함수 내에서는 변수를 계속 참..

pure function (순수 함수) 란 무엇인가요?

순수함수란? 아래의 조건을 만족하는 함수입니다. 사이드 이펙트가 없어야 합니다. 몇번을 호출해도 반환 값이 동일해야 합니다. 전역변수를 건들거나, DOM 을 편집하거나, console.log 처럼 로그를 찍거나, new Date() 와 같이 시간에 의존해서도 안됩니다. 현대 프로그래밍에서 불변성(immutability)이 주목받으며 함께 부각된 개념 중 하나입니다. 순수함수의 장점은? 유닛테스트에 용이합니다. 외부 환경에 의존하지 않기 때문에 코드를 테스트하기 굉장히 쉬워집니다. 신뢰할 수 있습니다. 실행 시점이나 실행 컨텍스트에 따라서 결과가 변경되지 않기 때문에 신뢰할 수 있습니다. SRP(Single Responsibility Principal) 를 지키기 쉽습니다. 함수를 순수하게 구성하다보면, ..

Currying function (커링 함수) 이란 무엇인가요?

Currying function 이란? 수학자 Haskell Curry 의 이름을 딴 함수입니다. 여러 개의 인자를 받는 함수를 단 하나의 인자만 받는 함수(unary) 로 만드는 과정을 커링(Currying) 이라고 합니다. 커링을 적용하려면, 여러 인자를 받는 함수(n-ary) 를 하나의 인자만 받는 함수 (unary) 로 변환해야 합니다. 커링 기본 개념 예제 const multiArgFunction = (a, b, c) => a + b + c; console.log(multiArgFunction(1, 2, 3)); // 6 const curryUnaryFunction = (a) => (b) => (c) => a + b + c; curryUnaryFunction(1); // returns a fun..

unary function 이란 무엇인가요?

unary function 이란? 인자를 단 하나만 받는 함수를 말한다. const unaryFunction = (a) => a + 10;

웹 개발자를 위한 자바스크립트의 모든 것 6장 이터러블, 이터레이터, 제너레이터

이터레이터(iterator) 란? next() 메서드가 있는 객체이다. next() 를 호출할 때마다 시퀀스의 다음 값과 완료 여부를 나타내는 플래그를 반환한다. 이터러블(ietrable) 이란? 이터레이터를 가져오는 표준 메서드가 있는 객체이다. Symbol.iterator 프로퍼티에서 iterator 를 반환하는 메서드를 구현하면 된다. 프로퍼티로 얻어오는 것이 아니라, 메서드로 얻어오는 이유는 매번 가장 첫번째 원소를 가리키는 iterator 를 반환하고 싶기 때문일 것이라 추측한다. 이터레이터 명시적으로 사용해보기 const a = ["a", "b", "c"]; const it = a[Symbol.iterator](); console.log("it", it); // Object [Array Ite..

Higher Order Function (고차함수) 란 무엇인가요?

Higher Order Function (HOF) 란 무엇인가요? 한국어로는 '고차함수' 라고 표현하며, 아래의 두가지 조건 중 하나라도 만족하면 고차함수라고 할 수 있습니다. 함수를 파라미터로 받는다. 함수를 반환한다. 고차함수를 사용하는 이유는 무엇인가요? 고차함수는 함수형 프로그래밍에 뿌리를 두고 있습니다. 함수형으로 코드를 작성하는데 필수적입니다. 함수형 프로그래밍에서는 사이드이펙트를 피하고 불변성을 지켜 에러를 최소화합니다. 그렇다면 함수형 프로그래밍의 장점은 무엇인가요? 보통 하나의 함수가 다른 함수에 의존하지 않아 코드를 변화시킬 때 사이드 이펙트에 대한 걱정이 덜합니다. 외부 요소에 의존하지 않아, 작성한 함수가 매번 같은 동작을 보장받습니다. 상태가 없다는 것은 동시성 프로그래밍에서 생기..