JS - array method

1. concat

복수의 배열을 결합해서 리턴
원본 데이터의 값 변경하지 않음

인자로 주어진 배열이나 값들을 기존 배열에 합쳐 새 배열을 반환

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]

2. join

배열을 합쳐서 문자열을 만들으면 조인을 사용

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

let result = arr.join(-);

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

3. pop

뒤에 삭제

4. push

뒤에 삽입

5. reverse

배열을 역순으로 재정렬, 최근 가입된 유저부터 보여주기, 최신글 순서로 정렬시 자주 사용

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

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

6. shift

앞에 삭제

7. slice

arr.slice(n,m)
//인덱스 n부터 m까지 반환 (m은 포함하지 않고 바로 앞자리까지)
//m을 지정하지 않으면 끝까지 반환

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

8. sort

배열 재정렬
배열 자체가 변경되니 주의
제대로된 정렬하고 싶다면 인수로 정렬 로직을 담은 함수를 받음
함수를 인수로 받는다,

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

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

// 제대로된 정렬하고 싶다면 함수를 인수로 받는다. 
let arr = [27, 8, 5, 13];

function fn(a,b){
  return a-b;
}

arr.sort(fn);

console.log(arr);

9. splice

배열의 특정 요소 지우기
arr.splice(시작요소, 개수)

//요소 지우기
let arr = [1,2,3,4,5];
arr.splice(1,2); //1번째부터 두개 삭제 
console.log(arr); // [1,4,5]

//특정 요소 지우고 추가하기
let arr = [1,2,3,4,5];
arr.splice(1,3,100,200); // 1번째부터 세개를 지우고 그 자리에 100, 200 넣기 
console.log(arr); // [1,100,200,5]

//삭제된 요소 반환
let arr = [1,2,3,4,5];
let result = arr.splice(1,2);

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

10. toString

11. unShift

앞에 삽입

12. valueOf

13. forEach

arr.forEach(fn) 배열반복

//함수를 인수로 받음.
// 함수는 세개의 매개변수가 있는데 첫번째는 해당요소, 두번째는 인덱스, 세번째는 해당 배열 자체. 보통 첫번째와 두번째만 사용
let users = ['Mike', 'Tom','Jane']
users.forEach((item, index, arr) =>{
  //code
});

let arr = ['Mike', 'Tom', 'Jane'];
arr.forEach((name, index) => {
  console.log(`${index + 1}. ${name}`);
});

14. indexOf

let arr = [1,2,3,4,5,1,2,3];
arr.indexOf(3); // 2번 자리에 있다!
arr.indexOf(3,3) // index 3부터 탐색해서 3이 어디있는지 찾아줘! 7번자리에 있다!
arr.lastIndexOf(3); // 끝에서부터 탐색, 끝에서 첫번째로 만나는 3의 인덱스 7 반환

15. includes

포함하는지 확인

let arr = [1,2,3];

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

16. find

인덱스 오브처럼 찾는다는 의미는 동일하지만 보다 복잡한 연산이 가능하도록 함수를 연결할 수 있음. (짝수를 찾는다던지, 성인을 찾는다던지)
첫번째 true값만 반환하고 끝남. 만약 없으면 undefined 반환

findIndex는 해당 인덱스를 반환함. 없으면 -1반환

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

const result = arr.find((item)=>{
  return item % 2 === 0;
}); // 짝수를 찾아서 반환함. 각 요소를 순회하며 2를 나눴을 때 나머지가 0인 요소를 찾음, 리턴값이 트루일 때 멈추고 해당 요소를 알려줌. 

console.log(result); // 2 반환

//객체가 들어있는 배열인 경우 indexOf 이용 어려움 -> find이용
let userList = [
  {name:"Mike", age:30},
  {name:"Jane", age:27},
  {name:"Tom", age:10},
  ];

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

console.log(result); // {name: "Tom", age:10}


//findIndex  사용하기 - 조건에 맞는 인덱스를 찾음 
const result = userList.findIndex((user) => {
	if(user.age <19){
    	return true;
    }	
  		return false;
});

console.log(result); // 2

16. filter

조건을 만족하는 모든 요소를 배열로 변환

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

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

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

17. map

함수를 받아 특정 기능을 시행하고 새로운 배열을 반환

let userList = [
  {name:"Mike", age:30},
  {name:"Jane", age:27},
  {name:"Tom", age:10},
];
//매번 나이를 확인하기 귀찮아서 isAdult라는 프로퍼티 추가한 새로운 배열 만들기 
let newUserList = userList.map((user, index)=>{
  return Objext.assign({}, user, {
    id: index+1,
    isAdult : user.age>19,
  });
})

console.log(newUserList);
/* 
0: {name:"Mike", age: 30, id: 1, isAdult: true}
1: {name:"Jane", age: 27, id: 2, isAdult: true}
2: {name:"Tom", age: 10, id: 3, isAdult: false}
*/

console.log(userList);
/* 기존에 있던 유저 리스트는 변경된 것이 없음 ! 
0: {name:"Mike", age:30}
1: {name:"Jane", age:27}
2: {name:"Tom", age:10}
*/

18. split

문자열을 나눠서 배열로 만들어줌

const users = "Mike,Jane,Tom,Tony";

const result = users.split(","); // 쉼표 기준으로 나눠서 배열 만듦

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

19. Array.isArray()

배열인지 아닌지 확인하는 방법

let user = {
  name: Mike",
  age: 30,
};

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

20. reduce

인수로 함수를 받음
(누적 계산값, 현재값)=> {return 계산값};

//배열의 모든 수 합치기 
let arr = [1,2,3,4,5];

//forEach 사용할 경우 
let result = 0; //초기값 0
arr.forEach((num=>{
  result+=num;
});

console.log(result); //15


//reduce 사용할 경우 
const result = arr.reduce((prev, cur)=>{
	return prev + cur; //누적된 계산값에 현재값을 더한다
},0)// 초기값은 0

console.log(result); // 15


//성인만 뽑아서 새로운 배열 만들기 
let userList = [
  {name: "Mike", age: 30},
  {name: "Tom", age: 10},
  {name: "Jane", age: 27},
  {name: "Sue", age: 26},
  {name: "Harry", age: 42},
  {name: "Steve", age: 60},
 ];

let result = userList.reduce((prev,cur)=>{
  if(cur.age > 19){
    prev.push(cur.name);
  }
  return prev;
}, []);
//초기값이 빈배열이고 19살보다 나이 많다면 배열에 푸쉬해주고 리턴함

console.log(result); // (5) ["Mike","Jane","Sue","Harry","Steve"]


//나이 다 더하기
let result = userList.reduce((prev, cur) => {
  return (prev += cur.age);
}, 0);

console.log(result); //196


//이름이 세글자인 사람만 찾기 
let result = userList.reduce((prev,cur) => {
  prev.push(cur.name);
  }
return prev;
}, []);
console.log(result); ["Tom", "Sue"]