JavaScript DAY10 (2022.11.14)

/* JavaScript DAY10 2022.11.14 */
/* Array methods (renewal) - 기존 글 메소드도 일부분 포함 */

/* ----------------------------------------------------------- */

// arr.splice(n, m): 특정 요소를 지운다. (n부터 m개를 지움) 중요도(*****)
let arr1 = [1, 2, 3, 4, 5];
arr1.splice(0, 3) // [1, 2, 3] <= 삭제된 요소를 배열로 반환한다.
arr1; // [4, 5]


// arrsplice(n, m, x): 특정 요소를 지우고 추가한다.
let arr2 = [1, 2, 3, 4, 5];
arr2.splice(0, 3, "갑자기 준영"); // [1, 2, 3]
arr2; // ['갑자기 준영', 4, 5]

// 두번 째 인수에 0을 주면, 아무것도 지우지 않고 추가만 한다.
let arr3 = [1, 2, 3, 4, 5];
arr3.splice(1, 0, "중간에 준영껴버리기"); // [] <= 지울 요소가 없으니, 빈 배열을 반환한다.
arr3; // [1, '중간에 준영껴버리기', 2, 3, 4, 5]

/* ----------------------------------------------------------- */

// arr.slice(n, m): splice와 비슷하게 생겼지만 보다 간단하다. n부터 m까지를 반환한다. (요소 삭제 X) 중요도(*****)
// 주의 할 점은 m을 포함하지 않고, 그 앞까지만을 반환한다는 점이다.
let arr4 = [1, 2, 3, 4, 5];
arr4.slice(0, 3); // [1, 2, 3] <= index 0 ~ 2 까지를 배열로 반환한다.
arr4; //

// 만약 괄호 안에 아무것도 넣지 않으면, 배열을 그대로 복사할 수 있다.
let arr5 = [1, 2, 3];
let arr6 = arr5.slice();
arr6; // [1, 2, 3];

/* ----------------------------------------------------------- */

// arr.concat(arr2, arr3): 배열을 합쳐서 새로운 배열을 반환한다.
let arr7 = [1, 2, 3];
arr7.concat([4, 5]); // [1, 2, 3, 4, 5]
arr7.concat([4, 5], [6, 7]); // [1, 2, 3, 4, 5, 6]

// 3, 4는 배열 5와 6은 각각 전달해도 반환하는 값은 같다.
arr7.concat([4, 5], 6, 7); // [1, 2, 3, 4, 5, 6, 7]

/* ----------------------------------------------------------- */

// arr.forEach(fn): 배열 반복, 함수를 인수로 받고 세개의 매개변수를 받는다. (보통 두개의 매개변수만 사용한다.)

//   let exArr = ['조', '준', '영'];
//     exArr.forEach((item, index, arr) => {
//                 // '조'   '0'  'exArr'
//   }); 

let arr8 = ['조', '준', '영', '최', '고', '다'];
const func1 = arr8.forEach((el, idx) => {
  console.log(`index ${idx}: ${el} <- element`);
});
/*
  'index 0: 조 <- element'
  'index 1: 준 <- element'
  'index 2: 영 <- element'
  'index 3: 최 <- element'
  'index 4: 고 <- element'
  'index 5: 다 <- element'
*/

/* ----------------------------------------------------------- */

// arr.indexOf / arr.lastIndexOf: 문자열의 indexOf와 사용법이 같다.0
let arr9 = [1, 2, 3, 4, 5, 1, 2, 3];

arr9.indexOf(3); // 2 <= 3이 위치한 인덱스 위치를 반환한다.
arr9.indexOf(3, 3); // 7 <= 인덱스 3부터 3을 찾아서, 3이 위치한 인덱스 위치를 반환한다.
arr9.lastIndexOf(3); // 7 <= 배열 끝에서 부터 3을 찾아서, 3이 위치한 인덱스 위치를 반환한다. 

/* ----------------------------------------------------------- */

// arr.includes(): 포함하는지 확인한다. 
let arr10 = [1, 2, 3];

arr10.includes(2); // true
arr10.includes(5); // false

/* ----------------------------------------------------------- */

// arr.find(fn) / arr.findIndex(fn): indexOf 처럼 찾는다는 의미는 같지만, 좀더 복잡한 연산을 위해 함수를 인자로 받는다.
// 다음과 같이 배열에서 짝수인 수를 찾을 수 도 있다.
// 주희 할 점은 첫 번째 ture 값만 반환하고 끝이난다. 만약에 없다면 undefind를 반환한다.
// findIndex(fn)은 해당 인덱스를 반환하며, 없으면 -1을 반환한다.
let arr11 = [1, 2, 3, 4, 5];

const result1 = arr11.find((el) => {
  return el % 2 === 0;
});
console.log(result1); // 2

// 다음과 같이 배열이 객체의 형태인 경우에는 indexOf로는 찾기 힘들기 때문에, find 메소드를 활용하는 것이 좋다. (그냥 이걸 써라)
let arr12 = [
  { name: '준영', age: 26 },
  { name: '엥엥츈', age: 25 },
  { name: '곽두팔', age: 3 },
];

const result2 = arr12.find((el) => {
  if(el.age < 10){
    return true;
  }
  return false;
});
console.log(result2); // { name: '곽두팔', age: 3 }

// 위의 함수를 findIndex로 바꿔서 사용해 보자!
const result3 = arr12.findIndex((el) => {
  if(el.age < 10){
    return true;
  }
  return false;
});
console.log(result3); // 2 <= 조건의 맞는 인덱스를 반환한다!!

/* ----------------------------------------------------------- */

// arr.filter(fn): 조건을 만족하는 모든 요소를 배열로 반환한다. <= 조건에 맞는 요소를 하나만 찾던 find와는 차원이 다른 모습이다.
// 중요도(*****)
let arr13 = [1, 2, 3, 4, 5, 6, 7, 8];

const result4 = arr13.filter((el) => {
  return el % 2 === 0;
});
console.log(result4); // [2, 4, 6, 8] <= 짝수를 전부 찾아서 하나의 배열로 반환한다.

/* ----------------------------------------------------------- */

// arr.reverse(): 역순으로 배열을 재정렬한다.
let arr14 = [1, 2, 3];
arr14.reverse(); // [3, 2, 1] <= 최근 가입된 유저 or 게시판 글 순으로 정렬하거나 등등 응용하기가 좋다.

/* ----------------------------------------------------------- */

// arr.map(fn): 함수를 받아 특정 기능을 시행하고, 새로운 배열을 반환한다. 중요도(*****)
// 응용으로 배열이있는데 매번 나이를 확인하기 귀찮아서, isAdult라는 프로퍼티를 추가한 배열을 map을 이용해서 만들어보자!
let arr15 = [
  { name: '준영', age: 26 },
  { name: '엥엥츈', age: 25 },
  { name: '곽두팔', age: 3 },
];

let newArr15 = arr15.map((el, idx) => {
  // 객체 메소드 배운 내용을 써먹어보자! <= 두개의 객체를 합치는 메소드이다.
  return Object.assign(el, {
    isAdult: el.age > 19,
  });
});
console.log(newArr15);
/*
    [
      { name: '준영', age: 26, isAdult: true },
      { name: '엥엥츈', age: 25, isAdult: true },
      { name: '곽두팔', age: 3, isAdult: false }
    ]
*/

/* ----------------------------------------------------------- */

// 추가로 배열인지 아닌지를 확인하려면, Array.isArray()를 사용해야 한다.
// 자바스크립트에서 배열도 객체이기 때문에 typeof를 사용하게 된다면 매우 절단난다.
let test1 = [1, 2, 3];
let test2 = { a: 1, b: '2'};

typeof test1; // 'object'
typeof test2; // 'object'

Array.isArray(test1); // true
Array.isArray(test2); // false

/* ----------------------------------------------------------- */

// arr.sort(): 배열을 재정렬하고 배열 자체가 변경된다. 인수로 졍렬 로직을 담은 함수를 받는다.
let arr16 = [1, 2, 5, 4, 7];
let arr17 = ['a', 'g', 'e', 'b'];
let arr18 = [3, 18, 22, 80, 9];

arr16.sort(); // 매우 잘 정렬된다.
arr17.sort(); // 아주 훌륭하다.
arr18.sort(); // 뭔가 이상하다.
// 18과 22의 앞자리가 1과 2로 판단하여 정렬이 된 것이다. 이럴 때는 정렬 로직을 담은 함수를 인수로 받아줘야한다!

arr18.sort(function(a, b){
  console.log(a,b) // 출력 결과는 설명과 함께 아래에서...
  return a - b;
});
// [ 3, 9, 18, 22, 80 ] <= 잘 정렬된다! 근데 이게 뭔 소릴까?
/*
  두 요소를 전달하고,크기를 비교해서 양수인지 0인지 음수인지만 알려주면 된다.
  a가 크면 양수를 리턴하고 같으면 0, a가 b보다 작으면 음수를 리턴 할 것이다.
  
  내부 로직은 대략 아래와 같이 동작한다.
  a와 b를 비교해서 a가 작으면 a를 앞으로 보낼 것이다.
  0을 반환하면 그대로 있는다.
  반대로 a가 크면 b가 더 작다는 말이니까 b를 앞으로 보낼 것이다.
  
  위의 함수에서 콘솔을 a, b를 찍은 결과를 보면 아래와 같으니 참고해서 보자.
  
  22 18
  3 22
  3 22
  3 18
  80 18
  80 22
  9 22
  9 18
  9 3
*/

/* ----------------------------------------------------------- */

// arr.reduce(): 인수로 함수를 받는다. (누적 계산 값, 현재 값) => { return 계산 값 };  중요도(*****)
let arr19 = [1, 2, 3, 4, 5];
const result5 = arr19.reduce((prev, current) => {
  return prev + current; // 0 + 1, 1 + 2, 3 + 3, 6 + 4...
}, 0) // <= 초깃값을 나타내며 아무것도 주지 않으면, 첫번째 인덱스 값이 초깃값이 된다.
console.log(result5) // 15

// 이번엔 좀 더 실용적인 예로 가보자 <= map이나 filter를 사용하지 말고, reduce를 이용하여 배열을 반환 해 보자.
let userList = [
  { name: '조준영', age: 26},
  { name: '조준탄', age: 43},
  { name: '엥엥츈', age: 28},
  { name: '조찌', age: 11},
  { name: '조지리', age: 50}
];

let result6 = userList.reduce((prev, current) => {
  // 19살 이상의 사람만 뽑아서 이름의 배열을 만든다.
  if(current.age > 19){
    prev.push(current.name);
  }
  return prev
}, []);
console.log(result6)

// arr.reduceRight(): reduce와 동일한 기능을 하지만, 배열 우측부터 연산을 한다는 차이점이 있다!