본문 바로가기

프론트엔드/JS 공부13

생성자 함수(constructor)에 대한 정리 최종 수정 : 2024-04-05 필요한 지식 객체 / this 추후 링크 연결 예정 코드를 볼 때마다, new가 나오면 긴장한 상태로 바라봤다. 무지에서 오는 막연한 두려움이 싫어서 정리 시작! 1. 생성자 함수(constructor function) 자바스크립트 함수는 재사용한 코드의 묶음으로 사용하는 것 외에 객체를 생성하기 위한 방법으로도 사용된다. 직접 객체를 반환해도 되지만, new 키워드를 사용하여 함수를 호출하면 return 문 없이도 새로운 객체가 반환된다. 이처럼 객체를 생성하는 역할을 하는 함수를 '생성자 함수'라고 한다. 관례적으로 일반 함수와 구분하기 위해 대문자로 시작하는 함수명을 작성한다. 또한 생성자 함수는 새로운 타입을 정의하는 데 사용된다. new 키워드로 만들어진 객체는.. 2024. 4. 5.
이벤트 전파(Event propagation)에 대한 정리 최종 수정 : 2024-04-05 필요한 지식 DOM 트리 이벤트 이벤트 객체 추후 링크 연결 예정 이벤트 전파(evnet propagation) 말 그대로, DOM 요소 노드에서 발생한 이벤트가 DOM 트리를 통해 전파되는 것을 말한다. 이벤트가 발생하면, 이벤트 객체가 생성된다. 이벤트가 발생한 DOM 요소인 이벤트 타깃(event target)을 중심으로 DOM 트리를 통해 이벤트가 전파된다. 이벤트 객체가 전달되는 방향에 따라 3단계로 구분할 수 있다. (1) 캡처링 단계(capturing phase) : 이벤트가 상위 요소에서 하위 요소 방향으로 전파 (2) 타깃 단계(target phase) : 이벤트가 이벤트 타깃에 도달 (3) 버블링 단계(bubbling phase) : 이벤트가 하위 요소.. 2024. 4. 5.
Map() 객체에 대한 정리 최종 수정 : 2024-04-04 필요한 지식 - 추후 링크 연결 예정 1) 이터러블 / 이터레이터 2) 생성자 함수 3) prototype Map 객체는 키와 값의 쌍으로 이루어진 컬렉션이다. 객체와 유사한 특징은 있지만 차이가 있다. 구분 객체 Map 객체 키로 사용할 수 있는 요소 문자열 또는 심벌 값 객체를 포함한 모든 값 이터러블 X O 요소 개수 확인 Object.keys(obj).length map.size 1. Map 객체의 생성 맵은 항상 명시적으로 새로운 인스턴스를 생성해야 한다. const map = new Map(); console.log(map); // Map(0) {} 빈 객체 Map 생성자 함수는 이터러블을 인수로 전달받아 Map 객체를 생성한다. 이때 전달되는 이터러블은 키와.. 2024. 4. 4.
02. The JavaScript Universe 보호되어 있는 글 입니다. 2024. 4. 2.
JJS 멘탈 모델에 관하여 보호되어 있는 글 입니다. 2024. 3. 29.