14-1. Array 오브젝트(ES5 기준) / 프로퍼티 리스트, 함수 여부 체크

이번 시간은 ES5 기준의 Array 오브젝트입니다.

프로퍼티 리스트 (ES5)

Array 함수

isArray() : 배열 여부 반환; 배열이면 true, 아니면 false 반환

Array.prototype

indexOf() : 지정한 값에 일치하는 엘리먼트 인덱스 반환
lastIndexOf() : indexOf()와 같으며 마지막 인덱스 반환
forEach() : 배열을 반복하면서 콜백 함수 실행
every() : 반환 값이 false일 때까지 콜백 함수 실행
some() : 반환 값이 true일 때까지 콜백 함수 실행
filter() : 콜백 함수에서 true를 반환한 엘리먼트 반환
map() : 콜백 함수에서 반환한 값을 새로운 배열로 반환
reduce() : 콜백 함수의 반환 값을 파라미터 값으로 사용
reduceRight() : reduce()와 같음. 단, 배열의 끝에서 앞으로 진행

forEach / every / some / filter / map / reduce / reduceRight

위 7개 메소드의 공통점은 콜백함수를 호출하는 것입니다.
배열을 반복할 때마다(매번) 콜백함수를 호출합니다.

forEach()

배열을 반복하면서 반복할 때마다 콜백 함수를 실행합니다.
그리고 forEach 함수의 특징은 중간에 빠져나올 수 없습니다.
처음부터 끝까지 무조건 반복하는 겁니다.

그리고 forEach / every / some / filter / map 이렇게 5개의 공통점은 또 뭐냐면, 파라미터를 넘겨줄 때 파라미터를 3개를 넘겨줍니다.

첫번째 파라미터 : 현재 처리중인 엘리먼트 값
두번째 파라미터 : 현재 처리중인 인덱스
세번째 파라미터 : 배열 전체

every()

반환 값이 false일 때까지 콜백함수를 실행합니다.
그러니깐 콜백함수에서 true를 반환하면 반복을 종료합니다.

some()

반환 값이 true일 때까지 콜백함수를 실행합니다.
그러니깐 콜백함수에서 false를 반환하면 반복을 종료합니다.

every / some : 서로 반대

filter()

콜백함수에서 true를 반환한 엘리먼트를 반환합니다.
콜백함수에서 false를 반환한 엘리먼트는 반환하지 않습니다.
그러니깐 필터, 걸러내는 겁니다.

map()

콜백함수에서 반환한 값을 새로운 배열로 반환해줍니다.
filter는 true를 반환한 엘리먼트 값만 반환해주지만, map은 반환한 값을 새로운 배열로 반환하는 거니깐 콜백 함수에서 조종할 수 있다는 뜻이 됩니다.
그래서 map()과 forEach()는 비슷합니다.

map / forEach 차이점
forEach는 무조건 끝까지 반복합니다. 그리고 반환하는게 없습니다.
그래서 반환하기 위해선 별도의 배열을 만들어서 거기다가 집어넣는 그런 처리를 해줘야합니다.
반면에 map은 기본적으로 반환을 해줍니다.

reduce() reduceRight() 공통점

파라미터가 4개입니다.
첫번째, 두번째 파라미터는 상황에 따라 다릅니다.
세번째는 index이고 네번째는 전체 배열입니다.

이 상황에 대해서는 메소드를 다룰 때 설명하겠습니다.

reduceRight()

reduce()와 같은데 단지 배열의 끝에서 앞으로 진행합니다. (오른쪽 -> 왼쪽)
reduce()는 배열의 처음에서 마지막으로 진행합니다. (왼쪽 -> 오른쪽)

뒤에서 위의 메소드들에 대해 각각 다루도록 하겠습니다.

isArray()

구분	데이터(값)
object	Array 오브젝트
파라미터	체크 대상
반환	배열 : true, 아니면 : false

체크 대상이 배열이면 true, 아니면 false
isArray()는 함수
```
  console.log(Array.isArray([1, 2])); // true
  console.log(Array.isArray(123)); // false
```
1. isArray()는 함수이므로
2. Array.isArray() 형태로 호출
isArray()는 함수이기 때문에 isArray() 앞에 Array 즉, 오브젝트를 작성해야됩니다.
isArray() 함수가 필요한 이유
```
  console.log(typeof {a: 1}); // object
  console.log(typeof [1, 2]); // object
  console.log(typeof null); // object
```
1. typeof 연산자로 데이터 타입을 구하면
2. 모두 object이므로 배열 여부 체크 불가
3. [1, 2]는 Array.isArray() 사용
4. null은 Object.is() 사용

isArray() 함수는 ES3에는 없었다.
그런데 ES5에서 생겼다.
왜 생겼을까?

위 코드에서 보시면 아시겠지만 배열을 배열이 맞는지 아닌지 구분하기 위해 생긴것입니다.

isArray() 함수를 사용하는 경우

서버에서 JSON 타입의 데이터를 가져옵니다.
JSON 타입 안에는 {} 형태도 있고, [] 이런 형태도 있습니다.
그럼 반복을 하면서 그때 읽은거마다 어떤 형태인지 체크를 해줘야됩니다.
{} / [] 구분을 해줘야됩니다.
그래서 그때마다 그 타입에 맞는 함수를 호출해서 데이터를 처리해줘야됩니다.

그런데 typeof로는 체크할 방법이 없잖아요? 그런 경우에 isArray() 함수를 사용해서 해당 데이터가 배열이면 반복을 처리하는 함수를 호출하고, 오브젝트이면 for in 문으로 처리하는 함수를 호출합니다.
이런식으로 처리할 때 isArray() 함수를 사용합니다.

isArray()는 사용성이 굉장히 높습니다.
서버에서 데이터를 가져올 땐, 1차원 배열로 오는 경우도 있지만, 막 섞여서 오는 경우도 있습니다.
그것이 JSON의 특징입니다. 그럴 때 isArray()가 필요합니다.

null은 Object.is() 함수를 사용해서 비교하시면 됩니다.
Object.is()는 ES6에서 나왔습니다.

LHJ

14-1. Array 오브젝트(ES5 기준) / 프로퍼티 리스트, 함수 여부 체크