체유의 IT일지

Mission 1. 주어진 배열의 요소가 정수인지 확인 2. 주어진 배열의 요소가 모두 정수의 제곱인지 확인 3. 빈 배열이라면 undefined를, 제곱근이 정수가 아니거나 음의 정수가 있을 경우 false를 출력 Number.isInteger() : 정수인지 확인하는 메서드 Math.sqrt() : 제곱근 계산하는 메서드 ✅ filter const isSquare = (array) => { if (array.length === 0) return undefined; let result = array.filter((e) => Number.isInteger(Math.sqrt(e))); if (result.length === array.length) return true; else return false; ..

✅ DOM요소 getElement~ 함수 getElement~ 함수의 종류가 다양함. 그 중 "getElementByID"는 html에서 id를 찾는 함수로, html 파일당 id는 1번만 사용해야함 중복이 되면 안됨 -> 's'가 붙지 않음 + 요소로 출력됨 + 인덱싱 불필요 이 외에 getElementsByTagName, getElementsByClassName, getElementsByName 등은 's'가 붙음 -> 요소들의 모음으로 출력되어 인덱싱이 필요 ✅ setInterval 함수 setInterval(func/code, delay, arg0...N) func/code: 밀리초(delay)마다 실행되는 함수나 선택적 구문을 사용한 문자열 delay: option으로 지정된 함수 및 코드 실행..

✅ 유사배열객체 : 유사배열객체는 이름 그대로 배열과 '유사한' 것으로, 배열처럼은 보이지만 실제는 key값과 length 값을 가지고 있는 개체이다. 이거처럼 0, 1, 2의 key 값들이 있고 length가 있는 객체 형태이다. getElementsByTagName, getElementsByClassName 등은 유사배열객체로 가져오기 때문에 forEach문, map, filter, reduce 등의 메서드를 사용할 수가 없다 사용하기 위해서는 배열 형태로 바꿔주는 작업이 필요하다 0️⃣ 유사배열객체 그대로 가져오는 방법 -> for문 사용 const strong = document.getElementsByTagName('strong'); for (let i=0; i 배열 1️⃣ 전개구문 전개구문은 ..

✅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"; ..