far

(프로토타입 기반 객체지향 모델을 폐지하고 클래스 기반 객체지향 모델을 제공하는 것은 아님) 생성자 함수와의 유사패턴1. 클래스를 new 연산자 없이 호출하면 에러가 발생한다. 하지만 생성자 함수를 new 연산자 없이 호출하면 일반 함수로서 호출된다.2. 클래스는 상속을 지원하는 extends와 super키워드를 제공한다. 생성자 함수는 X3. 클래스는 호이스팅이 발생하지 않는 것처럼 동작한다. 하지만 함수 선언문으로 정의된 생성자 함수는 함수 호이스팅이, 함수 표현식으로 정의한 생성자 함수는 변수 호이스팅이 발생한다.4.클래스 내의 모든 코드에는 암묵적으로 strict mode가 지정되어 실행되며 strict mode를 해제할 수 없다. 하지만 생성자 함수는 X5. 클래스의 constructor, 프로..

textarea의 autosize를 구현하는데 계속 스크롤이 위로 올라가는 현상이 발생했다. 스크롤 이벤트 자체를 textarea에만 사용했기에 코드가 꼬인것도 아닌데 왜 이상하게 작동이 됐을까? const textareaResize = (event) => { event.style.height = 'auto'; event.style.height = (event.scrollHeight) + 'px'; } 내가 처음 사용했던 식이다. 당연히 script 부분이 잘못 됐을거라 생각해 식을 아래와 같이 수정했다. const textareaResize = (event) => { let scrollTop = event.scrollTop event.style.height = 'auto'; event.style.hei..

작업을 하다 전송 버튼을 연타하면 데이터를 받아올 때 꼬이는 현상이 나타나는걸 발견했다. 이런 경우 클릭을 연속해서 할 수 없도록 막아버리는게 최선의 방법이라고 생각했다. index.html HTML은 설명에 필요한 부분만 남겼다. translate.js const langBtn = document.getElementById('langBtn'); const result = document.getElementById('result'); //... let clickable = true; langBtn.addEventListener("click", () => { if (clickable === true && result.textContent !== '') { clickable = false resultTran..

번역기를 만들기 위해 커스텀 셀렉트로 언어 선택창을 만들었는데, 두개의 선택창이 동시에 열려있으면 모양새가 조금 이상했다. 그래서 한쪽이 열리면 다른쪽 선택창은 자동으로 닫히도록 만들기 위해 태그 외부를 클릭하면 자동으로 선택창이 닫히도록 만들어봤다. index.html English Korean English Japanese Chinese French German Italian Portuguese Russian Polish ... Korean Korean English Japanese Chinese French German Italian Portuguese Russian Polish 간단히 말하면 언어를 선택할 수 있는 부분이 Button이고 li가 select태그의 option값이 된다. 굳이 sel..

1. 클로저 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다. const x = 1; function outerFunc() { const x = 10; function innerFunc() { console.log(x); // 10 } innerFunc(); } outerFunc(); 위의 예시를 보면 innerFunc의 상위 스코프는 outerFunc의 스코프다. 이 때 innerFunc는 outerFunc의 렉시컬 환경 안에 있는 변수 x에 접근이 가능하다. 1.1. 렉시컬 스코프 자바스클비트 엔진은 함수를 어디서 호출했는지가 아니라 함수를 어디에 정의했는지에 따라 상위 스코프를 결정한다. 이를 렉시컬 스코프(정적 스코프)라고 한다. 1.2. [[Environment]] 함수는 자신의 내부..

innerHTML, innerText, textContent 모두 HTML의 텍스트값에 접근하고 수정 할 수 있지만 약간의 차이가 있다. 1. innerHTML innerHTML은 엘리먼트의 속성으로 엘리먼트내에 포함 된 HTML 또는 XML 마크업을 가져오거나 설정할 수 있다. // 기본 문법 const content = element.innerHTML; element.innerHTML = htmlString; // 활용 const animal = "Cat"; el.innerHTML = animal; animal = ""; el.innerHTML = animal; 위의 '활용' 코드 같은 경우 innerHTML로 삽입된 값을 설정할 때도 innerText는 텍스트값만 설정하기 때문에 태그를 문자열로 인..

1. 소스코드의 평가와 실행 자바스크립트 엔진은 소스코드를 "소스코드의 평가"와 "소스코드의 실행" 2개의 과정으로 나누어 처리한다. 소스코드 평가 과정에서는 실행 컨텍스트를 생성하고 변수, 함수 등의 선언문만 먼저 실행하여 생성된 변수나 함수 식별자를 키로하여 실행 컨텍스트가 관리하는 스코프에 등록한다. 소스코드 평가 과정이 끝나면 선언문을 제외한 소스코드가 순차적으로 실행되기 시작한다.(런타임 시작) 이때 변수나 함수의 참조를 실행 컨텍스트가 관리하는 스코프에서 취득한다. 그리고 변수 값의 변경 등 소스코드의 실행 결과는 다시 실행 컨텍스트가 관리하는 스코프에 등록된다. 2. 실행 컨텍스트의 역할 코드를 실행하려면 스코프, 식별자, 코드 실행 순서 등의 관리가 필요하다. 실행 컨텍스트는 소스코드를 실..

1. this this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-referencing variable)다. this를 통해 자신이 속한 객체 똔느 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. this는 자바스크립트 엔진에 의해 암묵적으로 생성되며, 코드 어디서든 참조할 수 있다. this는 지역 변수처럼 사용할 수 있지만 this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다. const circle = { radius: 5, getDiameter() { return 2 * this.radius; } }; console.log(circle.getDiameter()); // 10 const circle = { th..

1. 엄격 모드 function foo() { x = 10; } foo(); console.log(x); // ? 위 식의 경우 x 변수를 찾을 수 없음에도 ReferenceError가 발생하지 않는다. 자바스크립트 엔진이 암묵적으로 전역 객체에 x 프로퍼티를 동적 생성하고 이를 전역 변수처럼 사용할 수 있게 해주기 때문이다. 이 현상을 암묵적 전역(implicit global)이라고 한다. 하지만 이런 현상은 나중에 예기치 못한 오류를 발생시키는 원인이 될 가능성이 있다. 그래서 ES5부터 문법적으로 오류를 발생시킬 가능성이 높거나 JS엔진의 최적화 작업에 문제를 일으킬 수 있는 코드에 대해 명시적인 에러를 발생시키는 엄격 모드(Strict mode)가 추가되었다. 'use strict'; functi..

1. 프로토타입이란? 자바스크립트는 프로토타입 기반의 객체지향 프로그래밍 언어이다. 그래서 프토로타입은 ES6에서 클래스 문법이 도입되기 이전에 객체 지향 프로그래밍(OOP)의 핵심을 맡고 있었다. 게다가 클래스 문법 또한 완전히 새로운 객체지향 모델을 제공하는 것이 아니라 프로토타입 기반 패턴의 문법 변형이라고 볼 수 있다. (사실 클래스는 생성자 함수(new)는 동일하게 작동하지 않으며, 클래스가 좀 더 엄격하고 생성자 함수에서 제공하지 않는 기능도 제공하기 때문에 새로운 객체 생성 매커니즘으로 보는 것이 좀 더 합당할 수도 있다.) 1.1 상속과 프로토타입 자바스크립트는 프로토타입을 기반으로 상속을 구현한다. // 생성자 함수 function Circle(radius) { this.radius = ..