fffo

이벤트 드리븐 프로그래밍 이벤트 : 무언가 일어났다는 신호 이벤트 핸들러 : 이벤트가 발생했을 때 실행되는 함수 이벤트 핸들러 등록 : 브라우저에게 이벤트 핸들러의 호출을 위임 브라우저가 행동을 감지해 이벤트를 발생 시킴 이벤트 드리븐 프로그래밍 : 이벤트 중심으로 프로그램의 흐름을 제어하는 프로그래밍 방식 이벤트 타입 이벤트 타입 : 이벤트의 종류를 나타내는 문자열 이벤트 핸들러 등록 이벤트 핸들러 어트리뷰트 방식 HTML 요소의 이벤트 핸들러 어트리뷰트에 값으로 문(statement)을 할당 각 어트리뷰트 이름은 'on + 이벤트 타입' Click me 이벤트 핸들러 어트리뷰트 값은 암묵적으로 생성될 이벤트 핸들러의 몸체를 의미함 위 예에서 onclick="sayHi('dlwlrma')" 어트리뷰트는..

배열 배열이란 js에서 배열은 배열을 흉내내는 특수한 객체 타입 배열과 일반적인 객체의 차이점은 값의 순서 유무와 length 프로퍼티 유무 일반적으로 배열 자료구조는 각 요소가 동일한 데이터 크기를 가지고 연속적으로 이어져 있는 밀집 배열(dense array)임 js에서 배열은 각 요소가 동일한 데이터 크기를 가질 필요가 없고 연속적이지 않을 수 있는 희소 배열(sparse array)임 js의 배열은 해시 테이블로 구현된 객체이므로 인덱스로 접근 시 일반적인 배열보다 성능상 불리하지만 특정 요소 검색이나 삽입, 삭제에 성능상 유리 모던 js는 이러한 단점을 극복하고자 배열을 다른 객체와 다른 배열답게 최적화함 length 프로퍼티 length 프로퍼티는 0 ~ 2^32(약 42억) -1 사이의 수 ..

ES6 함수의 추가 기능 함수의 구분 ES6 이전의 모든 함수는 callable이자 constructor 이는 실수 유발 가능, 성능 면에서 손해 → 모든 함수가 constructor이므로 프로토타입을 생성함 이러한 문제를 해결하기 위해 ES6에서는 함수를 사용 목적에 따라 3종류로 구분 구분 constructor prototype super arguments 일반 함수(Normal) O O X O 메서드 X X O O 화살표 함수(Arrow) X X X X 표에서 메서드는 메서드 축약 표현으로 정의된 함수만을 의미함 const obj = { x: 1, foo() { return this.x; }, // 메서드 bar: function() { return this.x; } // 일반 함수 }; new o..

상속에 의한 클래스 확장 프로토타입 기반 상속은 프로토타입 체인을 통해 다른 객체의 자산을 상속받는 개념인 반면 상속에 의한 클래스 확장은 기존 클래스를 상속받아 새로운 클래스를 확장하여 정의하는 것 class Animal { constructor(age, weight) { this.age = age; this.weight = weight; } eat() { return 'eat'; } move() { return 'move'; } } class Bird extends Animal { fly() { return 'fly'; } } const bird = new Bird(1, 5); console.log(bird); // Bird { age: 1, weight: 5 } console.log(bird ins..

클래스 클래스는 프로토타입의 문법적 설탕인가? js는 프로토타입 기반 객체지향 언어로, 클래스가 필요 없는 객체지향 프로그래밍 언어임 하지만 편의를 위해 ES6부터 클래스가 추가되었는데, 패러다임이 바뀐 것은 아니지만 기존의 프로토타입 기반 구현과 완벽히 동일하게 작동하진 않음 클래스와 생성자 함수의 차이 클래스는 호출시 new 연산자를 강제함 클래스는 상속을 지원하는 extends와 super키워드 제공 클래스는 호이스팅이 발생하지 않는 것처럼 동작함 클래스 내 코드는 암묵적으로 strict mode가 지정되고 해제할 수 없음 클래스의 constructor, 프로토타입 메서드, 정적 메서드는 모두 프로퍼티 어트리뷰트 [[Enumeralbe]]의 값이 false임 클래스는 단순한 문법적 설탕(기능은 동일..

클로저 렉시컬 스코프 js는 렉시컬 스코프를 따르는 프로그래밍 언어임 렉시컬 스코프는 상위 스코프 결정 방식 js 에서는 변수를 현재의 렉시컬 스코프 내에서 찾지 못하면 상위 스코프로 이동하며 찾음 이 때 상위 스코프는 함수 정의가 평가되는 시점에 함수가 정의된 환경(위치)에 의해 결정됨 함수 객체의 내부 슬롯 [[Environment]] 함수는 자신의 내부 슬롯 [[Environment]]에 자신이 정의된 환경(위치), 즉 상위 스코프의 참조를 저장함 저장하는 시기는 함수 정의가 평가되는 시점에 저장 함수 정의가 평가되는 시점은 해당 코드가 평가되는 시점 코드가 평가 될 때 함수 객체가 생성되고, 해당 함수 객체의 내부 슬롯 [[Environment]]에 현재 실행되고 있는 콜스택의 렉시컬 환경의 참조..

실행 컨텍스트(execution context) 실행 컨텍스트란? 스코프와 코드 실행순서 관리를 구현한 내부 메커니즘 스코프는 식별자를 등록하고 관리하는 역할을 가짐 실행 컨텍스트의 렉시컬 환경(lexical environment)으로 스코프를 관리 실행 컨텍스트 스택으로 코드 실행 순서를 관리 소스코드를 실행하는 데 필요한 환경을 제공하고 실행 결과를 실제로 관리하는 영역 소스코드의 타입 ECMAScript 사양은 소스코드를 4가지 타입으로 구분하고, 각 타입의 소스코드가 평가될 때 각각의 실행 컨텍스트를 생성한다 전역코드(global code) : 전역에 존재하는 소스코드. 전역에 정의된 함수, 클래스 등 내부 코드는 제외 함수 코드 : 함수 내부에 존재하는 소스코드. 함수 내부에 중첩된 함수, 클래..

this this 키워드 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야함 그러나 생성자 함수 내부의 메서드는 자신이 속할 객체를 가리키는 식별자를 알 수 없음 this는 자신이 속한 객체 또는 속할 인스턴스를 가리키는 자기 참조 변수 this는 js엔진에 의해 암묵적으로 생성되고 함수 호출 방식에 의해 동적으로 바인딩됨 함수 호출 방식과 this 바인딩 일반 함수 호출 this에 전역 객체가 바인딩 됨 객체를 생성하지 않는 일반 함수에서는 this가 의미 없고 사용 시 혼란만 가중 되므로 strict mode 적용시 this에는 undefined가 바인딩 됨 메서드 내에 정의한 중첩 함수, 일반 함수로 호출된 콜백 함수도 this에 전역 객체가 ..