러닝 자바스크립트 8장 정리

 

배열

 

push, pop, shift, unshift

 - push, pop 각각 배열의 끝에 요소를 추가하거나 제거한다.

 - shift, unshift 각각 배열의 처음에 요소를 제거하거나 추가한다.

 

const arr = ["b", "c", "d"];

arr.push("e");     // arr = ["b", "c", "d", "e"]

arr.pop();         // "e" 제거 arr = ["b", "c", "d"]  배열의 끝 요소 제거 

arr.unshift("a"); //  arr = ["a", "b", "c", "d"] 

arr.shift();        // "a" 제거 arr = ["b", "c", "d"]  배열의 첫 요소 제거 

 

 

concat

 - concat 배열의 끝에 여러 요소를 추가한 '사본'을 반환한다. concat에 배열을 넘기면 배열을 분해하여 원래 배열에 추가한 사본을 반환한다. 

 

const arr = [1, 2, 3];

arr.concat = (4, 5, 6)      // [1, 2, 3, 4, 5, 6].  arr 변경X

arr.concat = ([4, 5, 6])    // [1, 2, 3, 4, 5, 6].  arr 변경X

arr.concat = ([4, [5, 6]]);  // [1, 2, 3, 4, [5, 6]].  arr 변경X

 

 

slice

 - 배열의 일부를 가져오고 싶을 때 사용 

 - 매개변수 두 개를 받는다.   첫번쨰 매개변수 => 어디서부터 가져올지 지정

                                      두번쨰 매개변수 => 어디까지 가져올지 지정 (바로 앞 인데스까지 가져옴)

                                                                 생략하면 배열의 마지막까지 반환한다. 

 - 음수 인덱스를 사용하면 배열의 끝에서부터 요소를 센다.

 

const arr = [1, 2, 3, 4, 5];

arr.slice(3);      // [4, 5]  arr 변경X

arr.slice(2, 4);      // [3, 4]  arr 변경X

arr.slice(-2);      // [4, 5]  arr 변경X

arr.slice(-2, -1);      // [4]  arr 변경X

 

 

splice 

 - 임의의 위치에 요소를 추가하거나 제거하게 해준다. 

 - 첫번째 매개변수 => 수정을 시작할 인덱스 지정 

 - 두번째 매개변수 => 제거할 요소의 숫자 지정 (0 = 아무 요소도 삭제하지않음)

 - 나머지 매개변수 => 배열에 추가될 요소

 

const arr = [1, 5, 7];

arr.splice(1, 0, 2, 3, 4);    // [1, 2, 3, 4, 5, 7]  arr 변경O 

arr.splice(5, 0, 6);          // [1, 2, 3, 4, 5, 6, 7]  arr 변경O 

arr.splice(1, 2);             // [2, 3] 제거 [1, 4, 5, 6, 7]  arr 변경O 

arr.splice(2, 1, 'a', 'b');    // [5] 제거 [1, 4, 'a', 'b', 6, 7] arr 변경O 

 

 

copywithin

 - 배열요소를 복사해서 다른 위치에 붙여넣고, 기존의 요소를 덮어씀 

 - 첫번쨰 매개변수 => 복사한 요소를 붙여넣을 위치 

 - 두번째 매개변수 => 복사를 시작할 위치 

 - 세번째 매개변수 => 복사를 끝낼 위치 

 - 음수를 사용하면 배열의 끝에서부터 요소를 셈 (slice와 동일)

 

const arr = [1, 2, 3, 4];

arr.copyWithin(1, 2);          // [1, 3, 4 ,4] arr 변경O

arr.copyWithin(2, 0, 2);      // [1, 3, 1, 3] arr 변경O

arr.copyWithin(0, -3, -1);    // [3, 1, 1, 3] arr 변경O  

 

 

fill

 - 정해진 값으로 배열을 채움 

 - 배열의 일부만을 채우고 싶을때는 시작 인덱스와 끝 인덱스를 지정 

 - 음수 인덱스도 사용 가능 

 

const arr = new Array(5).fill(1)      // [1, 1, 1, 1, 1]  arr 변경O

arr.fill("a");                                // ["a", "a", "a", "a", "a"]  arr 변경O

arr.fill("c", 2, 4)                          // ["a", "a", "c", "c", "a"]  arr 변경O

 

 

indexOf

 - 찾고자 하는 것과 정확히 일치하는 첫번째 요소의 인덱스 반환

 

lastIndexOf 

 - 기능은 같지만 배열의 끝에서부터 검색

 - 둘다 일치하는 것을 찾지 못하면 -1을 반환 

 

const o = {name : "Jerry"};

const arr = [1, 5, "a", o, true, 5, [1, 2], "9"];

arr.indexOf(5);         // 1 

arr.lastIndexOf(5);    // 5

arr.indexOf("a');       // 2

arr.lastindxOf ("a")    // 2  

 

findIndex

 - 보조함수를 사용해 검색조건을 지정 가능 

 - 검색을 시작하는 인덱스 지정 X

 

const arr = [{ id: 5, name : "Judith"}, { id: 7, name : "Francis" }];

arr.findIndex(o => o.id === 5);             // 0 

arr.findIndex(o => o.id === "Francis");   // 1  

arr.findIndex(o => o === 3);                // -1  

 

 

some 

 - 조건에 맞는 요소를 찾으면 검색을 멈추고 true 반환, 찾지 못하면 false 반환 

 

const arr = [5, 7, 12, 15, 17];

arr.some = (x => x%2 === 0);                             // true 

arr.some = (x => Number.isInteger(Math.sqrt(x)));    // false

 

every 

 - 배열의 모든 요소가 조건에 맞아야 true 반환, 그렇지 않으면 false 반환 (조건에 맞지않는 요소를 찾아야만 검색을 멈추고 false 반환, 조건에 맞지않는 요소를 찾지 못하면 배열 전체를 검색)

 

const arrr = [4, 6, 16, 36];

arr.every = (x => x%2 === 0);                               //true

arr.every = (x => Number.isInteger(Math.sqrt(x)));       // false

 

 - some과 every 모두 콜백 함수를 호출할때 this로 사용할 값을 두번째 매개변수로 받을 수 있다.

 

 

map 

 - 배열 요소를 변형 

 - 일정한 형식의 배열을 다른 형식으로 바꿀 떄 사용 

 - 사본을 반환 (원래 배열 변화X)

 

const cart = [ { name : "Widget", price : 9.95}, { name : "Gadget", price : 22.95 } ];

const name = cart.map(x => name);     // ["Widget", "Gadget"]

const prices = cart.map(x => x.price);    // [9.95, 22.95]

 

const arr = [1,2,3,4]

 

const arr1 = arr.map(function(x) {

      return x+1;

});    // [2,3,4,5]

 

filter 

 - 배열에서 필요한 것들만 남길 목적으로 사용 

 - 사본을 반환하며 새 배열에는 필요한 요소만 남음 

 - 어떤 요소를 넘길지 판단하는 함수를 넘김 

 

const arr2 = arr.filter(function(x) {

    return x%2 != 0;

});    // [1,3]

 

 

reduce 

 - 배열 자체를 변형

 - 첫번쨰 매개변수 => 배열이 줄어드는 대상인 전 대상의 결과값

 - 두번째 매개변수 => 콜백의 순서대로 배열요소, 현재 인덱스, 배열 을 받음 

 

const arr = [5, 7, 2, 4];

const sum = arr.reduce((a, x) => a += x, 0);

 

 ==> a의 초깃값 = 0, x = 5  함수는 a와 5의 합을 반환 이 값이 다음 단계에서 a의 값이 됨  

 ==> 반복, 마지막에 나온 값이 reduce의 값이되고 sum에 할당

 ==> 누적값이 undefined로 시작하면 첫번쨰 배열 요소를 초깃값으로 보고 두번째 요소에서 부터 함수 호출

(책의 예제 이해하기 추가 학습)