+ 추가 - JavaScript 배열 함수 정리

1. Array.isArray(object)

    ㆍobject가 배열인지 확인

Array.isArray({ a: 1, b: 2})	//false
Array.isArray([1,2,3])		// true

---

비순수 함수

2. fill()

    ㆍ배열 시작 인덱스부터 끝 인덱스까지 정적 값으로 채우는 메소드

    ㆍ인자 - value, start(optional), end(optional)

    ㆍstart 의 기본값은 0, end의 기본값은 배열의 길이

const arr = Array(3);
arr.fill(2);		// [2,2,2]
arr;			// [2,2,2] 원본변경O

 

3. pop()

    ㆍ배열의 마지막 요소를 제거한다

cosnt numArr = [1,2,3,4,5];
const popped = numArr.pop();
console.log(popped);	// 5
console.log(numArr);	// [1,2,3,4]

 

4. push()

    ㆍ배열의 끝에 n개의 요소를 넣는다

const numArr = [1,2,3,4,5];
numArr.push(6,7,8);
console.log(numArr);	//[1,2,3,4,5,6,7,8]

 

5. shift()

    ㆍ배열 앞부분의 값을 삭제

const arr = [1,2,3,4];
arr.shift();
console.log(arr);	// [2,3,4]

 

6. unshift()

    ㆍ배열 앞부분에 값을 삽입

const arr = [1,2,3,4];
arr.unshift(0);
console.log(arr);		// [0,1,2,3,4]

 

7. splice()

    ㆍ배열의 원래 요소를 다른 요소로 대체하거나 다른 요소를 배열에 삽입한다

    ㆍsplice( index, 제거할 요소 개수, 배열에 추가될 요소 )

const arr = [1,2,3,4,5,6,7];
arr.splice(3,2);
console.log(arr);	// [1,2,3,6,7] : 3번 인덱스부터 2개 제거

const arr = [1,2,3,4,5,6,7];
arr.splice(2,1,"a","b");
console.log(arr);	// [1,2,"a","b",4,5,6,7] : 2번째 인덱스에서 1개 제거 후 a,b추가

---

순수 함수

7. concat()

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

const arr = [1,2,3];
arr.concat(4,5);	// [1,2,3,4,5]
arr.concat([4,5]);	// [1,2,3,4,5]
arr;			// [1,2,3] : 원본 변경 X

 

8. every(), some()

    ㆍ배열의 모든 원소가 제공한 함수를 통과하는지 테스트하는 메소드 every

        ( 반환값이 false이거나 false로 처리할 수 있는 값이면 처리를 멈추고 false 반환 )

    ㆍ배열의 원소 중 하나라도 제공한 함수를 통과하는지 테스트하는 메소드 every

        ( 반환값이 true 이거나 true 같은 값이면 처리를 중단하고 true 반환 )

const arr = [2,4,6,8];
arr.every( el => el%2 === 0 );		// true
arr.some( el => el%2 );			// true
arr				// [2,4,6,8] 원본 변경 X

 

9. filter()

    ㆍ배열의 원소 중 제공된 함수를 통과하는 원소를 반환하는 메소드

const arr = [1,2,3];
arr.map( el => el<3 )		//[1,2]
arr				// [1,2,3,4,5] 원본 변경 X

 

10. find()

    ㆍ배열 내 특정 조건에 만족하는 값을 리턴

    ㆍ처음 원하는 요소를 찾으면 바로 함수 리턴

const aniArr = animals.find( animal => animal.id ==2 );

 

11. forEach()

    ㆍ배열 원소마다 제공하는 함수를 실행하는 메소드

const arr = [1,2,3];
arr.forEach( el => console.log(el) );
// 1
// 2
// 3
arr 	// [1,2,3] 원본 변경 X

 

12. indexOf(), lastIndexOf()

    ㆍ배열에 특정 원소가 포함돼 있는지 여부를 확인해 있으면 해당 인덱스, 없으면 -1을 리턴

    ㆍlastIndexOf 는 반대 순서로 탐색

    ㆍ인자 - searchElement, fonIndex ( optional )

const arr = [1,2,3,4];
arr.indexOf(3)		// 2
arr.indexOf(5)		// -1
arr			// [1,2,3,4] 원본 변경X

 

13. join()

    ㆍ모든 원소를 연결해 하나의 문자열을 만드는 메소드

    ㆍdefault 값은 ' , ' 이다

const strArr = ['hello', 'my', 'name', 'is'];
console.log(strArr.join(''));		//hellomynameis
console.log(strArr.join());		//hello,my,name,is

 

14. map()

    ㆍ배열 내의 모든 원소에 대하여 제공된 함수를 호출하고 결과를 모아 새로운 배열을 리턴하는 메소드

const arr = [1,2,3];
arr.map( el => el*2 );	// [2,4,6]
arr			// [1,2,3] 원본 변경X

 

15. reduce(), reduceRight()

    ㆍ배열의 원소마다 누적 계산값과 함께 함수를 적용해 하나의 값으로 리턴

    ㆍreduce는 왼쪽부터, reduceRight는 오른쪽부터 수행

    ㆍ단순히 값을 연산하는 용도 뿐만 아니라 여러가지 역할로 사용이 가능

// accumulator : 누적 계산값
// currentValue : 현재 처리값
// currentIndex : 현재 처리값의 index
// array : 호출된 배열
const arr = [1,2,3,4]
arr.reduce( (a,b) => a+b );		// 10
arr.reduec( (a,b) => a+b, 10 );		//20
arr					// [1,2,3,4] 원본 변경 X

 

16. slice( startIndex, endIndex )

    ㆍ배열의 startIndex 부터 endIndex까지 shallow copy

const arr = [1,2,3,4,5]
arr.slice(2)		// [3,4,5]
arr.slice(1,3)		// [2,3]
arr			// [1,2,3,4,5] 원본 변경 X

---

순수 함수여야 했던 비순수 함수

17. reverse()

    ㆍ배열의 순서가 반대가 된다

    ㆍ원래 배열에 덮어씌운다.

const numArr = [1,2,3,4,5];
numArr.reverse();
console.log(numArr);	// [5,4,3,2,1]

 

18. sort()

    ㆍ배열을 정렬하는데 사용

    ㆍ인자를 넣지 않으면 기본적으로 유니코드 코드 포인트에 따라 정렬

    ㆍ인자 - compareFunction ( optional )

const arr = [3,20,12,1,4];
arr.sort() 		// [1, 12, 20, 3, 4]
arr 			// [1, 12, 20, 3, 4] 원본 변경O

// 위와 같이 숫자를 정렬할 때 유니코드 순서로 정렬

const arr = [3, 20, 12, 1, 4];
arr.sort( (a,b) => a-b ) 	// 오름차순 [1,3,4,12,20]
arr.sort( (a,b) => b-a )	// 내림차순 [20, 12, 4, 3, 1]

 

---

19. toString()

    ㆍ배열의 원소를 문자열로 반환

const arr = [1,2,3];
arr.toString()		//"1,2,3"
arr			// [1,2,3] 원본 변경 X

 

20. split()

    ㆍ문자열을 원하는 기준에 따라 자른다

const stringEx = "032-0000-1111";
const splitedNum = stringEx.split('-');
console.log(splitedNum[0]);		// 032

 

21. includes()

    ㆍ배열에 특정 원소가 포함돼 있는지 여부를 확인해 true, false로 리턴

    ㆍ인자 - searchElement, fronIndex ( optional )

const arr = [1,2,3,4]
arr.includes(3)		// true
arr.includes(1,1)	//false
arr			// [1,2,3,4] 원본이 바뀌지 않음

 

 

 

 

 

 

참고자료

1. https://velog.io/@kjhoon0330/JS-%EB%B0%B0%EC%97%B4-%EA%B4%80%EB%A0%A8-%ED%95%A8%EC%88%98-%EC%A0%95%EB%A6%AC

2. https://jae04099.tistory.com/17

3. http://blog.302chanwoo.com/2017/08/javascript-array-method/