time to wander

reduce() method reduce(function(accumulator, currentValue, currentIndex, array) { return accumulator + currentValue; }, initialValue); // 애로우 함수를 사용할 수도 있음 reduce( (prev, curr) => prev + curr, initValue ); 배열의 빈 요소를 제외한 각 요소에 리듀서(reducer) 함수를 실행하고, 하나의 누적 계산 결과값을 반환 리듀서 함수는 누산기(acc), 현재 값(curVal), 현재 인덱스(curIndex), 배열(arr) 네 개의 인자를 가짐 accumulator 누산기: 콜백 함수의 반환값을 누적해줌 currentValue : 현재 처리할 요소 cu..

filter() method 형태: arr.filter(callback function(element, index, array) 원본 배열의 요소 중 주어진 callback 함수의 테스트를 통과하는 모든 요소를 모아서 새로운 배열로 반환 원본 배열의 어떠한 요소도 테스트를 통과하지 못 한 경우 빈 배열 반환 원본 배열에는 영향을 미치지 않음 callback function → 각 요소를 시험할 함수로, true를 반환하면 요소를 유지하고, false를 반환하면 버림 element → 현재 처리할 요소 index (optional) → 현재 처리할 요소의 인덱스 array (optioanl) → filter를 호출할 배열 callback 함수는 할당된 값이 있는 인덱스에서만 호출됨 var arr = [ {..

slice() 메소드 형태: Array.slice(begin, end) 배열의 시작 인덱스부터 종료 인덱스의 직전까지의 요소를 복사하여 새로운 배열로 반환 원본 배열에는 여향을 주지 않음 begin (optional) 0을 시작으로 하는 추출 시작점에 대한 인덱스 음수 인덱스 (ex. -2) 는 배열의 끝에서부터의 길이를 의미 begin 이 undefined인 경우, 0번 인덱스부터 추출 begin이 배열의 길이보다 큰 경우, 빈 배열을 반환 end (optional) 추출을 종료할 0기준 인덱스로, end index를 제외하고 추출 ex. arr.slice(1, 5) → 배열의 두 번째(index 1)부터 다섯 번째(index 4)까지 추출 마찬가지로 음수 인덱스는 배열의 끝에서부터의 길이를 나타냄 e..

splice() 형태: arr.splice(startIndex, deleteCount, 'item1', 'item2', 'item3', ...) 배열의 기존 요소를 삭제 또는 교체하거나, 새 요소를 추가하여 배열의 내용을 변경해주는 메소드 제거한 요소를 담은 배열을 반환하며, 이 경우 원본 배열은 제거한 요소가 빠져 있는 배열로 변경됨 startIndex → 배열의 변경을 시작할 인덱스 deleteCount (optional) → 시작 인덱스로부터 배열에서 제거할 요소의 수 'item' (optioanl) → 시작 인덱스로부터 배열에 추가할 요소 deleteCount를 생략하거나 arr.length - startIndex 보다 크면 startIndex부터 모든 요소 제거 deleteCount가 0이하면 ..

map() 메소드 형태: arr.map(function(currentValue, index, array) {실행할 함수 내용; return 새로운 배열에 넣어 줄 요소 }) 배열 내의 모든 요소 하나 하나에 순서대로 콜백함수를 실행한 결과를 모아서 새로운 배열을 반환 callback 함수는 1) 처리할 요소, 2) 처리할 요소의 인덱스, 3) map을 호출한 배열 의 세 가지 파라미터를 가짐 처리할 요소 current Value 는 required 처리할 요소의 인덱스 I 는 optional map을 호출한 배열 array 는 optional map() 메소드는 호출한 배열의 값을 변형하지 않지만 콜백함수에 의해서 변형될 수는 있음 map() 시작한 이후 배열에 추가되는 요소들은 콜백함수의 적용을 받지 ..

01. querySelector() method querySelector() 메소드를 활용하면 특정 CSS Selector를 연결시켜 각 element 의 속성들을 동적으로 변경할 수 있다. 각 Selector의 리턴 예시 tag > document.querySelector("example"); class > document.querySelector(".example"); id > document.querySelector("#example"); 특정 class 를 포함하고 있는 첫 번째 tag > document.querySelector("p.example"); parent tag 로 감싸고 있는 첫 번째 tag > document.querySelector("div > p"); target 속성을 가지고..