[JavaScript] Array(배열) 모든 메서드

Array - push, pop, unshift, shift (원본훼손 O)

1. arr.push(값)
   - 배열 요소 추가 (원본훼손 O)
   - 배열 '맨 끝'에 1개 이상의 요소를 추가할 수 있습니다.
   - 요소가 추가된 배열의 길이를 반환합니다.

const arr = ['h', 'e', 'l'];
const ele = 'l';

arr.push(ele);
console.log(arr); // [ 'h', 'e', 'l', 'l' ]

const newArr = arr.push('o', '!');
console.log(arr); // [ 'h', 'e', 'l', 'l', 'o', '!' ] // 원본훼손 O
console.log(newArr); // 6 // 길이를 반환

2. arr.pop()
   - 배열 요소 삭제 (원본훼손 O)
   - 배열 '마지막 요소'를 제거합니다.
   - 삭제한 요소를 반환합니다.

const arr = ['h', 'e', 'l'];

arr.pop();
console.log(arr); // [ 'h', 'e' ]

const newArr = arr.pop();
console.log(arr); // [ 'h' ] // 원본훼손 O
console.log(newArr); // e // 삭제한 요소를 반환

3. arr.unshift(값)
   - 배열 요소 추가 (원본훼손 O)
   - 배열 '맨 앞'에 1개 이상의 요소를 추가할 수 있습니다.
   - 요소가 추가된 배열의 길이를 반환합니다.

const arr = ['h1', 'h2', 'h3'];
const ele = 'h4';

arr.unshift(ele);
console.log(arr); // [ 'h4', 'h1', 'h2', 'h3' ]

const newArr = arr.unshift('h5', 'h6');
console.log(arr); // [ 'h5', 'h6', 'h4', 'h1', 'h2', 'h3' ] // 원본훼손 O
console.log(newArr); // 6 // 길이를 반환

4. arr.shift()
   - 배열 요소 삭제 (원본훼손 O)
   - 배열 '첫번째 요소'를 제거합니다.
   - 삭제한 요소를 반환합니다.

const arr = ['h1', 'h2', 'h3'];

arr.shift();
console.log(arr); // [ 'h2', 'h3' ]

const newArr = arr.shift();
console.log(arr); // [ 'h3' ] // 원본훼손 O
console.log(newArr); // h2 // 삭제한 요소를 반환

Array - slice, splice

1. arr.slice(시작i, 끝i - 1)
   - 배열의 start 부터 end 까지(end 미포함) 추출합니다. (원본훼손 X)
   - 추출한 새로운 배열을 반환합니다.
   - end 값을 넣지않으면, start ~ 마지막 요소까지 모두 추출됩니다.
   - 원본을 훼손하지 않기 때문에, 상수나 변수에 할당해서 사용합니다.
   - 참고: slice는 Array, String 모두 사용가능 합니다.

const test = [1, 2, 3, 4, 5, 6, 7, 8, 9];

const check1 = test.slice(1, 7);
console.log(check1); // [ 2, 3, 4, 5, 6, 7 ] // 시작으로 i=1 ~ 끝으로 i=7 설정 -> 결과는 [1]~[6]까지 추출된다

const check2 = test.slice(1); // 끝i를 안 넣으면, 시작i부터 ~ 마지막 요소까지 모두 추출된다
console.log(check2); // [ 2, 3, 4, 5, 6, 7, 8, 9 ] // 시작으로 i=1 ~ 끝으로 마지막 요소 설정 -> 결과는 [1]~마지막 인덱스까지 추출된다

console.log(test); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ] // 원본훼손 X

2. arr.splice(시작i, 없앨i갯수)
   - 배열의 기존 요소를 '삭제' or '교체' 할 수 있습니다. (원본훼손 O)
   - 기존 배열에 '새 요소를 추가' 할 수 있습니다. (원본훼손 O)
   - 추출한 배열을 반환합니다.
   - end 값을 넣지않으면, start ~ 마지막 요소까지 모두 추출됩니다.
   - 참고: splice는 Array만 사용가능 합니다. (split은 String만 사용가능)

const test = [1, 2, 3, 4, 5, 6, 7, 8, 9];

// 삭제
const check1 = test.splice(4, 3);
console.log(check1); // [ 5, 6, 7 ] // 시작으로 i=4 & 없앨 i갯수를 3개로 설정 -> 결과는 [4]~[6]까지 추출된다
console.log(test); // [ 1, 2, 3, 4, 8, 9 ] // 원본훼손 O

const check2 = test.splice(2); // 없앨i갯수를 안 넣으면, 시작i부터 ~ 마지막 i까지 모두 추출됩니다
console.log(check2); // [ 3, 4, 8, 9 ] // 시작으로 i=4 & 없앨 i갯수를 마지막 i까지로 설정 -> 결과는 [2]~마지막 인덱스까지 추출된다
console.log(test); // [ 1, 2 ] // 원본훼손 O

// 교체
const check3 = test.splice(1, 1, 1000); // (교체 시작할 i, 교체할 i 갯수, 교체 after값)
console.log(check3); // [ 2 ] // 교체 before값을 반환합니다
console.log(test); // [ 1, 1000 ] // 원본훼손 O

const check4 = test.splice(0, 2, 2000, 2000); // (교체 시작할 i, 교체할 i 갯수, 교체 after값)
console.log(check4); // [ 1, 1000 ] // 교체 before값을 반환합니다
console.log(test); // [ 2000, 2000 ] // 원본훼손 O

// 추가
const check5 = test.splice(1, 0, 1); // (추가 시작할 i, 0, 추가할 값)
console.log(check5); // [] // 삭제 or 교체한 값이 없기 때문에 빈 배열을 반환합니다
console.log(test); // [ 2000, 1, 2000 ]

const check6 = test.splice(1, 0, 9, 9, 9); // 여러개 추가하는 것도 가능하다
console.log(check6); // []
console.log(test); // [ 2000, 9, 9, 9, 1, 2000 ]

3. 반복문을 통해 splice로 삭제 할 경우, i-- 을 사용해서 인덱스를 빼먹지 말자!

const nums = [1, 2, 3, 5, 8, 9];

// 반복문을 활용해서 nums 배열의 요소들 중 홀수를 모두 삭제해 주세요.
for (let i = 0; i < nums.length; i++) {
  if (nums[i] % 2) {
    nums.splice(i, 1); // 1번) 인덱스를 삭제하면, 인덱스가 1개씩 앞으로 땡겨지기 때문에
    i--; // 2번) 다음 인덱스를 빼먹지 않도록 추가 처리를 해줘야한다!
  }
}

Array - map, filter, reduce, forEach (배열의 모든 값을 순차적으로 접근)

1. array - map (원본훼손 X, 요소훼손 O)

1) map
- 배열의 모든 요소를 순차적으로 돌면서, 요소에 변화를 주고, 새로운 배열을 반환합니다. (결과값이 배열로 반환된다)
- map은 return이 필수입니다. map을 돌리면, 매 요소마다 return이 되고 -> return된 값들이 쌓여서 배열로 반환됩니다.

2) 기본 예시 1

// 예시 1
const arr1 = [1, 2, 3];

const newArr1 = arr1.map((item, index) => {
  return item + "번째"
});

console.log(newArr1); // [ '1번째', '2번째', '3번째' ]
console.log(arr1); // [ 1, 2, 3 ] // 원본훼손 X

// 예시 2
const arr2 = ["html", "css", "js"];

const newArr2 = arr2.map((item) => { return item.toUpperCase() + "언어" });
const newArr2 = arr2.map((item) => item.toUpperCase() + "언어"); // 1줄일 경우에는 return 생략가능

console.log(newArr2); // [ 'HTML언어', 'CSS언어', 'JS언어' ]
console.log(arr2); // [ 'html', 'css', 'js' ] // 원본훼손 X

3) 기본 예시 2

const quiz = ['YUMMY', 'COUNT', 'ABUSE', 'SOUND', 'SWING'];

// 예시 1
const answer = quiz.map((item, index) => {
  return item[index]; // 1번) 요소 값의 일부만 반환할 수도 있고,
});

console.log(answer); // [ 'Y', 'O', 'U', 'N', 'G' ]

// 예시 2
const check = quiz.map((item, index) => {
  return item[index] + item[index]; // 2번) 요소를 변형해서 반환할 수도 있다
});

console.log(check); // [ 'YY', 'OO', 'UU', 'NN', 'GG' ] // 3번) 단, 모든 요소에 대한 값을 가져온다. 일부만 가져오고 싶으면 filter 사용하기.

2. array - filter (원본훼손 X, 요소훼손 X)

1) filter
- 배열의 모든 요소를 순차적으로 돌면서, 특정한 조건을 만족하는 모든값을 모아, 새로운 배열을 반환합니다. (결과값이 배열로 반환된다)
- filter는 return이 필수입니다. filter를 돌리면, 조건을 만족하는 값들만 return이 되고 -> return된 값들이 쌓여서 배열로 반환됩니다.

2) 기본 예시

const arr = [1, 2, 3, "html", "css", "js"];

// 예시 1
const newArr = arr.filter((item) => {
  // 타입을 비교할때 타입을 ""로 꼭 감싸줘야한다.
  if (typeof item === "number") return item;
});
const newArr = arr.filter(item => typeof item === "number"); // 1줄일 경우에는 return 생략가능

console.log(newArr); // [ 1, 2, 3 ]
console.log(arr); // [ 1, 2, 3, 'html', 'css', 'js' ] // 원본훼손 X


// 예시 2
const isNumber = function (item) {
  if (typeof item === "number") return item;
};

const newArr = arr.filter(isNumber); // 새 변수에, 함수(식별자).

console.log(newArr); // [ 1, 2, 3 ]
console.log(arr); // [ 1, 2, 3, 'html', 'css', 'js' ]

// 예시 3
const nums = [1, 2, 3, 4, 5, 6];
const result = nums.filter((item) => {
  return item > 3; // return에 조건을 넣으면서, 동시에 반환할 수도 있다
});

console.log(nums); // [1, 2, 3, 4, 5, 6]
console.log(result); // [ 4, 5, 6 ]

3) 심화 예시

// 1. this 사용 예시
const nums = [1, 2, 3, 4, 5, 6];
const result = nums.filter(function(item) { // this를 사용할때는, 화살표함수 X
  return item % this.key === 0
}, {key: 2});

console.log(result); // [ 2, 4, 6 ]

// 2. 검색 조건에 따른 배열 필터링 예시
const fruits = ['apple', 'banana', 'orange', 'melon'];
function result(value) { // 2번) value에 'o'가 들어가고
  return fruits.filter((fruit) => {
    return fruit.toLowerCase().indexOf(value) > -1; // 3번) fruit에 'o'가 포함되어 있다면 -> fruit에 'o'의 인덱스가 반환되다.
    // 4번) indexOf는 만약 없다면 -1이 반환되기 때문에, > -1 은 인덱스가 있다는 뜻으로 필터링을 건것이다.
  });
};

console.log(result('o')); // [ 'orange', 'melon' ] // 1번) 문자열 'o'가 포함된 과일만 배열로 반환 받고 싶다면?
console.log(fruits); // [ 'apple', 'banana', 'orange', 'melon' ] // 원본훼손 X

// 3. 배열 안 객체 예시
const information = [
  { name: 'min', age: 10 },
  { name: 'kim', age: 20 },
  { name: 'lee', age: 30 }
];

const result = information.filter((person) => {
  return person.age > 20
});

console.log(result); // [ { name: 'lee', age: 30 } ]

function check(value) {
  return information.filter((person) => {
    return person.name.toLowerCase().indexOf(value.toLowerCase()) > -1
  });
};

console.log(check('i')); // [ { name: 'min', age: 10 }, { name: 'kim', age: 20 } ]

3. array - reduce (원본훼손 X)

1) reduce
- 배열의 모든 요소를 순차적으로 돌면서, 각 요소에 함수를 실행하고, 새로운 배열 or 값을 반환합니다.
- 결과값이 무조건 배열로 반환되지는 않습니다. 마지막 total값이 결과값으로 반환됩니다.
- reduce는 return이 필수입니다. reduce를 돌리면, return 값이 다음 total값으로 들어갑니다.

2) 기본 예시

// 기본 구성
function test(...nums) {
  return nums.reduce((누적값, 현재값, 인덱스) => {
    return 누적값 + 현재값; // 돌때마다 이 값이 누적값에 들어간다
  }, 초기값); // 배열이 첫번째 돌때, 이 초기값이 누적값에 들어가게 된다
};

// 예시 1
function test(...nums) {
  return nums.reduce((total, now, index) => {
    return total + now; // return 뒤에 있는 값이 total에 들어가는것!
  }, 0);
};

console.log(test(2, 4, 6, 8, 10)); // 30

// 예시 2
function test(...nums) {
  return nums.reduce((total, now) => total + now, 0); // 한줄로 사용할때는 return 생략가능
};

console.log(test(2, 4, 6, 8, 10)); // 30

// 비교 예시 (예시 1, 2를 for문 버전으로)
function test(...nums) {
  let result = 0;

  for (let i = 0; i < nums.length; i++) {
    result = result + nums[i];
  }
  
  return result;
};

console.log(test(2, 4, 6, 8, 10)); // 30

3) 심화 예시

const finish = ["A", "B", "C", "D"];
const submit = ["B", "C", "D", "E"];

function solution(finish, submit) {
  let check;
  
  check = finish.reduce((total, now) => {
    total[now] = (total[now] || 0) + 1;
    return total;
  }, {});
  console.log(check); // { A: 1, B: 1, C: 1, D: 1 }

  check = submit.reduce((total, now) => {
    total[now] = (total[now] || 0) + 1;
    return total;
  }, check); // 1번) 기존 데이터를 날리지 않고, '기존 check 객체에 + 새 check 객체를' 하고 싶을때 -> 초기값을 해당 객체로.
  console.log(check); // { A: 1, B: 2, C: 2, D: 2, E: 1 }

  const arr = Object.entries(check); // 2번) 객체 -> 배열
  console.log(arr); // [ [ 'A', 1 ], [ 'B', 2 ], [ 'C', 2 ], [ 'D', 2 ], [ 'E', 1 ] ]

  let answer = 0;
  for (let i = 0; i < arr.length; i++) {
    if (arr[i][1] === 2) answer = answer + 1;
  };

  return answer; // 3
};

solution(finish, submit);

4) 비교 예시 (동일한 결과를 낸다)

// 1. reduce
const voteCounter = votes.reduce((total, now) => { // votes는 사람이름이 담긴 배열
  total[now] = (total[now] || 0) + 1;
  return total;
}, {});

console.log(voteCounter); // { '이재식': 17, '이규하': 23 }

// 2. 기본 for문
const voteCounter = {};

for (const name of votes) { // votes는 사람이름이 담긴 배열
  voteCounter[name] = (voteCounter[name] || 0) + 1;
};

console.log(voteCounter); // { '이재식': 17, '이규하': 23 }

4. array - forEach (원본훼손X + 원본훼손O)

1) forEach
- 배열의 모든 요소를 순차적으로 돌면서, 각 요소에 함수를 실행합니다.
- forEach에서는 return 문을 사용하지 않습니다. (결과값이 없습니다)

2) 기본 예시

const nums = [ 1, 1, 1, 1, 1, 1 ] // 1번) forEach 기본속성은 원본훼손 X

nums.forEach((item, index) => {
  item = 3
});

console.log(nums); // [ 1, 1, 1, 1, 1, 1 ]

const itemLists = [
  { id: 1, price: 100}, // 2번) 하지만, 배열안에 객체가 있을 경우에는
  { id: 2, price: 100},
  { id: 3, price: 100},
];

itemLists.forEach((item) => {
  item.price = 200 // 3번) 이런식으로 재할당을 해주면 -> 원본훼손 O
});

console.log(itemLists); // [ { id: 1, price: 200 }, { id: 2, price: 200 }, { id: 3, price: 200 } ]