프로퍼티 (ES5)
| 이름 | 기능 |
| Array 함수 | |
| isArray() | 배열 여부 반환; 배열이면 true, 아니면 false 반환 |
| Array.prototype | |
| indexOf() | 지정한 값에 일치하는 엘리먼트 인덱스 반환 |
| lastIndexOf() | indexOf()와 같으며, 마지막 인덱스 반환 |
| forEach() | 배열을 반복하면서 콜백 함수 실행 |
| every() | 반환 값이 false일 때까지 콜백 함수 실행 |
| some() | 반환 값이 true일 때까지 콜백 함수 실행 |
| filter() | 콜백 함수에서 true를 반환한 엘리먼트 반환 |
| map() | 콜백 함수에서 반환한 값을 새로운 배열로 반환 |
| reduce() | 콜백 함수의 반환 값을 파라미터 값으로 사용 |
| reduceRight() | reduce()와 같음. 단,배열의 끝에서 앞으로 진행 |
알고리즘 문제를 풀다 헷갈리는 메소드만 정리해보았다!
1. indexOf()
| 구분 | 데이터 (값) |
| data | 검색 대상 |
| 파라미터 | 검색할 값 |
| 검색 시작 인덱스, 디폴트 : 0 | |
| 반환 | 검색된 인덱스 |
// 파라미터 값과 같은 엘리먼트의 인덱스 반환
// 왼쪽에서 오른쪽으로 검색
// 값이 같은 엘리먼트가 있으면 검색 종료
var arr = [1, 2, 5, 2, 5];
console.log(arr.indexOf(5)); // 2번 인덱스에 5가 있으므로 2를 반환
[실행 결과]
2
// 데이터 타입까지 체크
// 같은 값이 없으면 -1을 반환
var arr = [1, 2, 5, 2, 5];
console.log(arr.indexOf("5"));
[실행 결과]
-1
// 두 번째 파라미터의 인덱스부터 검색
var arr = [1, 2, 5, 2, 5];
console.log(arr.indexOf(5, 3));
[실행 결과]
42. forEach()
| 구분 | 데이터 (값) |
| data | 반복 대상 |
| 파라미터 | 콜백함수 |
| this로 참조할 오브젝트opt | |
| 반환 | undefined |
// 배열의 엘리먼트를 하나씩 읽어 가면서 콜백 함수 호출
// 콜백 함수 파라미터 : 엘리먼트 값, 인덱스, 배열 전체
var arr = ["A","B","C"];
arr.forEach(function(el,index,all){
console.log(el + ":" + index + ":" + all);
});
/*
1. 배열의 첫 번째 엘리먼트인 "A"를 읽는다.
2. 콜백 함수를 호출하면서 파라미터에 엘리먼트 값, 인덱스, 배열 전체 순서로 설정한다.
3. 콜백 함수의 함수 코드를 실행한다.
4. 다음 엘리먼트를 읽는다.
5. 2~4 과정을 배열 끝까지 반복한다.
*/
[실행 결과]
A:0:A,B,C
B:1:A,B,C
C:2:A,B,C
// break, continue 사용 불가
// throw는 사용 가능
// 콜백 함수 분리 (독립성)
var arr = ["A","B","C"];
var fn = function(el,index,all){
console.log(el + ":" + index + ":" + all);
};
arr.forEach(fn);
[실행 결과]
A:0:A,B,C
B:1:A,B,C
C:2:A,B,C
// this로 오브젝트 참조
var arr = [1, 2];
var fn = function(el, index, all){
console.log(el + this.num);
};
arr.forEach(fn,{num : 10});
/*
1. this로 오브젝트를 참조한다.
2. this.num의 값은 10이다.
3. 함수 안에서 값(데이터)을 사용하는 방법 : 파라미터, 변수, this로 참조, 함수 호출(반환값)
4. 콜백 함수의 완전한 독립성을 보장한다.
*/
3. filter()
| 구분 | 데이터 (값) |
| data | 반복 대상 |
| 파라미터 | 콜백함수 |
| this로 참조할 오브젝트opt | |
| 반환 | [true일 때의 엘리먼트] |
// 조건에 맞는 엘리먼트를 추려낼 때 유용
// forEach()처럼 시맨틱 접근
// 배열의 엘리먼트를 하나씩 읽어가면서
// 콜백 함수에서 true를 반환하면 현재 읽은 엘리먼트를 반환
var arr = [10, 20, 30, 40];
var fn = function(el, index, all){
return el > 15;
};
var result = arr.filter(fn);
console.log(result);
/*
1. [20, 30, 40]이 15보다 크므로 return el > 15에서 비교결과가 true이다.
2. true일 때 현재의 엘리먼트를 반환한다.
3. 다수를 반환할 수 있으므로 반환되는 엘리먼트를 배열에 첨부한다.
4. true가 하나도 없으면 빈 배열이 result 변수에 할당된다.
*/
[실행 결과]
[20, 30, 40]
4. map()
| 구분 | 데이터 (값) |
| data | 반복 대상 |
| 파라미터 | 콜백함수 |
| this로 참조할 오브젝트opt | |
| 반환 | [콜백 함수에서 반환한 엘리먼트] |
// forEach()처럼 시맨틱 접근
// 배열의 엘리먼트를 하나씩 읽어가면서
// 콜백 함수에서 반환한 값을 새로운 배열에 첨부하여 반환
var arr = [10, 20, 30];
var fn = function(el, index, all){
return el + this.add;
};
var num = {add: 100};
var result = arr.map(fn, num);
console.log(result);
[실행 결과]
[110, 120, 130]
5. reduce()
| 구분 | 데이터 (값) |
| data | 반복 대상 |
| 파라미터 | 콜백함수 |
| 초기값opt | |
| 반환 | 콜백 함수에서 반환한 값 |
// forEach()처럼 시맨틱 접근
// 배열 끝까지 콜백 함수 호출
// 파라미터 작성 여부에 따라 처리가 다름.
// 1. 콜백 함수만 작성한 경우 (파라미터 하나만 작성)
var arr = [1, 3, 5, 7];
var fn = function(prev, curr, index, all){
console.log(prev + "," + curr);
return prev + curr;
};
var result = arr.reduce(fn);
console.log("결과 : ", result);
/*
처음 콜백 함수를 호출할 때
1. 인덱스 [0]의 값을 직전 값에 설정
2. 인덱스 [1]의 값을 현재 값에 설정
3. 인덱스에 1을 설정
두 번째로 콜백 함수를 호출할 때
1. 콜백 함수에서 반환된 값을 직전 값에 설정
2. 인덱스 [2]의 값을 현재 값에 설정
*/
[실행 결과]
1, 3
4, 5
9, 7
결과 : 16
// 2. 두 번째 파라미터를 작성한 경우
var arr = [1, 3, 5];
var fn = function(prev, curr, index, all){
console.log(prev + "," + curr);
return prev + curr;
};
var result = arr.reduce(fn, 7);
console.log("반환 : ", result);
/*
처음 콜백 함수를 호출할 때
1. 두 번째 파라미터 값을 직전 값에 설정
2. 인덱스 [0]의 값을 현재 값에 설정
3. 인덱스에 0을 설정
두 번째로 콜백 함수를 호출할 때
1. 콜백 함수에서 반환된 값을 직전 값에 설정
2. 인덱스 [1]의 값을 현재 값에 설정
*/
[실행 결과]
7, 1
8, 3
11, 5
결과 : 16
문제 풀이
✏️ 목적
함수 호출 시간 측정
✏️ 요구사항
함수 코드가 없는 빈 함수 작성
함수 이름 : check()
배열에 1부터 1,000,000까지 작성
forEach()로 배열을 반복하면서 check() 함수 호출
즉 1,000,000번 check() 함수 호출
반복이 끝나면 실행 시간을 출력하세요.
종료 시각 - 시작 시각
✏️ 힌트
현재 시각 구하기 : var start = Date.now();
현재 시각을 1/1000초로 반환
✏️ 풀이 (정답 ❌)
let arr = []; // 빈 배열 선언
for (let i = 0; i<1000000;i++){
arr.push(i+1); // 1에서 1,000,000까지 arr에 할당
}
console.log("<!-- 배열 arr -->",arr);
console.log("arr의 length : ",arr.length);
function check(){}; // 빈 함수 check() 선언
let start = Date.now(); // forEach() 실행 전의 현재 시각
let fn = function(el,index,all){
check(); // check() 함수 호출하는 fn함수 작성
}
arr.forEach(fn); // forEach()로 배열을 반복하면서 check()함수 호출
let finish = Date.now(); // forEach() 실행 후의 현재 시각
let result = (finish - start) * 0.001; // 실행 전의 현재 시각 - 실행 후의 현재 시각 = 실행 시각
console.log("실행 시각 : ",result);
문제만 봤을 땐 어려워보였는데 막상 풀고 나니 금방 풀 수 있었고, 어떻게 forEach를 써야 하는지 확실히 이해할 수 있었다. 역시 이론을 공부하는 것과 코드를 작성하기 위해 공부하는 것은 다르다. 🤓
✏️ 문제 출처
이게 왜 🐷