1. 스프레드 연산자(...)1) 객체 복사const user = {name: '철수', age: 20};const copy = {...user};user객체의 모든 속성을 copy라는 새 객체에 복사.원본(user)과 copy는 서로 독립적인 객체가 된다.2) 객체 합치기const a = {x: 1};const b = {y: 2};const merged = {...a, ...b};a와 b의 모든 속성을 합쳐서 merged라는 새 객체를 만든다.동일한 key가 있으면 뒤에 오는 객체(b) 값이 우선.3) 일부 값만 바꿔서 새 객체 만들기const person = {name: '영희', age: 22, 'city': 서울};const updated = {...person, city: '부산'};person..

빈 객체 만드는 방법let user = new Object(); // '객체 생성자' 문법let user = {}; // '객체 리터럴' 문법계산된 프로퍼티객체를 만들 때 각체 리터럴 안의 프로퍼티 키가 대괄호로 둘러싸여 있는 경우,이를 계산된 프로퍼티(computed property)라고 부른다. let user = {};// setuser['likes birds'] = true;// getalert(user['likes birds']); // true// deletedelete user['likes birds'];/* 또는 변수에 넣는 방법 */let key = 'likes birds';// user['likes birds'] = true;와 같다.user[key] = true;// 복잡한 표현식 ..

구조분해할당(Destructuring Assignment)배열이나 객체의 값을 쉽게 꺼내서 변수에 할당할 수 있게 해주는 ES6 문법이다. 1. 배열 구조분해할당1-1. 기본예제const arr = [1,2,3];const [a,b,c] = arr;console.log(a); // 1console.log(b); // 2console.log(c); // 3배열의 각 요소가 순서대로 변수에 할당된다.1-2. 일부 값만 꺼내기, 건너뛰기const arr = [10,20,30,40];const [fist, , third] = arr;console.log(first); // 10console.log(third); // 30두 번째 값을 건너뛰고 세 번째 값을 바로 할당할 수 있다.1-3. 나머지(REST) 연산자..

표현식 , 문, 표현식문 이란 단어는 공부하면서 계속 나오던데 개념이 확실치 않아 다시 정리해보았다.1. 표현식(Expression)정의 : 실행 결과가 항상 값이 되는 코드표현식은 값처럼 사용할 수 있다.var x; // 변수 선언문x = 5; // 할당문function foo() {} // 함수 선언문if (x > 1) {} // 조건문for(let i = 0; i 2. 문(Statement)정의 : 프로그램을 구성하는 기본 실행 단위.명령 또는 문장에 해당하며, 프로그램의 흐름을 제어한다.프로그램의 동작을 지시문은 하나 이상의 표현식으로 구성될 수 있다.문 끝에는 보통 세미클론(;) 을 붙인다.10; // 숫자 리터럴 표현식'hello' // 문자 리터럴 표현식x // 식별자 표현식2 + 3 //..

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}, ..