1. 프로퍼티 리스트, 함수 여부 체크
•
Array 함수
◦
isArray() : 배열 여부 반환, 배열이면 true 아니면 false 반환
•
Array.prototype
◦
indexOf() : 지정한 값에 일치하는 엘리먼트 인덱스 반환
◦
lastIndexOf(): indexOf()와 같으며, 마지막 인덱스 반환
◦
forEach(): 배열을 반복하면서 콜백함수 실행
◦
every(): 반환값이 false일 때까지 콜백 함수 실행
◦
some(): 반환값이 true일 때까지 콜백 함수 실행
◦
filter(): 콜백 함수에서 true를 반환하는 엘리먼트 반환
◦
map(): 콜백 함수에서 반환한 값을 새로운 배열로 반환
◦
reduce(): 콜백 함수의 반환 값을 파라미터 값으로 사용
◦
reduceRight(): reduce()와 같지만 배열의 끝에서 앞으로 진행
isArray()
•
체크 대상이 배열이면 true, 아니면 false를 반환합니다.
console.log(Array.isArray([1,2]);//true
console.log(Array.isArray(123));//false
JavaScript
복사
•
isArray() 함수가 필요한 이유
console.log(typeof {a: 1});//object
console.log(typeof [1, 2]);//object --- (1)
JavaScript
복사
⇒ (1): typeof 연산자로 데이터 타입을 구할 경우 둘 다 object를 반환합니다. 그렇기에 데이터 타입에서 배열 여부를 체크하는게 typeof로는 불가능합니다. 그렇기에 Array.isArray() 를 이용합니다.
2. index처리 메소드
indexOf()
•
파라미터 값과 같은 엘리먼트의 인덱스를 찾아 반환을 합니다. 왼쪽에서 오른쪽으로 검색을 하면서 값이 같은 엘리먼트가 있으면 해당 엘리먼트의 인덱스를 반환하며 검색을 종료합니다.
•
데이터 타입까지 체크하며 두 번째 파라미터의 인덱스부터 검색합니다.
var arr = [1, 2, 5, 2, 5];
console.log(arr.indexOf(5));//2
console.log(arr.indexOf("5"));//-1
console.log(arr.indexOf(5, 3));//4
JavaScript
복사
•
String과 Array의 indexOf()차이
console.log("ABCBC".indexOf("C", -2));//2 ---(1)
var list = ["A", "B", "C", "B", "C"];
console.log(list.indexOf("C", -2));//4 ---(2)
JavaScript
복사
⇒(1): String Object는 음수일 경우 0으로 간주하여 처음부터 검색합니다.
⇒(2): Array Object는 음수에 length를 더해 시작 인덱스로 사용하기에 -2 + length(5) = 3 이 되어 실질적으로는 list.indexOf("C", 3);이되어 4번 인덱스를 반환합니다.
lastIndexOf()
•
파라미터 값과 같은 엘리먼트의 마지막 인덱스를 반환합니다.
•
그외에는 indexOf와 동일합니다.
var arr = [1,2,5,2,5];
console.log(arr.lastIndexOf(5));//4
JavaScript
복사
3. 콜백 함수를 가진 Array 메소드, forEach()
forEach()
arr.forEach(callback(currentvalue[, index[, array]])[, thisArg])
•
배열의 엘리먼트를 하나씩 읽어가며 콜백함수를 호출합니다.
•
콜백 함수 파라미터
◦
엘리먼트 값, 인덱스, 배열 전체
•
break, continue 사용 불가(throw는 사용 가능)
•
콜백 함수 분리가 가능합니다.(독립성)
•
this로 오브젝트 참조
var list = ["A", "B", "C"];
list.forEach(function(el, index, all){
console.log(el +":"+index + ":" +all);
});
/*
A:0:A,B,C
B:1:A,B,C
C:2:A,B,C
*/
var print = function(el, index, all){console.log(el +":"+index + ":" +all)};
list.forEach(print);
/*
A:0:A,B,C
B:1:A,B,C
C:2:A,B,C
*/
var list = [1,2];
var print = function(el, index, all){console.log(el + this.ten)};
list.forEach(print, {ten: 10});//---(1)
/*
11
12
*/
JavaScript
복사
⇒ (1): callback을 실행할 때 this로 사용할 값을 전달할 수 있습니다. 이렇게 넘겨준 값은 함수내에서 this를 통해 참조가 가능합니다.
4. for()와 forEach()차이
forEach()
•
forEach()를 시작할 때 반복 범위 결정
•
엘리먼트를 추가하더라도 처리하지 않음
var list = [1,2,3];
var fn = function(el, index, all){
if(index === 0){
list.push("AB");
}
console.log(el);
}
list.forEach(fn);
/*
1
2
3
*/
JavaScript
복사
•
현재 인덱스보다 큰 인덱스의 값을 변경하면 변경된 값을 사용합니다.
◦
현재 인덱스보다 작은 인덱스의 값을 변경하면 처리하지 않음
var list = [1,2,3];
var fn = function(el, index, all){
if(index === 0){
list[2] = 345;
}
console.log(el);
}
list.forEach(fn)
/*
1
2
345
*/
JavaScript
복사
•
현재 인덱스보다 큰 인덱스의 엘리먼트를 삭제하면 배열에서 삭제되기에 반복에서 제외됩니다.
◦
추가는 처리하지 않지만, 삭제는 반영합니다.
var list = [1,2,3];
var fn = function(el, index, all){
if(index === 0){
list.pop();
}
console.log(el);
}
list.forEach(fn);
/*
1
2
*/
JavaScript
복사
for()와 forEach()
•
forEach()는 시맨틱 접근
◦
처음부터 끝까지 반복한다는 시맨틱
◦
반복 중간에 끝나지 않는다는 시맨틱
◦
시맨틱으로 소스 코드의 가독성을 향상시킵니다.
•
for()는 함수 코드를 읽어야 알 수 있습니다.
◦
break, continue
•
forEach()는 반복만 하며 콜백 함수에서 기능처리를 하고 this를 사용 할 수 있습니다.
•
forEach()는 인덱스 0부터 시작하지만, for()와 같이 인덱스 증가 값을 조정할 수 없습니다.
◦
뒤에서 앞으로 읽을수도 없습니다, 이것도 시맨틱 접근
5. true, false를 반환하는 메소드
every()
arr.every(callback[, thisArg])
•
매개변수
◦
callback : 각 요소를 시험할 함수
▪
element: 처리할 현재 요소
▪
index(optional): 처리할 현재 요소의 인덱스
▪
array(optional): filter를 호출한 배열
◦
thisArg(optional): callback을 실행할 때 this로 사용하는 값
•
forEach()처럼 시맨틱 접근
•
배열의 엘리먼트를 하나씩 읽어가면서 false를 반환할 때까지 콜백함수를 호출합니다.
◦
false를 반환하면 종료되고 끝까지 false를 반환하지 않으면 true를 반환합니다.
•
false가 되는 조건이 배열의 앞에 있을 때 효율성이 높습니다.
var list = [1,2,3,4,5,6];
var fn = function(currentValue, index, array){
console.log(currentValue);
return currentValue < 3;
}
list.every(fn);//false
JavaScript
복사
some()
arr.some(callback[, thisArg])
•
매개변수
◦
callback : 각 요소를 시험할 함수
▪
element: 처리할 현재 요소
▪
index(optional): 처리할 현재 요소의 인덱스
▪
array(optional): filter를 호출한 배열
◦
thisArg(optional): callback을 실행할 때 this로 사용하는 값
•
every()처럼 시맨틱 접근
•
단, true를 반환할 때까지 콜백 함수 호출
◦
즉, true를 반환하지 않으면 반복 자동 종료
◦
true를 반환하지 않으면 false반환
•
true가 되는 조건이 배열의 앞에 있을 때 효율성이 높습니다.
var list = [1,2,3,4,5,6];
var fn = function(currentValue, index, array){
console.log(currentValue);
return currentValue > 3;
}
list.some(fn);//false
JavaScript
복사
6. 필터, 매핑
filter()
arr.filter(callback(element[, index[, array]])[, thisArg])
•
매개변수
◦
callback : 각 요소를 시험할 함수, true를 반환하면 요소를 유지하고, false를 반환하면 버립니다.
▪
element: 처리할 현재 요소
▪
index(optional): 처리할 현재 요소의 인덱스
▪
array(optional): filter를 호출한 배열
◦
thisArg(optional): callback을 실행할 때 this로 사용하는 값
•
forEach()처럼 시맨틱 접근
•
배열의 엘리먼트를 하나씩 읽어가면서 콜백 함수에서 true를 반환하면 현재 읽은 엘리먼트를 반환합니다.
•
조건에 맞는 엘리먼트를 추려낼 때 유용합니다.
var list = [10, 20, 30, 40];
var fn = function(el, index, all){
return el > 15;
}
var result = list.filter(fn);
console.log(result);//[20, 30, 40]
JavaScript
복사
map()
arr.map(callback(currentValue[, index[, array]])[, thisArg])
•
매개변수
◦
callback : 새로운 배열 요소를 생성하는 함수
▪
element: 처리할 현재 요소
▪
index(optional): 처리할 현재 요소의 인덱스
▪
array(optional): map를 호출한 배열
◦
thisArg(optional): callback을 실행할 때 this로 사용하는 값
•
forEach()처럼 시맨틱 접근
•
배열의 엘리먼트를 하나씩 읽어가며 콜백 함수에서 반환한 값을 새로운 배열에 첨부해서 반환합니다.
var list = [1,2,3,4,5]
var fn = function(el, index, all){
return el * 2;
}
var result = list.map(fn);
console.log(result);//[2, 4, 6, 8, 10]
JavaScript
복사
7. 반환 값을 파라미터 값으로 사용
reduce()
arr.reduce(callback[, initialValue])
•
매개변수
◦
callback : 배열의 각 요소에 대해 실행할 함수.
▪
accumulator: 콜백의 반환값을 누적합니다. 콜백의 이전 반환값 또는 콜백의 첫 번째 호출이면서 initialValue를 제공한 경우 initialValue
▪
currentValue: 처리할 현재 요소
▪
currentIndex(optional): 처리할 현재 요소의 인덱스로 initialValue를 제공한 경우 0, 아니면 1부터 시작합니다.
▪
array(optional): reduce()를 호출한 배열
◦
initialValue(optional): callback의 최초 호출에서 첫 번째 인수에 제공하는 값. 초기값을 제공하지 않으면 배열의 첫 요소를 사용합니다.
•
forEach()처럼 시맨틱 접근
•
배열 끝까지 콜백 함수 호출
◦
파라미터 작성 여부에따라 처리가 다릅니다.
/*콜백 함수만 작성한 경우(파라미터 하나만 작성)*/
var value = [1, 3, 5, 7];
var fn = function(prev, curr, index, all){
console.log(prev+','+curr);
return prev + curr;
}
var result = value.reduce(fn);
console.log("결과: ", result);
/*
1,3
4,5
9,7
결과: 16
*/
/*두 번째 파라미터 작성*/
var value = [1, 3, 5, 7];
var fn = function(prev, curr, index, all){
console.log(prev+','+curr);
return prev + curr;
}
var result = value.reduce(fn, 7);
console.log("결과: ", result);
/*
7,1
8,3
11,5
16,7
결과: 23
*/
JavaScript
복사
reduceRight()
•
reduce()와 처리 방법은 동일하나 배열 끝에서 앞으로 읽어가며 콜백 함수에서 반환한 값을 반환합니다.
var value = [1, 3, 5, 7];
var fn = function(prev, curr, index, all){
console.log(prev+','+curr);
return prev + curr;
}
var result = value.reduceRight(fn, 7);
console.log("결과: ", result);
/*
7,7
14,5
19,3
22,1
결과: 23
*/
JavaScript
복사
