개발자 Saaad

Closure 란?다른 함수 내부에 정의된 함수(InnerFunction)가 있는 경우 외부 함수(OuterFunction)가 실행을 완료하고해당 변수가 해당 함수 외부에서 더 이상 액세스 할수 없는경우에도 해당 내부 함수는 외부 함수의 변수 및 범위에액세스 할 수 있습니다.설명1. newFunction을 선언하고 outerFunction('outside'); 를 할당합니다  이 과정에서 newFunction 은 innerFunction()을 리턴 받았습니다.2. newFunction('insdie'); 를 통해 innerFunction('inside); 를 호출한 것이나 마찬가지입니다. 그런데 외부 함수에 매개변수로 받은 'outside' 를 내부함수에서 여전히 기억하고 있다가 console.log()..

Event Loop위 함수를 실행하면 결과는 어떤 순서로 출력될 것 같은가요?setTimeout() 은 인자로 지정된 3초만큼 기다렸다가 콘솔에 2를 찍어주도록 정의가 되어있습니다. 코드 순서대로 보면 콘솔에 '1'이 찍히고,3초를 기다렸다가 '2'가 찍힌 뒤 '3'이 바로 출력될 것 같은데요.하지만 자바스크립트에서는 이런식으로 처리하지 않습니다!  코드를 살펴보면 console.log() 부분은 동기, setTimeout()은 비동기라고합니다.동기, 비동기가 무슨 말일까요 ?  위 사진을 살펴보면 동기는 시간의 순서에 맞게 차례대로 진행해야하는 한편,비동기는 취직을 예시로 들었을 때 취업을 하기위해서 반드시 토익->자격증>영어 > 취업 순서가 아니잖아요.운이 좋아 취업을 먼저하고 토익공부를 할수도 있는..

call() call 메서드는 함수를 호출하는 함수이며,첫번째 매개변수로 어떠한 것을 전달해주면 호출되는 함수의 this 안에window 객체가 아닌 전달받은 것을 받게 됩니다. 아래처럼 추가로 매개변수를 받아 사용할 수도 있습니다.apply()apply() 메서드 또한 함수를 호출할 수 있으며,첫번째 매개변수로 어떠한 것을 전달해주면 호출되는 함수의 this 안에window 객체가 아닌 전달받은 것을 받게 된다는 점은 동일하지만,뒤에 배열을 인자로 받는다는 점이 다릅니다. bind()bind() 메서드는 정의된 메서드를 다른 변수에바인딩을 하여 this 의 객체를 떠넘깁니다. 다른 점은 func.bind() 만 한다고 쓸 수 있는게 아니라,새로운 변수에 지정을 하고 매개변수를 넣어 사용해야 한다는 점입..

1. 메소드에서 this 사용 => 해당 객체를 가리킨다(참조한다) play() 는 audio 객체 안에서 선언되었고, stop() 은 audio 객체 밖에서 선언되었으나 결국 똑같은 말이기 때문에똑같이 객체 자체가 출력된다. 2. 함수에서 this 사용 => window 객체를 가리킨다.playAudio() 함수에서 this를 사용하면 window 객체를 가리키는 것을 알 수 있다. 3. constructor 함수에서 this 사용 => 빈 객체를 가리킨다.호출단에서 부터 살펴보면 const audio = new Audio('a'); 에서 a를 인자로 주어 새로 객체를 생성했기 때문에this.title = a; 값이 할당 되고, console.log() 에 의해서 객체의 title = 'a'; 이기 때..

Event Delegation캡처링과 버블링을 활용하면 강력한 이벤트 핸들링 패턴인 이벤트 위임(event delegation) 을 구현 할 수 있습니다.이벤트 위임은 비슷한 방식으로 여러 요소를 다뤄야 할 때 사용됩니다.이벤트 위임을 사용하면 요소마다 핸들러를 할당하지 않고, 요소의 공통 조상에 이벤트 핸들러를 단 하나만 할당해도 여러 요소를 한꺼번에 다룰 수 있습니다.즉, 이벤트 위임은 '하위 요소의 이벤트를 상위 요소에 위임하는 것' 입니다. 즉, 하위 요소의 이벤트를 상위에서 제어합니다. 예제로 살펴보기다음은 고대 중국 철학에서 유래한 팔괘도(Ba-Gua diagram) 입니다. HTML은 대략 다음과 같습니다. Bagua Chart: Direction, Element, Color, Me..

시작하기 앞서 해당 사이트를 참고하여 글을 작성하였습니다.https://ko.javascript.info/bubbling-and-capturing#ref-117 버블링과 캡처링 ko.javascript.info 이벤트 캡처링(Event Capturing)이벤트 버블링 이외에도 캡처링(Capturing) 이라는 흐름이 존재합니다. 실제 코드에서 자주 쓰이진 않지만, 종종 유용한 경우가 있으므로 알아봅시다.표준 DOM 이벤트에서 정의한 이벤트 흐름엔 3가지 단계가 있습니다. 캡처링 단계 - 이벤트가 하위 요소로 전파되는 단계타깃 단계 - 이벤트가 실제 타깃 요소에 전달되는 단계버블링 단계 - 이벤트가 상위 요소로 전파되는 단계 태그를 클릭하면 이벤트가 최상위 조상에서 시작해 아래로 전파(캡처링) 되고,이벤트..

Event Bubbling이벤트 버블링이란 아래 그림에서처럼 가장 깊게 중첩 된 요소(3)에 이벤트가 발생했을 때이벤트가 위로 (bubble up) 전달되는 것을 의미합니다.그래서 3번 요소, 2번 요소, 1번 요소에 그 이벤트에 대한 핸들러가 있다면 3번 요소의 핸들러가실행되고 2번,1번 순서로 실행됩니다.  Bubbling 예제버블링의 원리는 간단합니다. 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다. 가장 최상단의 조상 요소를 만날때까지 이 과정이 반복되면서 핸들러가 동작합니다. 3개의 요소가 FORM > DIV > P 형태로 중첩된 구조를 살펴봅시다. 요소 각각에 핸들러가 할당되어 있습니다FORM DIV P 가장 안쪽의 를 클..

Event Listener우리는 마우스를 이용한 클릭 "이벤트" 와 같은 상황에서 취할 액션을 지정해줘야 합니다.그 함수가 바로 Event Listener입니다.  addEventListener()어떠한 이벤트가 발생했을 때 이벤트 리스너를 호출하기 위해서는 이벤트 리스너를 해당 객체나 요소에 등록해주어야합니다. 등록방법을 살펴보겠습니다 1. 자바스크립트 코드에서 프로퍼티로 등록- window.onload 를 이용해 문서가 로드 되었을 때 실행되게 할 수 있습니다. 2. HTML 태그에 속성으로 등록- 클릭했을 때 alert() 가 동작되는 형식입니다. 3. addEventListener() 메소드 사용element.addEventListener(이벤트명, 실행할 함수명(listener), 옵션);- a..