Life and IT

JS에서는 객체를 상속하기 위하여 prototype이라는 방식을 사용한다. 이번 포스팅에서는 프로토타입 체인이 동작하는 방식을 알아보고, 이미 존재하는 생성자에 메소드를 추가하기 위해 프로토타입 속성을 사용하는 방법을 정리해보겠다. 또한 function의 타입이 Object가 아닌 function으로 나오는 이유도 알아보겠다. JS는 프로토타입 기반 언어이다. 모든 객체들은 프로토타입 객체를 가진다. 프로토타입 객체는 또 다시 상위 프로토타입 객체를 가질 수 있으며 이를 프로토타입 체인이라고 부른다. 프로토타입 체인은 다른 객체에 정의된 메소드와 속성을 한 객체에서 사용할 수 있도록 하는 근간이 된다. 정확히 말하자면 상속되는 속성과 메소드들은 객체의 생성자의 프로토타입이라는 속성에 정의되어 있다. 생성..

EventTarget.addEventListener() EventTarget의 addEventListener() 메소드는 지정한 이벤트가 대상에 전달될 때마다 호출할 함수를 설정한다. 여기서 지정한 이벤트란 'click', 'submit' 등등 매우 다양하다. Element, Document, Window 그리고 생소한 XMLHttpRequest와 같이 이벤트를 지원하는 모든 객체를 대상으로 지정할 수 있다. addEventListener()는 EventTarget의 주어진 이벤트 유형에, EventListener를 구현한 함수 또는 객체를 이벤트 처리기 목록에 추가해 작동한다. target.addEventListener(type, listener[, options]); target.addEventLis..

노드(node) HTML DOM은 노드라고 불리는 계층적 단위에 정보를 저장하고 있다. HTML DOM은 이러한 노드들을 정의하고, 그들 사이의 관계를 설명해주는 역할을 한다. 이러한 노드 트리는 노드들의 집합이며, 노드 간의 관계를 보여준다. 노트 트리는 최상위 레벨인 루트 노드(root node)부터, 가장 낮은 레벨인 텍스트 노드(text node)까지 뻗어 내려간다. 자바스크립트에서는 HTML DOM을 이용하여 노드 트리에 포함된 모든 노드에 접근할 수 있다. 노드의 종류 W3C HTML DOM 표준에 따르면, HTML 문서의 모든 것은 노드이다. HTML 문서를 구성하는 대표적인 노드의 종류는 다음과 같다. 노드 설명 document node HTML 문서 전체를 나타내는 노드 element n..

요소를 안 보이게 하고 싶은 순간이 있다. 3가지 방법이 있는데, 디스플레이에 출력 자체를 안 할 수도 있고 공간은 차지하면서 보이지 않게 할 수도 있다. 아래의 표에 정리해보았다. 속성 공간 차지 클릭 가능 여부 opacity: 0 O O visibility: hidden O X display: none X X 본인의 의도에 맞게 위 세 가지 속성을 사용해보자!

JS는 싱글 스레드이다. 자바스크립트는 싱글 스레드 언어이다. Call Stack이 하나이기 때문인데, 전역 Main 함수를 포함하여 함수의 실행을 하나의 스레드가 순회하면서 실행한다. 하지만 모든 연산을 하나의 스레드에서 처리하는 방식만이 존재한다면 자바스크립트는 지금까지 살아남지 못했을 것이다. JS의 비동기 프로그래밍 특징 이러한 단점을 극복하기 위해 비동기 프로그래밍을 사용한다. 비동기적 코드의 반대말은 동기적 코드이다. 동기적 코드는 작업이 끝나야 다음 작업을 진행한다. 비동기적 코드는 현재 실행 중인 코드의 완료 여부와 상관없이 바로 다음 코드로 넘어간다. CPU의 계산으로 즉시 처리가 가능한 코드는 동기적인 코드이다. 하지만 사용자의 요청에 의해 특정 시간이 경과되기 전까지 어떤 함수의 실행..

https://dev.to/sag1v/javascript-the-this-key-word-in-depth-4pkm JavaScript - The "this" key word in depth Follow these 6 rules to determine what “this” is bound to dev.to The challenge this 키워드에 대한 MDN의 정의는 다음과 같다. 대부분의 경우, this 키워드는 함수가 어떻게 호출되는지(runtime binding; 실시간 바인딩)에 따라 결정된다. 그것은 실행 중에 인자에 의해 설정될 수는 없으며, 함수가 호출될 때마다 값이 달라질 수 있다. MDN의 정의대로 this는 런타임에서 결정된다. 런타임 정의> 런타임이란 컴파일 과정을 마친 프로그램이 사..

https://dev.to/liaowow/take-this-quiz-understand-how-this-works-in-javascript-44dj Take 'this' Quiz, Understand How 'this' Works in JavaScript Among all the abstract ideas JavaScript has to offer, the 'this' keyword can be one of the most chall... dev.to Challenge #1 const call = { caller: "mom", says: function() { console.log(`Hey, ${this.caller} just called.`); } }; call.says(); What will the ..

https://dmitripavlutin.com/javascript-this-interview-questions/#question-1-variable-vs-property 7 Interview Questions on "this" keyword in JavaScript. Can You Answer Them? 7 interview questions to challenge your knowledge on "this" keyword in JavaScript. dmitripavlutin.com Question 4: Artificial method How can you call logMessage function so that it logs "Hello, World!"? const object = { message..

https://dmitripavlutin.com/javascript-this-interview-questions/#question-1-variable-vs-property 7 Interview Questions on "this" keyword in JavaScript. Can You Answer Them? 7 interview questions to challenge your knowledge on "this" keyword in JavaScript. dmitripavlutin.com 위 사이트에서 정확한 this의 객체를 파악하는 능력을 기르기 위한 7가지 퀴즈가 있어 풀이해보려 한다. 아직 this를 찾는 일이 쉽지 않아 이렇게 문제를 보면 풀어보면서 꾸준히 연습해야겠다. Question 1: Var..

클로저는 아래의 글에서 간략하게 설명했었던 개념이다. 이번 글에서는 클로저에 대해 자세히 알아보고 모르는 개념들을 함께 정리해보려고 한다. https://lifeandit.tistory.com/60 고차 함수 그리고 중첩 함수 고차 함수(Higher Order Function; HOF) 고차 함수는 함수를 인자(argument)로 받거나 함수를 리턴하는 함수이다. 다른 함수(caller)의 인자로 전달되는 함수를 콜백 함수(callback function)라고 한다. 콜백 함수.. lifeandit.tistory.com 실행 컨텍스트는 동작 원리를 담고 있는 개념으로, 자바스크립트 엔진에서는 물리적 객체의 형태로 관리(나열 구조) 클로저(closure)의 개념 클로저는 자바스크립트 고유의 개념은 아니지만..