체유의 IT일지

✅insertBefore()와 removeChild()를 활용한 DOM 요소 변형 실습문제 1. ↓↓↓↓↓↓ 초기값 Mission 1. 첫 번째 묶음의 나열된 값들 중 첫번째 요소를 삭제하고 하나의 값을 추가하기 2. 두 번째 묶음의 나열된 값들 앞에 텍스트 추가하고 '과일'은 굵게 표시하기 ↓↓↓↓↓↓ 실행 결과 let fruits = document.getElementById('fruits'); let fruits_li = document.createElement('li'); fruits_li.textContent = 'Tomato'; fruits.insertBefore(fruits_li, fruits.firstElementChild); - 하나의 값을 추가할 때, 그냥 추가하는 것이 아닌 "li" ..

✅ HTMLCollection와 NodeList DOM API가 여러 개의 요소 노드 객체를 반환할 때 사용되는 객체. 유사 배열 객체이면서 이터러블 ✅ HTMLCollection - getElementByTagName() - getElementByClassName() - 자식노드 가져오려면, children 프로퍼티 호출 1) DOM에 새로운 요소 추가되면, 새로운 요소 가져옴 -> "동적" 2) , , 와 같은 요소 노드만 포함 3) id, name, 인덱스로 자식 요소 노드에 접근 가능 -> id와 name은 ".nameItem(id명 or name명)" 메서드로 가능 4) forEach문 x. 유사배열객체로 각 요소 접근을 위해 for of문 사용 ✅ NodeList - getElementByNa..

✅ Map map(callback함수(요소, 인덱스, 배열) // 첫 글자가 m인 단어의 수 구하기 const fruits = ["apple", "banana", "mango", "orange", "blueberry", "melon", "strawberry"]; let sum = 0; fruits.map(item => { if (item[0] == 'm') sum++; }); console.log(sum); // 2 fruits에서 아이템들을 하나씩 가져오고, 그 아이템의 첫 번째 글자(item[0])이 'm'이라면 sum에 값 하나씩 추가 ➕ reduce와 결합 let sum = fruits.map((item) => item[0]=='m').reduce((total, num) => total+num);..

✅ reduce 메서드 배열고차함수 중 하나로, 배열 각 요소에 대해 주어진 reducer 함수를 실행하고 하나의 결과값을 반환 reducer 함수 -> 누적 값 / 현재 값 / 현재 인덱스(op) / 원본 배열(op) let answer = arr.reduce((prev, next) => (prev.concat(next))) ✅ 전개 문법 하나로 뭉쳐 있는 여러 값들의 집합을 펴서 개별적인 값들의 목록으로 나타내줌 ex> 'Hello' -> H e l l o let answer = [].concat(...arr) https://ul0511.tistory.com/16 [JS] 전개문법(+배열 복사, rest 파라미터), Splice() 메서드 ✅ splice 배열의 기존 요소를 삭제 또는 교체하거나 새 ..

✅ Object.values() 객체의 value들만 모아서 배열로 생성 var scores = { kor: 55, mat: 75, eng: 50, }; let arr = Object.values(scores); document.write(arr); // [55, 75, 50] ✅ Reduce let avg = arr.reduce((total, num) => total + num) / arr.length; ✅ Find 주어진 판별 함수를 만족하는 첫 번째 요소를 반환 console.log(arr.find((item) => item item..

✅ splice 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경 array.splice(start, deleteCount, item1, item2, .. ) start: 배열의 변경을 시작할 인덱스 - 배열의 길이보다 큰 값이 들어가면 배열 길이로 설정된다. const arr1 = [1, 4]; const arr2 = [2, 3]; arr1.splice(4, 0, arr2); // arr1 뒤에 arr2를 넣는다. console.log(arr1); // [1, 4, [2, 3]] - 음수인 경우 배열 끝에서부터 센다. const arr1 = [1, 4]; const arr2 = [2, 3]; arr1.splice(-1, 0, arr2); // arr1[-1]번째 뒤에 ar..

✅ match 메서드 문자열.match(찾을 단어) match() 메서드는 찾을 단어를 찾으면, '찾을 단어' 자체를 반환 let txt = "What I love it" txt.match("i") // 'i'를 출력 ➕ 정규표현식 사용 "/i"플래그는 대소문자 구분 허용하지 않고 문자열 검색 let txt = "What I love it"; console.log(txt.match(/i/i)); // [ 'I', index: 5, input: 'What I love it', groups: undefined ] 출력 "g"는 글로벌 플래그로 문자열에 해당하는 부분을 전부 배열에 넣기에, "/gi"는 대소문자 구분 허용하지 않고 모든 문자열을 검색해서 반환 let txt = "What I love it"; ..

function Car(make, model, year) { this.make = make; this.model = model; this.year = year; } var mycar = Car("Eagle", "Talon TSi", 1993); console.log(mycar.make); // TypeError: Cannot read properties of undefined (reading 'make') at Object TypeError 객체나 변수의 값이 정의되지 않은 상태에서 프로퍼티를 참조할 때 발생하는 에러 -> Car 함수를 활용해 mycar에 할당한 것으로 보이지만, mycar에서는 Car 내부에 있는 .make, .model, .year과 같은 프로퍼티를 참조할 수가 없음 function..

JavaScript의 입출력 1. readline 모듈 readline은 따로 설치가 필요없는 내장 모듈이며, 한 번에 한 줄씩 읽음 모듈을 불러오기 위해서는 readline(모듈 이름)의 형태 # 모듈 불러오기 const readline = require("readline") # 객체 만들기 const rl = readline.createTnterface( { input: prodess.stdin, output: process.stdout, }); const는 선언한 변수가 상수임을 의미 값 변경 불가능 2. 메소드 1) on 메소드 이벤트 발생할 때, 실행할 동작을 지정 on(사용할 이벤트 명, 콜백함수) rl.on("line", function(x) { console.log(x) }).on("clo..