▶ 버블링 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고 이어서 부모 요소의 핸들러가 동작하는 현상 가장 최상단의 조상 요소 (document)를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작한다 제일 깊은 곳에 있는 요소에서 이벤트가 시작해 부모 요소를 거슬러 올라가면 발생하는 것이 마치 물속 거품과 닮았기 때문이다 가장 안쪽의 요소를 클릭하면 p -> div -> form 순서로 3개의 이벤트 핸들러가 모두 동작했던 것 문제의식 ) 버블링이 나오게 된 상황 위와 같은 형태의 중첩된 구조에 각각 이벤트 핸들러가 있을 때 만약 요소를 클릭하면 어떻게 될까? 요소만 클릭했는데도 불구하고, 모든 핸들러가 동작한다 Q. 왜 p를 클릭했는데 div와 form에 할당된 핸..

▶ event handler 이벤트가 발생했을 때 실행되는 함수 사용자의 행동에 어떻게 반응할지를 JavaScript 코드로 표현한 것 대표적인 이벤트 핸들러 중 하나 DOM 요소가 특정 이벤트를 수신할 때마다 콜백 함수를 호출한다 type handler 수신할 이벤트 이름 문자열로 작성 (ex. click) 발생한 이벤트 객체를 수신하는 콜백 함수 콜백 함수는 발생한 event object를 유일한 매개변수로 받는다 버튼을 클릭하면 버튼 요소 출력하기 버튼에 이벤트 처리기를 부착하여, 클릭 이벤트가 발생하면 이벤트가 발생한 버튼 정보를 출력한다. 요소에 addEventListener를 부착하게 되면 내부의 this 값은 대상 요소를 가리키게 된다. (event 객체의 currentTarget 속성 값과..

▶ 이벤트 일상속의 이벤트 웹에서의 이벤트 컴퓨터 키보드를 눌러 텍스트를 입력하는 것 전화벨이 울려 전화가 왔음을 알리는 것 손을 흔들어 인사하는 것 전화기의 버튼을 눌러서 통화를 시작하는 것 리모컨을 사용하여 채널을 변경하는 것 화면을 스크롤하는 것 버튼을 클릭했을 때 팝업 창이 출력되는 것 마우스 커서의 위치에 따라 드래그 앤 드롭하는 것 사용자의 키보드 입력 값에 따라 새로운 요소를 생성하는 것 => 웹에서의 모든 동작은 이벤트 발생과 함께 한다. ▶ event 무언가 일어나다는 신호, 사건 모든 DOM 요소는 이러한 event를 만들어 낸다 ▶ event object DOM에서 이벤트가 발생했을 때 생성되는 객체 이벤트의 종류 mouse, input, keyboard, touch * MDM 공식문..

▶ 배열은 객체다 배열은 인덱스를 키로 가진다 그리고 length 속성을 가지는 특수한 객체이다 배열도 키와 속성들을 담고 있는 참조 타입의 객체이다 대괄호 접근법을 사용해서 배열의 요소에 접근하는 건 객체 문법과 같다 ex) 배열의 키는 숫자이다 숫자형 키를 사용함으로써, 배열은 객체 기본 기능 외에도 "순서가 있는 컬렉션"을 제어하게 해주는 특별한 매서드를 제공할 수 있게 된다

▷ 문제 인식 forEach에서는 break 키워드를 사용할 수 없다 대신 some과 every의 특징을 활용해 마치 break를 사용하는 것처럼 활용할 수 있다 ▷ 해결방안 1. some 콜백 함수가 true를 반환하면 즉시 순회를 중단하는 특징을 활용한다 2. every 콜백 함수가 false를 반환하면 즉시 순회를 중단하는 특징을 활용한다

1. 함수의 재사용성 측면 함수를 호출하는 코드에서 콜백 함수의 동작을 자유롭게 변경할 수 있다 예를 들어, map 함수는 콜백 함수를 인자로 받아 배열의 각 요소를 순회하며 콜백 함수를 실행한다 이때, 콜백 함수는 각 요소를 변환하는 로직을 담당하므로 map 함수를 호출하는 코드는 간결하고 가독성이 높아진다 2. 비동기적 측면 setTimeout 함수는 콜백 함수를 인자로 받아 일정 시간이 지난 후에 실행된다 이때, setTimeout 함수는 비동기적으로 콜백 함수를 실행하므로, 다른 코드의 실행을 방해하지 않는다

* MDN 문서를 참고해서 사용하면 좋다 1. filter 콜백 함수의 반환 값이 참인 요소들만 모아서 새로운 배열을 반환한다 2. find 콜백 함수의 반환 값이 참이면 해당 요소를 반환한다 3. some 배열의 요소 중 적어도 하나라도 콜백 함수를 통과하면 true를 반환하며 즉시 배열 순회가 중지된다 모두 통과하지 못하면 false를 반환한다 4. every 배열의 모든 요소가 콜백 함수를 통과하면 true를 반환한다 하나라도 통과하지 못하면 즉시 false를 반환하고 배열 순회가 중지된다

1. for loop 배열의 인덱스를 이용하여 각 요소에 접근한다 break O, continue O (사용가능) 2. for ...of 배열의 요소에 바로 접근 가능하다 break O, continue O (사용가능) 3. ★★★ forEach ★★★ 사용권장 간결하고 가독성이 높다 callback ㅎ마수를 이용하여 각 요소들을 조작하기 좋다. break X, continue X (사용 불가능)

파이썬의 map 함수 자바스크립트의 map 함수 python의 map에 square 함수를 인자로 넘겨서 numbers 배열의 각 요소를 square 함수의 인자로 사용했다 map 매서드에 callBackFunction 함수를 인자로 넘겨서 numbers 배열의 각 요소를 callBackFunc 함수의 인자로 사용했다

▶ map () 배열의 모든 요소에 대해 콜백함수를 호출한다 반환된 호출 결과 값을 모아서 새로운 배열을 반환한다 ▶ map () 구조 forEach의 매개 변수와 동일하다 반환 값 배열의 각 요소에 대해 실행한 "callback의 결과를 모은 새로운 배열" forEach 동작 원리와 같지만, forEach와 달리 새로운 배열을 반환한다 ▶ map () 예시 배열을 순회하며 각 객체의 name 속성 값을 추출하기 ( for ...of와 비교) for ...of map() ▶ map () 활용