JavaScript

ES6 란? > ECMA라는 국제 기구에서 만든 표준문서인 ECMAScript(=ES)의 6번째 개정판 문서에 있는 표준 스펙 한줄로 설명하자면, 위와 같이 설명할 수 있다. 여기서 ECMA는 정보 통신에 대한 표준을 제정하는 비영리 표준화 기구이고, ECMAScr

구조화된 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식배열의 각 요소를 배열로부터 추출하여 변수리스트에 할당한다.왼쪽의 변수리스트는 오른쪽 배열의 인덱스를 기준으로 할당된다.사용법예시객체의 각 속성을 비구조화하여 변수에 할

Arrow Function > function 이라는 키워드 없이 =>(fat arrow)를 이용해 함수를 생성하는 ES6 문법 사용 예 선언 매개변수 지정 함수 몸체 지정 호출 화살표 함수는 익명함수로만 사용할 수 있으므로 함수 표현식을 사용하여 호출한다. 콜

개요 싱글스레드인 자바스크립트에서 비동기 처리를 위해서는 콜백을 사용해왔다. 어떤 작업을 요청하면서 콜백함수를 등록 하면, 작업이 수행된 뒤 결과를 콜백함수를 통해 알려주는 식이다. 이런 방식은 비동기 처리를 순차적으로 실행할 필요가 있는 경우에 비동기 처리를 중첩시켜

코드를 실행하기 전 변수와 함수 선언이 파일의 맨 위로 끌어 올려진 것과 같은 현상JS 엔진은 코드를 실행하기 전, 실행 가능한 코드를 형상화하고 구분하는 과정(실행 컨텍스트를 위한 과정)을 거치는데 이 과정에서 변수와 함수 선언을 메모리에 저장한다. 따라서 코드를 실

1.var > 자바스크립트 ES5버전 까지의 변수 선언 방식이었다. var 키워드는 생략 가능하다. 재선언과 재할당이 모두 가능하다. 함수레벨 스코프(function level scope) 이다. 자바스크립트는 기본적으로 함수 레벨 스코프를 가진다. 함수 레벨 스

바닐라 자바스크립트 공부를 하던 중 이와 비슷한 코드를 작성할 일이 있었다.처음에 updateHandler를 화살표 함수로 작성했다가, this가 전역객체를 가리키는 바람에 에러가 나서 수정을 했다.그런데 생각해보니 일반함수를 함수로 실행하면 this가 전역객체를 가리

실행 컨텍스트 > 실행 가능한 코드가 실행되기 위해 필요한 환경 실행 가능한 코드 전역 코드 : 전역 영역에 존재하는 코드 Eval 코드 : eval 함수로 실행되는 코드 함수 코드 : 함수 내에 존재하는 코드 (일반적으로 실행 가능한 코드는 전역 코드와 함수 코드

변수를 찾아내기 위한 규칙, 변수에 접근할 수 있는 범위변수는 전역 또는 코드 블록(if, for, while, try/catch 등)이나 함수 내에 선언하며 코드 블록이나 함수는 중첩될 수 있다.식별자는 자신이 어디에서 선언됐는지에 의해 다른 코드가 자신을 참조할 수

함수와 그 함수가 선언됐을 때의 렉시컬 환경(Lexical environment)과의 조합클로저는 자바스크립트 고유의 개념이 아니라 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어에서 사용되는 중요한 특성이다.위 정의에서 중요한 키워드는 "'함수가 선언됐을 때의 렉

중괄호({})를 사용하여 객체를 생성한다.관례상 함수 이름의 첫글자는 대문자로 시작한다.호출 시 new 연산자를 붙여서 실행한다.객체 리터럴을 사용하는 방식도 내부적으로는 생성자 함수와 new 연산자를 사용하는 방식으로 실행된다.(빌트인(Built-in) 함수인 Obj

프로토타입 > Prototype 객체는 생성자 함수가 생성한 각각의 객체에 공유 프로퍼티를 제공하기 위해 사용한다. 객체지향 언어인 자바스크립트에는 클래스라는 개념이 없고, 대신 프로토타입(Prototype)이라는 것이 존재해서 자바스크립트를 프로토타입 기반 언어라고

ES6 클래스는 class 키워드를 사용하여 정의한다.클래스 이름은 성성자 함수와 마찬가지로 파스칼 케이스를 사용하는 것이 일반적인 규칙이다.하지만 호이스팅이 발생하지 않는 것은 아니다.클래스는 var 키워드로 선언한 변수처럼 호이스팅되지 않고 let, const 키워

전역 객체(Global Object)는 모든 객체의 유일한 최상위 객체를 의미하며 일반적으로 Browser-side에서는 window, Server-side(Node.js)에서는 global 객체를 의미한다. // in browser console this === w

함수를 정의하는 방식은 3가지가 있다.함수 선언문함수 표현식Function 생성자 함수function 키워드와 아래의 내용으로 구성된다.함수명함수 선언문의 경우, 함수명은 생략할 수 없다.매개변수 목록0개 이상의 목록으로 괄호로 감싸고 콤마로 분리한다.다른 언어와의 차

쓰로틀링(throttling)과 디바운싱(debouncing) > 이 두 가지 방법 모두 DOM 이벤트를 기반으로 실행하는 자바스크립트를 성능상의 이유로 JS의 양적인 측면, 즉 이벤트(event)를 제어(제한)하는 프로그래밍 기법이다. 예를 들어, 웹/앱 사용자가

함수를 인자로 전달받거나 함수를 결과로 반환하는 함수고차 함수는 인자로 받은 함수를 필요한 시점에 호출하거나 클로저를 생성하여 반환한다.(자바스크립트의 함수는 일급 객체이므로 값처럼 인자로 전달할 수 있으며 반환할 수도 있다.)고차함수는 값뿐만 아니라 동작(action

HTML5부터 제공하는 기능으로, 해당 도메인과 관련된 특정 데이터를 서버가 아니라 클라이언트 웹브라우저에 저장할 수 있도록 제공하는 기능쿠키(cookie)와 비슷한 기능이며, Web Storage의 개념은 키/값 쌍으로 데이터를 저장하고, 키를 기반으로 데이터를 조회

DOM (Document Object Model) > 모든 요소와 요소의 어트리뷰트, 텍스트를 각각의 객체로 만들고 이들 객체의 관계를 트리 구조로 구성한 것 텍스트 파일로 만들어져 있는 웹 문서를 브라우저에 렌더링하려면 웹 문서를 브라우저가 이해할 수 있는 구조로

빌트인 > 브라우저의 자바스크립트 엔진에 내장되어 사용자의 환경에 상관 없이 즉시 사용할 수 있는 코드 객체 자바스크립트의 객체는 크게 3개의 객체로 분류할 수 있다. 표준 빌트인 객체 ECMAScript 사양에 정의된 객체로 자바스크립트 실행환경과 관계없이 사용할

이벤트 버블링 (Event Bubbling) > 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 상위의 화면 요소들로 전달되어 가는 특성 위 코드는 중첩된 세 개의 div코드에 모두 클릭 이벤트를 등록하고 클릭했을 때 logEvent함수를 실행시키는 코드이다.

자바스크립트 런타임 자바스크립트 런타임에는 setTimeout,DOM, AJAX 등과 같은 Web API(이는 JS엔진이 아니라 브라우저에서 제공된다)와 이러한 Web API의 호출을 통제하기 위한 이벤트 루프, 콜백 큐가 존재한다. JS Engine 자바스크립트

HTML, CSS, 자바스크립트 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정브라우저마다 다르지만, 브라우저는 렌더링을 수행하는 렌더링 엔진을 가지고 있다.(크롬 : 블링크(Blink), 사파리 : 웹킷(Webkit), 파이어폭스 : 개코(Gecko))사용자가

예외를 강제로 발생시켜야하는 경우가 생길 때 사용하는 키워드표현식의 결과 값 타입은 무엇이든 될 수 있다.하지만 대부분의 그 타입은 Error객체 또는 Error의 하위 클래스 중 하나의 인스턴스가 된다.에러 메시지를 담고 있는 문자열이나, 에러 코드를 나타내는 숫자

마우스 포인터 좌표를 얻을 수 있는 MouseEvent 의 좌표 값에 대한 속성들에는 screenX/Y, pageX/Y, clientX/Y, offsetX/Y가 있다. [그림] screenX, screenY 사용자 모니터 화면을 기준으로 한 좌표를 표시한다. 사용자