JavaScript (34) 썸네일형 리스트형 [JavaScript] new.target new.target 프로퍼티를 사용하면 함수가 new와 함께 호출되었는지 아닌지를 알 수 있습니다. 일반적인 방법으로 함수를 호출했다면 new.target은 undefined를 반환합니다. 하지만 new 와 함께 호출한 경우에는 new.target은 함수 자체를 반환합니다. new.target은 객체.속성명으로 되어있지만 new는 실제 객체는 아닙니다. MDN에 따르면 new는 가상 문맥이고, new.target속성은 모든 함수가 이용할 수 있는 메타속성이라고 합니다. function User() { alert(new.target); } // 'new' 없이 호출함 User(); // undefined // 'new'를 붙여 호출함 new User(); // function User { ... } 함수 .. [Core JavaScript] VariableEnvironment & LexicalEnvironment VariableEnvironmnet에 담기는 내용은 LexicalEnvironment에 담기는 내용과 같지만 최초 실행시의 스냅샷을 유지한다는 점이 다릅니다. 실행컨텍스트를 만들 때 VariableEnvironment에 정보를 먼저 담은 다음 이를 그대로 복새해서 LexicalEnvironment를 만들고, 이후에는 Lexicalenvironment를 사용합니다. LexicalEnvironment 내부는 enviromentRecord와 outer-EnvironmentReference로 구성돼 있습니다. enviromentRecord에는 현재 컨텍스트와 관련된 코드의 식별자 정보들이 저장됩니다. 컨텍스트를 구성하는 함수에 지정된 매개변수 식별자, 선언한 함수가 있을 경우 그함수자체,변수식별자등이 식별자에 .. [JavaScript] fetch fetch 를 사용하면 필요할 때 서버에 네트워크 요청을 보내고 새로운 정보를 받아오는 일을 할 수 있습니다. AJAX(Asynchronous JavaScript And XML)을 이용하면 페이지를 새로고침하지않고 정보를 받아올 수 있습니다. AJAX는 서버에서 추가 정보를 비동기적으로 가져올 수 있게 해주는 포괄적인 기술을 나타내는 용어로, 만들어진지 오래되었습니다. AJAX에 XML이 포함된 이유는 바로 이때문입니다. 콜백 함수는 자바스크립트의 비동기성을 표현하고 관리하는 가장 일반적인 기법이자 가장 기본적인 비동기 패턴이다. [You don't know Js] 콜백함수는 코드를 통해 명시적으로 호출하는 함수의 개념이 아닙니다. 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출하는 함.. [Core JavaScript] class JavaScript는 프로토타입 기반 언어이므로 클래스 개념이 존재하지 않습니다. 생성자 함수 Array를 new 연산자와 함께 호출하면 인스턴스가 생성됩니다. 이때 Array를 일종의 클래스라고 하면, Array의 prototype 객체 내부 요소들이 인스턴스에 상속된다고 볼 수 있습니다. 엄밀히는 상속이 아닌 프로토 타입 체이닝에 의한 참조이지만 결과적으로는 동일하게 동작하므로 이렇게 이해해도 무방합니다. 한편 Array 내부 프로퍼티들 중 prototype 프로퍼티를 제외한 나머지는 인스턴스에 상속되지 않습니다. 인스턴스에 상속되는지( 인스턴스가 참조하는지 ) 여부에 따라 스태틱 멤버와 인스턴스 멤버로 나뉩니다. 이 분류는 다른 언어의 클래스 구성요소에 대한 정의를 차용한 것으로서 클래스 입장에서 .. [Modern JavaScript Deep Dive] Array Array 배열이란 여러개의 값을 순차적으로 나열한 자료구조입니다. 배열이 가지고 있는 값을 요소 (Element)라고 부릅니다. JavaScript의 모든 값은 배열의 요소가 될 수 있습니다. 즉, 원시값은 물론, 객체, 함수, 배열등 자바스크립트에서 값으로 인정하는 모든 것은 배열의 요소가 될 수 있습니다. 배열의 요소는 배열에서 자신의 위치를 나타내는 0 이상의 정수인 인덱스를 갖습니다. 배열은 index와 length 프로퍼티를 갖기 때문에 for문을 통해 순차적으로 접근할 수 있습니다. 자바스크립트에 배열이라는 타입은 존재하지 않습니다. 배열은 객체 타입입니다. typeof arr // object 배열은 배열 리터럴, Array 생성자 함수, Array.of, Array.from 메서드로 생성.. [Modern JavaScript Deep Dive] Iterable ES6에서 도입된 이터레이션 프로토콜은 순회 가능한 데이터 컬렉션(자료구조)를 만들기 위해 ECMAScript 사양에 정의하여 미리 약속한 규칙입니다. ES6 이전 순회 가능한 데이터 컬렉션, 배열, 문자열, 유사배열객체, DOM컬렉션 등은 통일된 규약 없이 나름의 구조를 가지고 for 문 , for in 문 forEach 메서드등 다양한 방법으로 순회할 수 있었습니다. ES6에서는 순회 가능한 데이터 컬렉션을 이터레이션 프로토콜을 준수하는 이터러블로 통일하여 for...of문 , 스프레드문법, 배열 distructuring 할당의 대상으로 사용할 수 있도록 일원화 했습니다. - 이터러블 프로토콜 : Symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나 프로토타입 체인을 통해 상속.. [JavaScript] CustomEvent JavaScript를 사용하면 핸들러를 할당할 수 있을 뿐만 아니라 이벤트를 직접 만들 수 있습니다. 내장 이벤트 클래스는 DOM요소 클래스 같이 계층 구조를 형성합니다. 내장 이벤트 클래스 계층의 꼭대기엔 Event 클래스가 존재합니다. 이벤트 객체는 아래와 같이 생성가능합니다. let event = new Event(type[, options]); 인수는 다음과 같습니다. type: 이벤트 타입을 나타내는 문자열로 'click'같은 내장이벤트, 'my-event' 같은 커스텀 이벤트가 올 수도 있습니다. options: 두 개의 선택 프로퍼티가 있는 객체가 옵니다. bubbles: true /false 이벤트 버블링 cancelabe: true/ false true인 경우 브라우저 기본동작이 실행되지.. defer & async in script tag 일반적으로 script태그를 아무런 속성없이 가져오게 되면 브라우저 HTML을 파싱하는 도중 멈추고 해당 스크립트를 가져오고 실행할 때까지 기다렸다가 다시 HTML을 파싱합니다. 이는 JavaScript코드가 DOM Tree에 접근하여 이를 수정할 수 있기 때문입니다. async 와 defer 속성을 사용한다면, script태그를 만나도 HTML파싱이 중단되지 않습니다. 또한 두 속성을 동시에 적는다면 async 가 적용되고, async 를 지원하지 않는 브라우저는 defer로 fallback이 일어납니다. script 태그의 defer속성은 페이지가 모두 로드되고 나서 해당 스크립트가 실행됨을 나타냅니다. defer 속성은 불리언(boolean) 속성으로 명시하지 않으면 false를 가지게 되고 명시하.. 이전 1 2 3 4 5 다음
