array 반복을 효과적으로 하기 위한 9가지 방법

Array Declaration

var array = [];
var array2 = new Array();

 

Array Initialization

선언과 동시에 초기화(?)

var array1 = ['First', 'Second', 'Third', 'Fourth'];
var array2 = new Array('First');

 선언 이후에 초기화

array1 = ['First', 'Second', 'Third', 'Fourth'];
array2 = new Array('First');

 

Javascript Array 반복 메소드들

1. Array.map()

map을 사용하면, 각각의 array element들에 대하여 어떤 실행을 한 새로운 array element를 만들어 낸다.

원래의 array에는 변화가 없다.

var numbers1 = [10, 20, 30, 40, 50];
var numbers3 = numbers1.map(function(val, idx, arr){
		return val * 3;
});

// Output 30, 60, 90, 120, 150

number3라는 array를 만들고, number1 array의 map() 함수가 적용했다.

map() 메소드는 각각의 array element들에 대해 3배를 하고, 리턴값을 number3 array에 넣는다.

callback function에 패스되는 3가지 parameters 중 (value, index, array) 여기서 index와 array는 생략가능하다.

var numbers3 = numbers1.map(function(val){
	return val * 3;
});

 

2. Array.filter()

이름과 같이 어떤 filter 조건에 따라 새로운 array를 만들어낸다.

var numbers = [50, 25, 40, 16, 29];
var numOver30 = numbers.filter(function(val, idx, arr){
		return val > 30;
});

// Output 50, 40

30보다 큰이라는 조건을 적용해 numOver30 이라는 새로운 array를 만들었다.

callback function에 패스되는 3가지 parameters 중 (value, index, array) 여기서 index와 array는 생략가능하다.

var numOver30 = numbers.filter(function(val){
		return val > 30;
});

 

3. Array.forEach()

array의 각 element들에 대해 함수가 실행된다.

var printVal = "";
var names = ['Frank', 'Charles', 'Dolly', 'Robert', 'Bob'];

names.forEach(function(val){
	printVal = printVal + 'Hello ' + val + "<br/>";
});

//Output Hello Frank
//	Hello Charles
//         ...

 

4. Array.reduce()

reduce 메소드는 array 각 element 함수를 실행하여 단일 값을 생성한다.

(array의 왼쪽에서 오른쪽방향으로 진행) / (오른쪽에서 왼쪽으로 진행할 경우 Array.reduceRight())

var nums = [10, 20, 30, 40, 50];
var sum = nums.reduce(function(total, value){
	return total + value;
});

//Output 150

처음값을 유지시키거나 이전에서 돌아오는 값을 위해 사용되는 total 이라는 새로운 parameter가 있다.

 

5. Array.some()

array의 element들이 조건을 통과하는지 아닌지 결정하는데 사용된다.

var nums = [10, 20, 30, 40, 50];

var over30 = nums.some(function(val){
		return val > 30;
});
// Output true

 

6. Array.every()

some()과 달리 모든 array element들이 조건에 통과하는지를 체크한다.

var nums = [10, 20, 30, 40, 50];

var Allover30 = nums.every(function(val){
		return val > 30;
});

// Output false

 

7. Array.find()

조건에 만족하는 첫번째 array의 element를 리턴한다.

var nums = [10, 20, 30, 40, 50]

var firstNum = nums.find(function(val){
		return val > 30
});

// Output 40

 

8. Array.findIndex()

조건에 만족하는 첫번째 array의 element의 index

var nums = [10, 20, 30, 40, 50];

var findNumIndex = nums.findIndex(function(value){
	return value > 30
});

// Output 3

 

9. Array.indexOf()

array 안의 element를 찾고 그에 따른 포지션을 리턴한다.

0번째 element부터 순차적으로 시작한다. (끝에서부터 시작할경우 Array.lastIndexOf)

var names = ['Frank', 'Charles', 'Dolly', 'Robert', 'Bob'];

var pos = names.indexOf("Dolly");

// Output 2

찾지 못할 경우 -1 을 리턴하고, 찾은 경우 첫번째 element 의 포지션을 리턴한다.

---

• https://www.zeptobook.com/eleven-ways-to-learn-javascript-array-iteration-effectively/