hoist는 건축/건설이나 화물 운반에 사용되는 장비로 화물 등을 들어올리는 업무를 수행한다. 즉, 아래에 위치한 것을 위로 끌어올리는 역할을 하는 장비인데, 이 단어 자체로도 "들어올리다" 라는 의미를 가지고 있다. javascript 에서의 호이스팅은 코드에 선언된 변수 및 함수를 코드 상단으로 끌어올리는 것을 말하며 이때 주의해야할 점은 변수의 선언과 할당내용을 모두 상단으로 끌어올리는 게 아니라, 선언부분만 분리하여 최상위로 끌어올리는 것이다. (선언된 변수에 값을 할당하는 부분은 끌어올리지 않음) 예를 들어보자. test(); function test(){ console.log(name); var name = "kim"; console.log(name); } 위 코드의 결과는 어떻게 될까? 정답..
ES6 화살표 함수방식은 작성에도 편리하고 보기에도 간결하기 때문에 자주 쓰이는 함수 표현법이다. 하지만 사람이 쓰고 읽기에 좋다는 이유만으로 남용하게 된다면 의도치 않은 실수를 범할 수 있다. 그 이유는 기존 function 키워드와는 달리 화살표 함수는 this, prototype, arguments 정보를 생성하지 않는다는 점이다. 1. this 일반 함수와 달리, 화살표 함수는 자신이 호출되면서 생성된 실행 context에서 thisBinding 정보를 생성하지 않는다. 쉽게말해서 호출이 되더라도 '누가' 자신을 호출하는지에 대한 정보를 생성하지 않는다. 그렇기 때문에 화살표 함수 내에서 this가 참조된다면 화살표 함수가 선언되어 있는 스코프상의 this를 참조한다. 해당 스코프에 this가 없..
leetcode.com/problems/reverse-integer/ Reverse Integer - LeetCode Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview. leetcode.com 핵심아이디어 알고리즘이 어떻냐 보다는 해당 언어에 대한 이해가 필요한 문제였다. 숫자를 뒤집고 4byte범위를 벗어나면 0을 반환하는 문제였다. -2^31 ~ 2^31-1 범위를 표현하기 위해 -2**31, 2**31-1 를 사용했으나 -2**31는 표현방법에 맞지 않음을 깨달았다. /** * @param {numb..
JSON (Javascript Object Notation) - 데이터를 저장하거나 전송할때 많이 사용되는 경량의 Data 교환 방식 - Javascript에서 객체를 만들 때 사용하는 표현식을 의미한다. - JSON 표현식은 사람과 기계 모두 이해하기 쉽고 용량이 작아서 최근에는 XML를 대체하여 사용되고 있다. - JSON는 data format일 뿐이고, 어떠한 통신 방법도, 프로그래밍 문법도아니다. JSON 특징 - 서버와 클라이언트 간의 교류에서 일반적으로 많이 사용된다. - 자바스크립트 객체 표기법과 아주 유사하다. - 자바스크립트를 이용하여 JSON형식의 문서를 쉽게 자바스크립트 객체로 변환할 수 있다. (JSON.parse, JSON.stringift) - JSON 문서 형식은 자바스크립트..
- Ajax (Asynchronous Javascript and XML) : 비동기 웹 응용 프로그램을 만들기 위해 클라이언트 측에서 사용되는 웹 개발 기술의 집합 Ajax를 사용하면 웹 어플리케이션은 기존 페이지의 화면 및 동작을 방해하지 않으면서, 백그라운드에서 비동기적으로 서버로 데이터를 보내고 서버에서 데이터를 받아올 수 있다. Ajax는 프리젠테이션 레이어에서 데이터 교환 레이어를 분리함으로써 웹페이지, 확장 웹 어플리케이션이 전체 페이지를 다시 로드 할 필요 없이 동적으로 컨텐츠를 변경할 수 있도록 한다. 최근에는 네이티브 Javascript의 장점때문에 XML대신 JSON을 사용한다. (예전에는 XMLHttpRequest가 사용되었으나, 최근에는 fetch API가 자주 사용됨) 즉, Aja..
.call, .apply 모두 함수를 호출하는데 사용되며, 공통적으로 첫번째 인자는 함수 내에서 this값으로 사용된다. (사용할일없으면 null) 그러나 .call은 쉼표로 구분된 인수를 2번째 인자로 추고, .apply는 배열을 2번째 인자로 준다는 차이점이 있다. function add(a, b) { return a + b; } console.log(add.call(null, 1, 2)); // 3 console.log(add.apply(null, [1, 2])); // 3
ko.javascript.info/bubbling-and-capturing 버블링과 캡처링 ko.javascript.info 표준 DOM 이벤트에서 정의한 이벤트 흐름에는 3가지 단계가 있다. 1. 캡처링 단계 : 이번트가 하위 요소로 전파되는 단계 2 타깃 단계 : 이벤트가 실제 타깃 요소에 전달되는 단계 3 버블링 단계 : 이벤트가 상위 요소로 전파되는 단계 보통의 경우에 addEventListener나 on 속성을 사용할 때에는 2,3 단계에서만 동작하므로 캡처링 단계는 알 수가 없다. 캡처링 단계에서 이벤트를 잡아내려면 addEventListener에 capture옵션을 true로 주어야한다. elem.addEventListener(..., {capture: true}) 즉, addEventLis..
ko.javascript.info/bubbling-and-capturing 버블링과 캡처링 ko.javascript.info 아래 핸들러는 div에 할당되어 있지만, em, code 같은 중첩 태그를 클릭해도 동작한다. Hi 왜 em을 클릭했는데, div에 할당된 핸들러가 동작하는 것일까? - 버블링 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작한다. 가장 최상단의 조상요소를 만날 때 까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작한다. 예를 들어 다음과 같은 경우 FORM DIV P 가장 안쪽의 p를 클릭하면, 다음과 같은 동작이 수행된다. 1. p에 할당된 onClick 핸들러가 동작한다. 2. div에 할당된 핸들러가 동작한다. 3..
