[JavaScript] 자바스크립트 배열의 주요 메소드

1. splice

배열에서 지정된 위치에 아이템을 삭제하거나 추가할 수 있다.
splice(index, howmany, item, item, item, ...)

• index
  • 삭제/추가 발생할 인덱스

• howmany
  • 삭제할 갯수, 0을 입력하면 삭제되지 않는다.
  • 0보다 큰 값을 입력하면 index 위치부터 갯수만큼 삭제된다.

• item
  • index 위치에 추가할 값
  • 추가할 값이 없을 때는 생략할 수 있다.

2. push

• 배열의 끝에 값을 추가한다.
  push(값)

3. unshift

• 배열의 맨앞에 값을 추가한다.
  unshift(값)
• 원래 있던 값들은 전부 한칸씩 뒤로 이동한다.

4. pop

• 배열의 맨마지막 값을 삭제하고, 그 값을 반환한다.
  pop()

5. shift

• 배열의 첫번째 값을 삭제하고, 그 값을 반환한다.
  shift()
• 두번째 있던 값들부터 전부 한칸씩 앞으로 이동한다.

---

✔️ 콜백함수를 사용하는 메소드

1. forEach

• 배열의 처음부터 끝까지 배열의 모든 값을 반복처리한다.
  (forEach(function(value, index) { ... })
• 반환값 : 없음(undefined)

• 배열의 모든 값에 대해서 지정된 함수를 한번씩 실행한다.
• 배열에 저장된 모든 값을 소비할 때 사용하는 메소드다.
• function(value, index) { ... }
  • 이 함수의 배열에 각 값에 대해서 한번씩 실행되는 콜백함수
  • currentValue : 배열의 현재 값을 전달받는다.
  • index : 배열의 현재 인덱스값을 전달받는다.
• ex)

1.

let students = ["김유신", "강감찬", "이순신", "류관순"];
// 배열에 들어있는 모든 값을 출력하기 - 소비하기
students.forEach(function(name, index) {
	console.log(name);
});

2.

let numbers = [1, 3, 7, 9, 3, 9, 3, 6, 2];
// 배열에 들어있는 값의 총 합계를 계산해서 출력하기
int total = 0;
numbers.forEach(function(num) {
	total += num;
});
console.log(total);

2. filter

• 배열의 값 중에서 테스트를 통과한 값만 모아서 새로운 배열로 반환한다.
  filter(function(currentValue, index) { ... }
• 반환값 : 배열

• 배열의 모든 값에 대해서 지정된 함수를 한번씩 실행한다.
• 배열에서 특정 조건을 만족하는 값을 찾고 싶을 때 사용하는 메소드다.
• function(currentValue, index) { ... }
  • 이 함수의 배열의 각 값에 대해서 한번씩 실행되는 콜백함수
  • 이 함수는 true/false 중 하나를 반환해야 한다.
  • true를 반환하는 경우 currentValue는 새로운 배열의 요소가 된다.
• ex)

let numbers = [1, 3, 4, 9, 3, 9, 3, 6, 2];
// 짝수만 찾아내기
let evenNumbers = numbers.filter(function(num) {
	return (num % 2 == 0)
});
console.log(evenNumbers) // ---> [4, 6, 2]

3. map

• 배열에 저장된 값을 다른 값으로 변환하는 메소드
• 반환값 : 배열

• ex)

1.

let numbers = [1, 2, 3, 4];
// 배열의 값에 10을 곱한 값을 획득하기
let arr = numbers.map(function(num) {
	return num * 10;
});
console.log(arr) // ---> [10, 20, 30, 40]

2.

let user = [{no:1, name:"홍길동", email:"hong@gmail.com", tel:"010-1111-1111"},
            {no:3, name:"김유신", email:"kim@gmail.com", tel:"010-2222-2222"},
            {no:7, name:"류관순", email:"ryu@gmail.com", tel:"010-3333-3333"}]
// 배열에서 회원이름만 가져오기

let arr = user.map(function(user) {
	return user.name;
});
console.log(arr) // ---> ["홍길동", "김유신", "류관순"]

4. reduce

• 배열에 저장된 값을 하나의 값으로 줄이는 메소드
• 반환값 : 값 하나

• ex)

let numbers = [10, 20, 30, 40];

let total = 0;
return result = numbers.reduce(function(total, num) {
	return total + num;
});
console.log(result); // 100이 출력된다.

/*
	function(total, num)은 배열의 값에 대해서 한번씩 실행된다.
    	function(0, 10)  ---> 반환값 : 10  ---> total도 10이 된다.
        function(10, 20) ---> 반환값 : 30  ---> total도 30이 된다.
        function(30, 30) ---> 반환값 : 60  ---> total도 60이 된다.
        function(60, 40) ---> 반환값 : 100 ---> total도 100이 된다.
*/

5. join

• 배열의 모든 요소를 연결해서 하나의 문자열로 반환한다.

• ex)

let arr1 = ["홍길동", "김유신", "강감찬"];
let text1 = arr1.join();
// text1 --> "홍길동,김유신,강감찬"
console.log(text1);

let arr2 = ["홍길동", "김유신", "강감찬"];
let text2 = arr2.join("-");
// text2 --> "홍길동-김유신-강감찬"
console.log(text2);

---

✔️ 배열에서 요소를 찾아내는 메소드

1. indexOf(값, 검색시작위치)

• 지정된 값이 배열에서 처음으로 등장하는 인덱스를 반환한다.
  존재하지 않으면 -1을 반환한다.

let arr = [10, 20, 30, 40, 30, 20, 10, 30, 10, 20, 40];
// index값 : 2
let index = arr.indexOf(30);
// index값 : 7
let index = arr.indexOf(30, 5);

2. lastIndexOf(값)

• 지정된 값이 배열에서 마지막으로 등장하는 인덱스를 반환한다.
  존재하지 않으면 -1을 반환한다.

let arr = [10, 20, 30, 40, 30];
// index값 : 4
let index = arr.lastIndexOf(30);

3. find(function(value, index) { ... })

• 배열의 모든 값에 대해서 한번씩 실행되며, true/false값을 반환한다.
  true를 반환하는 첫번째 값이 최종결과가 된다.

let arr = [40, 35, 69, 50, 80]
// 배열의 값 중에서 60보다 크거나 같은 값 중에서 처음으로 발견되는 값
// result값 : 69
let result = arr.find(function(num, index) {
	return num >= 60;
});

4. findIndex(function(value, index) { ... })

• 배열의 모든 값에 대해서 한번씩 실행되며, true/false값을 반환한다.
  true를 반환하는 첫번째 인덱스가 최종결과가 된다.

let arr = [40, 35, 69, 50, 80]
// 배열의 값 중에서 60보다 크거나 같은 값 중에서 처음으로 발견되는 값의 인덱스
// index값 : 2
let index = arr.findIndex(function(num, index) {
	return num >= 60;
});

5. findLast(function(value, index) { ... })

• 배열의 모든 값에 대해서 한번씩 실행되며, true/false값을 반환한다.
  true를 반환하는 마지막번째 값이 최종결과가 된다.

6. findLastIndex(function(value, index) { ... })

• 배열의 모든 값에 대해서 한번씩 실행되며, true/false값을 반환한다.
  true를 반환하는 마지막번째 인덱스가 최종결과가 된다.

---

< 해당 글은 velog에서 이전하며 옮겨온 글로, 가독성이 좋지 않을 수 있는 점 양해 부탁드립니다. >

🔗 velog 버전 보기 : https://velog.io/@ryuneng2/JavaScript-자주-쓰이는-자바스크립트-배열-관련-함수