[JS] 배열 methods (1)

🖍️ Array methods

push ( ) : 뒤에 삽입
pop ( ) : 뒤에 삭제
unshift ( ) : 앞에 삽입
shift ( ) : 앞에 삭제

💟 arr.splice (n, m) : 특정 요소 지움

• n번째부터 m개 지우기

let arr = [1, 2, 3, 4, 5];
arr.splice(1, 2);

console.log(arr);  // [1, 4, 5]

💟 arr.splice (n, m, x) : 특정 요소 지우고 추가

let arr = [1, 2, 3, 4, 5];
arr.splice(1, 3, 100, 200);

console.log(arr);  // [1, 100, 200, 5]

--------------------------------------------------------------

❓ 지우지 않는다면? 
let arr = ["나는", "철수", "입니다"];
arr.splice(1, 0, "대한민국", "소방관");

console.log(arr);  // ["나는", "대한민국", "소방관", "철수", "입니다"]

💟 arr.splice ( ) : 삭제된 요소 반환

let arr = [1, 2, 3, 4, 5];
let result = arr.splice(1, 2);

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

💟 arr.slice (n, m) : n부터 m까지 반환

• m은 포함되지 않음
• m은 안쓰면 끝까지
• 괄호 안에 아무것도 넣지 않으면 배열이 복사됨

let arr = [1, 2, 3, 4, 5];
arr.slice(1, 4);    // [2, 3, 4]

let arr2 = arr.slice();

console.log(arr2);  // [1, 2, 3, 4, 5]

💟 arr.concat (arr2, arr3 ..) : 합쳐서 새배열 반환

let arr = [1, 2];

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

📌 배열이 아닌 값도 전달됨
arr.concat([3, 4], 5, 6);  // [1, 2, 3, 4, 5, 6]

💟 arr.forEach (fn) : 배열 반복

• 함수를 인수로 받음
• 보통 첫번째, 두번째만 사용

let users = ['Mike', 'Tom', 'Jane'];

users.forEach((item, index, arr) => {
  // ... 
});

---------------------------------------

let users = ['Mike', 'Tom', 'Jane'];

users.forEach((name, index) => {
  console.log(name);  
  // Mike Tom Jane
  console.log(`${index} ${name}`);
  // 0 Mike  1 Tom  2 Jane
  console.log(`${index}. ${name}`);
  // 0. Mike  1. Tom  2.Jane
  console.log(`${index + 1}. ${name}`);
  // 1. Mike  2. Tom  3.Jane
});

💟 arr.indexOf / arr.lastIndexOf

• 문자열의 index와 사용법 동일
• 해당 index를 반환하고 없으면 -1 반환

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

arr.index(3);        // 2
arr.index(3, 3);     // 7  
// → 인수가 두개인 경우 두번째 인수는 시작 위치를 의미
arr.lastIndexOf(3);  // 7  
// → 끝에서 부터 탐색, 끝에서 첫번째 만나는 3 위치

💟 arr.includes ( ) : 포함하는지 확인

• index 확인 필요하지 않고 포함하는지 여부만 확인할때
• true / false 로 반환

let arr = [1, 2, 3];

arr.includes(2);  // true
arr.includes(8);  // false

💟 arr.find (fn) / arr.findIndex (fn) : 만족하는 첫번째 요소만 반환

• indexOf 처럼 찾는다는 의미는 동일하지만 복잡한 연산이 가능하도록 함수를 전달할 수 있음 (짝수 찾기, 성인 찾기 등)
• ❗️ 첫번째 true 값만 반환하고 끝, 없으면 undefined를 반환

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

const result = arr.find((item) => {
  return item % 2 === 0;
});

console.log(result);  // 2

-----------------------------------------------

📍 find  
let userList = [
  { name: 'Mike', age: '30'},
  { name: 'Tom', age: '27'},
  { name: 'Jane', age: '13'},
];  

const result = userList.find((user) => {
  if (user.age < 19) {
    return true;
  }
  return false;
});

console.log(result);  // {name: "Jane", age: 13}


📍 findIndex
let userList = [
  { name: 'Mike', age: '30'},
  { name: 'Tom', age: '27'},
  { name: 'Jane', age: '13'},
];  

const result = userList.findIndex((user) => {
  if (user.age < 19) {
    return true;
  }
  return false;
});

console.log(result); // 2 → 조건에 맞는 index 찾기

💟 arr.filter (fn) : 만족하는 모든 요소를 배열로 반환

• find와 사용법은 동일

let arr = [1, 2, 3, 4, 5, 6];

const result = arr.filter((item) => {
  return item % 2 === 0;
});

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

💟 arr.reverse ( ) : 역순으로 재정렬

• 최근 가입된 user 보기, 게시판 최근 게시글 보기 등에 사용

let arr = [1, 2, 3, 4, 5];
arr.reverse();  // [5, 4, 3, 2, 1]

💟 arr.map (fn) : 함수를 받아 특정 기능을 시행하고 새로운 배열을 반환

• 실무에서 많이 사용

let userList = [
  { name: 'Mike', age: '30'},
  { name: 'Jane', age: '27'},
  { name: 'Top', age: '10'},
];  

let newUserList = userList.map((user, index) => {
  return Object.assign({}, user, {
    isAdult: user.age > 19,
  });
});

console.log(newUserList);
// (3) [{…}, {…}, {…}]
// 0: {name: 'Mike', age: '30', isAdult: true}
// 1: {name: 'Jane', age: '27', isAdult: true}
// 2: {name: 'Top', age: '10', isAdult: false}
// length: 3
// [[Prototype]]: Array(0)

💟 join ( ) : 배열을 합쳐서 문자열로 반환

// ❗️arr.join() 괄호 안에 내용을 넣지 않으면 쉼표로 구분
let arr = ["안녕", "나는", "철수야"];
let result = arr.join();

console.log(result);  // 안녕, 나는, 철수야

----------------------------------------------

let arr = ["안녕", "나는", "철수야"];

let result = arr.join("  ");  // 공백
let result2 = arr.join("-");  // 하이픈

console.log(result);          // 안녕 나는 철수야
console.log(result2);          // 안녕-나는-철수야

💟 split ( ) : 문자열을 나눠 배열로 반환

// 📍 쉼표를 기준으로 배열을 만들어줌
const users = "Mike,Jane,Tom,Tony";
const result = users.split(",");

console.log(result);  // ["Mike", "Jane", "Tom", "Tony"]

--------------------------------------------------------

// 📍 빈 문자열을 기준으로 배열을 만들어줌
let str = "Hello, My name is Mike.";
const result = str.split("");

console.log(result);  
// ["H", "e", "l", "l", "o", ",", " ", "M", "y" ...]

💟 Array.isArray ( ) : 배열 유무 확인

• JavaScript에서 배열은 객체형에 속함, 배열인지 객체인지 정확이 확인하기 위함

// object
let user = {
  name: "Mike",
  age : 30,
};
// array
let userList = ["Mike", "Tom", "Jane"];

console.log(typeof user);      // object (객체)
console.log(typeof userList);  // object (객체)

console.log(Array.isArray(user));      // false  
console.log(Array.isArray(userList));  // true