fffo

this 키워드 this 키워드는 자기 자신이 속한 객체나 속할 객체를 가리키기 위한 자기 참조 변수입니다. 메서드에서 자신이 속한 객체의 프로퍼티를 참조하기 위해 자신이 속한 객체를 가리키거나 생성자 함수에서 자신이 만들 인스턴스를 가리키는 식별자를 참조하기 위해 사용합니다. this는 자바스크립트 엔진에 의해 암묵적으로 생성되어 함수 호출 방식에 의해 동적으로 바인딩 됩니다. 크게 네 가지로 나누어 볼 수 있습니다. 일반 함수 호출, 메서드 호출, 생성자 함수 호출, 그리고 간접 호출 이렇게 네 가지로 각각의 호출 방식에 의해 this가 가리키는 값은 동적으로 바인딩 됩니다. 메서드 호출 시 this 메서드란 보통 객체에 묶여있는 함수를 말하는데 여기서 말하는 메서드는 조금 더 구체적인 범위를 가지고..

브라우저 저장소는 크게 두 가지가 있습니다. 하나는 쿠키(cookie)이고 다른 하나는 웹 스토리지(web storage)입니다. 둘 모두 브라우저에 데이터를 저장하는 컨테이너라고 볼 수 있지만 몇 가지 다른 점이 있습니다. 우선 쿠키는 매 요청(request)마다 서버로 전송이 되는 반면 웹 스토리지는 요청 시에도 서버로 전송되지 않습니다. 그렇기 때문에 일반적으로 웹스토리지가 쿠키보다 더 많은 데이터를 보관할 수 있습니다. 개발자는 브라우저 내의 웹 스토리지 구성 방식을 설정할 수 있습니다. 그런데 서버는 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없습니다. 웹 스토리지 객체의 조작은 모두 자바스크립트 내에서 수행됩니다. 웹스토리지 객체는 URL의 scheme(프로토콜) + host(도메인) +..

자바스크립트로 d-day를 표시하는 시계를 만들다가 헷갈리는 부분이 있어서 포스팅하겠습니다. d-day를 만들기 위해서는 현재 시간을 불러오는 new Date() 생성자 함수, 그리고 d-day에 현재 시간을 빼고 남은 시간을 일, 시, 분, 초 단위로 나타낼 코드가 필요합니다. Date생성자 함수를 통해 얻어진 Date 객체끼리 뺄셈을 하면 시간을 ms단위로 반환하기 때문에 남은시간 역시 ms단위로 얻을 수 있습니다. 물론 Date객체 각각의 연월일 시분초를 얻어서 뺄셈할 수 있지만 이는 월의 마지막 날이 30일인지, 31일인지, 혹은 28일인지 29일인지를 구분하는 별도의 로직이 필요하기 때문에 더 복잡한 것 같습니다. d-day의 Date객체와 현재 시간의 Date객체의 뺄셈으로 구해진 ms을 시간..

배열 배열이란 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]]에 현재 실행되고 있는 콜스택의 렉시컬 환경의 참조..