개발여행의 블로그

이번 과제는 생성자 함수 그리고 this, prototype을 사용하여 문제를 해결해나가는 것이 key point였던 것 같다. 그래서 생성자 함수를 왜 사용하는지 그 목적에 대해 정리해보려고 한다. 생성자 함수의 정의와 다양한 객체 생성 방식 중 생성자 함수를 사용하는 방식에 대해 알아보자. 생성자 함수(constructor)란? new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수이다. 생성자 함수에 의해 생성된 객체를 인스턴스(instance)라고 한다. > 참고 | 자바스크립트는 빌트인 생성자 함수를 제공한다. (Object, String, Number, Boolean, Function, Array, Date, RegExp, Promise) 객체 리터럴에 의한 객체 생성 VS 생성자 함수..

과제를 하던 중 함수의 return값을 사용하는 부분이 없는데도 this를 return하는 코드를 발견했다. 확장성을 위해 return을 해둔 것인가? 라는 생각이 들었는데 검색해보아도 명확한 해답을 찾지 못했다. 그래서 질문을 남겨보았다. 질문하자마자 method chaining을 위한 코드라는 답변을 달아주셨다.🙇‍♀️ ✅Method Chaining 연속적인 코드 줄에서 개체의 Method를 반복적으로 호출하는 것을 의미한다. Method가 객체를 반환하면 그 반환 값(객체)이 또 다른 Method를 호출할 수 있다. Method Chaining is a programming strategy that simplifies and embellishes your code. It is a mechanism ..

* 이 글은 바닐라코딩 prep 코스의 강의 내용과 책 '모던 자바스크립트 Deep Dive'의 this 파트를 공부하며 정리한 글입니다. JavaScript에서 this란? - 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 self-referencing variable(자기 참조 변수) - this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드 참조 가능 this의 값 - this 키워드는 함수 내부에서 사용되므로 this를 포함하고 있는 함수가 어떻게 실행되는지에 따라 결정 - 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정 ❗this는 함수 선언 시점에 결정되는 값이 아니라, 함수 실행 시점에 결정되는 값임을 명심! this의 생성 - this는 Ja..

모든 element를 선택해서 해당 요소 하나하나에 eventListener를 추가한다. 모든 div box들이 click event를 감지할 수 있도록 구현했다. const boxes = document.querySelectorAll('.box'); boxes.forEach( (box) => { box.addEventListener('click', onClickBox) }); querySelectorAll로 모든 box element를 선택했다. 실행화면에서 보면 9개 각각의 박스에 click 이벤트를 감지할 수 있도록 addEventListener를 해두었다. forEach()와 addEventLisner, querySelectorAll에 대한 설명 forEach() forEach() : 메서드는 주..

Javascript로 간단한 채팅을 구현하는 중, textarea 입력창에서 shift+enter 입력 시 줄 바꿈 되어 출력되는 기능을 추가했다. ( textarea는 input text와 다르게 여러 줄의 문자열을 입력할 수 있다. ) button 클릭과 textarea enter키 입력 시 채팅 내용이 입력되도록 이벤트 처리를 먼저 해두었다. 이벤트 처리 부분 const sendBtnElement = document.querySelector(".btn-send"); const textareaElement = document.querySelector(".textarea"); sendBtnElement.addEventListener("click", () => { sendMessage() }); text..