클래스(Class) JavaScript Class란 클래스는 객체를 생성하기 위한 템플릿입니다. 또한 클래스는 특별한 함수입니다. 예를 들면 붕어빵 틀과 같이 여러 번 반복된 작업을 해야 하고 팥, 슈크림과 같이 내용을 바꾸어 모양은 같지만 다른 붕어빵을 만들 수도 있습니다. 객체를 정리할 수 있도록 도와주는 역할을 합니다. Class 선언 클래스는 생성자를 통한 인스턴스 생성 및 초기화, 메서드로 구분하여 선언합니다. class guy{ //생성자 constructor(name, age) { //인스턴스 생성 및 초기화 this.name = name; this.age = age; } greeting() { console.log(`hi I'm ${this.name}`) } } //인스턴스 생성 const..
엄격 모드(Strict Mode) JavaScript Strict mode 'use strict'; 엄격 모드를 실행하는 JS코드이다 JS를 작성하기 전에 한 번만 써주면 느슨 모드에서 엄격 모드로 쉽게 전환이 가능하다. Strict mode의 기능은 다음과 같다 기존에는 조용히 무시되던 에러들을 에러메세지를 발생시킵니다. JavaScript 엔진의 최적화 작업을 어렵게 만드는 실수들을 바로잡습니다. 가끔씩 엄격 모드의 코드는 비-엄격 모드의 동일한 코드보다 더 빨리 작동하도록 만들어집니다. 엄격 모드는 ECMAScript의 차기 버전들에서 정의될 문법을 금지합니다. 이러한 Strict mode는 함수와 모듈안에서만 사용할 수도 있다. Strict mode의 내용들은 MDN 사이트에 잘 정리되어 있으므로..
쉐도우 돔(Shadow DOM) JavaScript 쉐도우 돔(Shadow DOM)이란 DOM(Document Object Model)은 HTML의 문서화된 표현이다. 그리고 HTML 문서의 모든 요소와 스타일로 이루어진 DOM은 하나의 큰 글로벌 범위 내에 있다. Shadow DOM은 DOM안의 DOM으로 생각하기 쉬우나 원래의 DOM 트리에서 완전히 분리된 고유의 요소와 스타일을 가진 DOM 트리이다. HTML에 input 태그를 작성하면 아래와 같은 Output을 어떠한 방식으로 만들었느냐는 div태그 여러 개를 이용하여 Shadow-root안에 지정되어있다 즉 브라우저를 확인하는 고객은 볼 수없지만 실제 값안에 저장되어있는 요소들을 칭한다고 할 수 있다. 또한 이러한 Shadow DOM요소들은 글..
프로토타입(Prototype) JavaScript 프로토타입(Prototype)이란 새로운 객체를 만들어 낼 때 부모 객체 안에 사용 가능한 빈 객체가 존재하는데 이를 prototype이라고 한다. 아래 그림과 같이 정의하지 않은 Object가 존재하는 모습을 볼 수 있다. 왜 그런가요? JS는 객체지향언어이다. JS에는 클래스(Class)라는 개념이 존재하지 않았다( ECMA6 표준에서는 Class 문법이 추가되었지만 문법이 추가된 것이고 클래스 기반으로 바뀐 것은 아니다) 하지만 JS에서는 함수와 new를 통해 새로운 객체를 만들 수 있는데 여기서 부모 객체 안에 prototype이라는 빈 객체가 존재하고 사용 가능하다는 점과 상속이라는 특성에 주목해야 한다 프로토타입의 특성 부모 객체에만 가지고 있..
이벤트 버블링(Event Bubbling), 이벤트 캡쳐(Event Capture), 이벤트 위임(Event Delegation) JavaScript 이벤트 버블링(Event Bubbling)이란 이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성 HTML의 트리 구조를 이해하고 이벤트 버블링의 예시를 보는 것이 좋다. //HTML의 트리 구조 var divs = document.querySelectorAll('div'); divs.forEach(function(div) { div.addEventListener('click', logEvent); }); function logEvent(event) { console.log(event.curr..
호이스팅(Hoisting) 호이스팅이란? > 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다. 쉽게 설명하자면 자바스크립트 엔진이 함수가 실행되기 전에 코드 안에 있는 변수들을 범위의 최상단으로 끌어올려지는 것 같은 현상 왜 이런 현상이 발생하는가? > var의 문제점으로 인해 발생한다. 더보기 var의 문제점 같은 이름의 변수 중복 선언이 가능 지역변수와 전역변수의 개념이 확실하지 않음 함수만 제외하고 다 전역변수로 사용함 var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화한다. 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않는다. 예제 1과 같이 JavaScript는 함수의 코드를 실행하기 전에 함수 선언에 대한 ..
🚀 새로운 블로그로 이전했습니다.
살펴보러 가기
