JavaScript

JavaScript

객체(Object) - JavaScript

객체(Object) JavaScript 객체란 객체는 관련된 데이터와 함수(일반적으로 여러 데이터와 함수로 이루어지는데, 객체 안에 있을 때는 보통 프로퍼티와 메서드라고 부릅니다)의 집합입니다. 객체의 형태 key: value의 형태를 가지고 값을 여러개 쓸 때에는 ‘ , ’로 구분해 줍니다. [object Object]라는 값을 표시하여 구별할 수 있습니다. 프로퍼티 사용법 객체에서는 키값 즉 프로퍼티 값을 이용하여 데이터를 활용할 수 있습니다. 객체.프로퍼티 혹은 객체. 메서드의 형태로 값을 활용합니다. 이를 점 표기법(Dot Notation)이라고 합니다. 점 표기법(Dot Notation) person.name person.name[0] person.age person.interests[1] pe..

JavaScript

엄격 모드(Strict Mode) - JavaScript

엄격 모드(Strict Mode) JavaScript Strict mode 'use strict'; 엄격 모드를 실행하는 JS코드이다 JS를 작성하기 전에 한 번만 써주면 느슨 모드에서 엄격 모드로 쉽게 전환이 가능하다. Strict mode의 기능은 다음과 같다 기존에는 조용히 무시되던 에러들을 에러메세지를 발생시킵니다. JavaScript 엔진의 최적화 작업을 어렵게 만드는 실수들을 바로잡습니다. 가끔씩 엄격 모드의 코드는 비-엄격 모드의 동일한 코드보다 더 빨리 작동하도록 만들어집니다. 엄격 모드는 ECMAScript의 차기 버전들에서 정의될 문법을 금지합니다. 이러한 Strict mode는 함수와 모듈안에서만 사용할 수도 있다. Strict mode의 내용들은 MDN 사이트에 잘 정리되어 있으므로..

JavaScript

쉐도우 돔(Shadow DOM) - JavaScript

쉐도우 돔(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요소들은 글..

JavaScript

프로토타입(Prototype) - JavaScript

프로토타입(Prototype) JavaScript 프로토타입(Prototype)이란 새로운 객체를 만들어 낼 때 부모 객체 안에 사용 가능한 빈 객체가 존재하는데 이를 prototype이라고 한다. 아래 그림과 같이 정의하지 않은 Object가 존재하는 모습을 볼 수 있다. 왜 그런가요? JS는 객체지향언어이다. JS에는 클래스(Class)라는 개념이 존재하지 않았다( ECMA6 표준에서는 Class 문법이 추가되었지만 문법이 추가된 것이고 클래스 기반으로 바뀐 것은 아니다) 하지만 JS에서는 함수와 new를 통해 새로운 객체를 만들 수 있는데 여기서 부모 객체 안에 prototype이라는 빈 객체가 존재하고 사용 가능하다는 점과 상속이라는 특성에 주목해야 한다 프로토타입의 특성 부모 객체에만 가지고 있..

JavaScript

이벤트 버블링(Event Bubbling) - JavaScript

이벤트 버블링(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..

JavaScript

호이스팅(Hoisting) - JavaScript

호이스팅(Hoisting) 호이스팅이란? > 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다. 쉽게 설명하자면 자바스크립트 엔진이 함수가 실행되기 전에 코드 안에 있는 변수들을 범위의 최상단으로 끌어올려지는 것 같은 현상 왜 이런 현상이 발생하는가? > var의 문제점으로 인해 발생한다. 더보기 var의 문제점 같은 이름의 변수 중복 선언이 가능 지역변수와 전역변수의 개념이 확실하지 않음 함수만 제외하고 다 전역변수로 사용함 var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화한다. 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않는다. 예제 1과 같이 JavaScript는 함수의 코드를 실행하기 전에 함수 선언에 대한 ..

🚀 새로운 블로그로 이전했습니다.

살펴보러 가기
minjae_4
'JavaScript' 카테고리의 글 목록 (2 Page)