Array_method

📌for in문

// 객체
const obj  {
   name: “Mike”,
   age: 30,
};

// 객체를 순회하며 키 프로퍼티 출력
for (let key in obj) {
  console.log(key); // name age
} ;

// 객체를 순회하며 키에 해당하는 값(value) 출력
for (let key in obj) {
  console.log(obj[key]);
};

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

// 배열을 순회하며 index 값을 출력
for (let index in arr) {
  console.log(index);  // 0 1 2 3 4
};

📌 for of 문

// 배열을 순회하며 index에 해당하는 요소를 출력
for (let value of arr) {
  console.log(value);  // 1 2 3 4 5 
}

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

요소와 인덱스를 둘다 참조 하고자 할 때(?) 사용

let users = [‘Mike’, ‘Tom’, ‘Jane’];

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

// 첫 번째 인자는 배열의 요소
// 두 번째 인자는 배열의 인덱스
// 세 번째 인자는 배열 자체 (이 인자는 잘 사용하지 않음)

users.forEach((item, index) => {
  console.log(`${index + 1}. ${item});
});

// 1. Mike 2. Tom 3. Jane

📌 arr.indexOf / arr.lastIndexOf

• 문자열의 indexOf와 동일함.
• 발견하면 해당 요소가 있는 인덱스를 반환함.

let arr = [1, 2, 3, 4, 5, 1, 2, 3];
arr.indexOf(3); // 2, 배열의 요소중 3이 있는 인덱스인 2를 반환
arr.indexOf(3, 3); // 7, 인수가 두 개인 경우 두 번째 인수는 탐색 시작 위치를 의미

// 끝에서 부터 탐색하고 싶다면 lastIndexOf를 사용

arr.lastIndexOf(3); // 7

📌 arr.includes() : 배열에 포함하는지만 확인할때 사용

arr.includes(7);  // false
arr.includes(3); // true

📌 arr.find(fn) / arr.findIndex(fn)

• indexOf 처럼 찾는다는 의미는 동일하지만 좀 더 복잡한 연산이 가능하도록 함수를 인자로 받음
• 예를 들어, 짝수를 찾는다 혹은 성인을 찾는다 등등
• 첫 번째 true 값만 반환하고 끝냄
• 만약 없으면 undefined를 반환
• findIndex는 해당 인덱스를 반환하지만 없으면 -1을 반환

let arr = [1, 2, 3, 4, 5];
const result = arr.find((item) => {
  return item % 2 === 0; // 짝수를 찾음.
});

console.log(result);  // 2, 리턴값이 첫번째 true값(요소)을 반환

let userList = [
  { name: ‘Tom’, age: 30 },
  { name: ‘Brown’, age: 23 },
  { name: ‘Jane’, age: 10 },
];

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

console.log(notAdult); // { name: ‘Jane’, age: 10 }

• find를 findIndex로 바꾸어 사용하면 첫번째 true에 해당하는 index를 반환하고 종료한다. (사용 방법은 동일하다는 말임)

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

• 조건에 만족하는 모든 요소를 배열로 반환한다.

const userInfo = [
   { name: ‘Tim’, age: 31 },
   { name: ‘Jane’, age: 28 },
   { name: ‘Dany’, age: 10 },
];

const findAdult = userInfo.filter((user) => {
    if(user.age > 19) {
      return true;
    } return false;
});

console.log(findAdult);  // { name: ‘Tim’, age: 31 }, { name: ‘Jane’, age: 28 }

📌 arr.reverse() : 배열을 역순으로 재정렬

• 최근 가입한 유저를 보여준다거나, 게시판에서 가장 최근에 작성된 글을 보여줄 때 사용

let arr = [a, b, c, d, e];
const reverseArr = arr.reverse();

console.log(reverseArr);  // [e, d, c, b, a];

📌 arr.map(fn) :

• 기존 배열에 함수를 인자로 받아 특정 기능을 시행하고 새로운 배열을 반환 (기존 배열에 영향 X)
• 인자로 받는 함수의 첫 번째 인자는 배열
• 인자로 받는 함수의 두 번째 인자는 배열의 인덱스

let userInfo = [
{ name: ‘Tom’, age: 30 },
{ name: ‘Jane’, age: 38 },
{ name: ‘Hanse’, age: 17 },
];

let newUserInfo = userInfo.map((user, index) => {
    return Object.assign({}, user, {
        id: index + 1,
        isAdult: user.age > 19,
    });
});

console.log(newUserInfo);

// 콘솔에 찍힌 결과
[
  { name: ‘Tom’, age: 30, id: 1, isAdult: true },
  { name: ‘Jane’, age: 38, id: 2, isAdult: true },
  { name: ‘Hanse’, age: 17, id: 3, isAdult: false },
];

📌 join: 배열을 합쳐서 문자열을 만들 때 사용

let arr = [“안녕”, “나는”, “철수야”];
let result = arr.join(“-”);

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

• 배열을 문자열로 형변환
• join의 인수로 받은 값을 배열 중간에 삽입

📌 split: 문자열을 나눠서 배열로 반환

let str = “Mike,Tom,Jane,Tony”;
let result = str.split(“,”);

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

• 문자열을 인수를 기준으로 나눠 배열로 반환
• split의 인수로 받은 값을 기준으로 나눔

📌 Array.isArray() : 배열인지 아닌지 확인

let user = {
   name: ‘Tom’,
   age: 30
}

let arr = [ “Mike”, “Tom”, “Jane” ];

let result = Array.isArray(user); // false
let result2 = Array.isArray(arr); // true

• JavaScript에서 배열은 객체형이기 때문에 typeof는 배열도 객체라고 알려줌.
• 때문에 일반 객체와 배열을 구분하기 위한 메서드이다.