HTMLCollection과 NodeList가 도대체 뭔지..이번에도 gpt를 사용해서 정리해본다. 1. HTMLCollection과 NodeList 공통점DOM 요소의 집합배열처럼 인덱스로 요소 접근 가능`length` 프로퍼티로 요소의 개수 확인 가능2. HTMLCollection과 NodeList 차이점구분HTMLCollectionNodeList생성 메서드`getElementsByClassName()``getElementsByTagName()``document.forms``form.elements``document.image``document.links``document.anchors``querySelectAll()``childNodes`Live 여부O (DOM 변경 시 자동 업데이트)X 대부분 S..

컬렉션은 자바스크립트 DOM을 공부하면서 계속 보는 단어였는데 와닿지 않았다.gpt 도움으로 이해가 되어 기록용으로 적어본다.정말 얕은 지식이니 더 깊게 들어가고 싶으면 재서치가 필요하다😂 https://ko.javascript.info/searching-elements-dom 에서왜 documnet.getElementsByTagName('input').value = 5; 는 동작하지 않을까? 에 대해서 질문을 시작했다. 1. document.getElementsByTagName('input') 이란이 코드는 HTML 문서 전체에서 태그를 모두 찾아준다.예를 들어 아래와 같은 HTML 있다고 가정. 이때let inputs = document.getElementsByTagName('input');in..

보호되어 있는 글입니다.

e.target , e.curentTarget 차이점 결론부터 말하자면, e.target :: 실제 이벤트가 발생하는 요소 (나만 이벤트 발생) e.currentTarget :: 이벤트 리스너가 달린 요소 (자식 클릭해도 부모도 이벤트 위임) outer inner button const outer = document.getElementById('outer'); const inner = document.getElementById('inner'); const button = document.getElementById('button'); function printLog(e) { const { target, e.currentTarget } = e; console.log(`target: ${target.id}, ..

참조에 의한 객체복사 객체와 원시타입의 근본적인 차이 중 하나는 객체는 '참조에 의해(by reference)' 저장되고 복사된다. 원시값(문자열, 숫자, 불린 값)은 '값 그대로' 저장·할당되고 복사된다. let message = 'Hello'; let cloneMessage = message; cloneMessage = 'CloneHello'; console.log(message, cloneMessage); // Hello CloneHello 객체가 할당된 변수를 복사하면 동일한 객체에 대한 참조 값이 하나 더 만들어진다. let user = { name: 'John'; } let admin = user; admin.name = ..

상수객체 const로 선언된 객체는 수정 될 수 있다. const user = { name: 'John' }; user.name = 'Pete'; console.log(user.name); // Pete const는 한 번이라도 값을 할당한 변수가 변경되는 걸 막는다. 변수 user는 객체 참조 값을 저장하고 있는데, const는 이 값이 변경되는걸 막는 것이지, 객체의 내용 (프로퍼티)을 변경하는 건 막지않는다. 계산된 프로퍼티 객체를 만들 때 객체 리터럴 안의 프로퍼티 키가 대괄호로 둘러싸여 있을 경우, 이를 계산된 프로퍼티 (computed propery) 라고 부른다. let fruit = prompt('어떤 과일을 구매하시겠습니까?', 'appl..

nullish 병합연산자 ?? 최근에 추가됨. 스펙에 추가된지 얼마안된 문법. 구식 브라우저는 폴리필이 필요하다. nullsh 병합연산자(nullish coalescing operator) ??를 사용하면 짧은 문법으로 여러 피연산자 중 그 값이 확정되어 있는 변수를 찾을 수 있다. a ?? b 의 평가 결과는 다음과 같다. a가 null도 아니고 undefined도 아니면 a 그 외의 경우 b nullish 병합 연산자 ??없이 x = a ?? b와 동일한 동작을 하는 코드를 작성하면 다음과 같다. x = (a !== null && a !== undefined) ? a : b; ??와 ||의 차이 ||는 첫 번째 truthy값을 반환. ??는 첫 번째 정의된(defined) 값을 반환. null과 un..

값을 반환하는데 사용. 지역변수의 값을 아는데 사용. 현재 진행중인 함수를 중지(escape). 1. 값을 반환하는데 사용 + 2. 지역변수의 값을 아는데 사용. [예제1] var test = function() { var x = 1; } test(); console.log(test()); // undefined 위의 함수는 실행되지 않는다. 내부 구문들을 실행(test())하였으나 반환할 값이 선언되지 않았다. x를 얻기 위해선 return을 사용하여 값을 반환해야 한다. var test = function() { var x = 1; return x; } var test2 = test(); console.log(test2); test() 함수를 실행할 경우 해당함수는 1을 반환한다. 반환값을 사용하기 ..