정의

• 연관된 데이터를 모아서 통으로 관리하기 위한 데이터 타입
• [] 를 사용해서 배열을 만들고, 배열 안에 있는 데이터들은, 를 사용하여 구분한다.
• 배열 안에 데이터를 원소(element)라고 한다.
• 문자, 숫자, 객체, 함수등 포함 할 수있다

	var color = [ 'red', 'blue', 'green']

배열을 그림으로 표현하면 다음과 같다

• 배열의 원소들은 각각의 방에 들어가게 되고, 각 방에는 0부터 순서대로 번호를 갖게 되는데 이것을 인덱스(index)라고 한다.

push

• 배열의 마지막 부분에 원소를 추가

var arr = [1, 2, 3, 4, 5];
console.log(arr.push('6')); 
=> [1, 2, 3, 4, 5, 6]

unshift

• 배열의 맨 앞부분에 원소를 추가

var arr = [1, 2, 3, 4, 5];
console.log(arr.unshift('6')); 
=> [6, 1, 2, 3, 4, 5]

splice

• 배열의 특정구간에 원소를 추가
• 배열.splice(시작점, 지울 개수, 넣을 것)
• 배열의 값을 불러오고, 그 과정에서 삭제된 값을 return 한다.

var arr = [1, 2, 3, 4, 5];
console.log(arr.splice(1,1,9));
=> [1, 9, 3, 4, 5]

shift

• 배열의 첫번째 원소 제거

var arr = [1, 2, 3, 4, 5];
console.log(arr.shift()); 
=> [2, 3, 4, 5]

pop

• 배열의 마지막 원소 제거

var arr = [1, 2, 3, 4, 5];
console.log(arr.pop()); 
=> [1, 2, 3, 4]

sort

• 배열을 순서대로 정렬
• 배열 자체가 변경됨

문자정렬

• 아스키코드 문자 순서로 정렬

var arr = [b, c, a, e, d];
console.log(arr.sort()); 
=> [a, b, c, d, e]

숫자 정렬

• 문자 정렬과 동일한 방법으로 정렬하게 되면 아스키코드 순으로 정렬되어 숫자의 크기대로 정렬되지 않는다.

**오름차순**
var arr = [1, 111, 4, 222, 10, 3]; 
arr.sort(function (a,b){ return a-b; });
=> [1, 3, 4, 10, 111, 222]

**내림차순**
var arr = [1, 111, 4, 222, 10, 3]; 
arr.sort(function (a,b){ return b-a; });
=> [1, 3, 4, 10, 111, 222]

object 정렬

let animals = [
            { name: 'lion', size: 'big', weight: 200 },
            { name: 'monkey', size: 'medium', weight: 30 },
            { name: 'cat', size: 'small', weight: 10 },
            { name: 'rat', size: 'small', weight: 2 }
        ];
animals.sort(function(a,b){
    return a.name < b.name ? -1 : a.name > b.name ? 1 : 0;
});
=>	0: {name: "cat", size: "small", weight: 10}
	1: {name: "lion", size: "big", weight: 200}
	2: {name: "monkey", size: "medium", weight: 30}
	3: {name: "rat", size: "small", weight: 2}

split

• 문자열을 하나하나 쪼개서 배열로 만든다
• 공백이 있을시 ''으로 표현한다

var a = '오늘 날씨가 좋다';
console.log(a.split(''));
(9) ['오', '늘', ' ', '날', '씨', '가', ' ', '좋', '다']

reverse

• 배열을 역순으로 정렬

var a = ['오', '늘', ' ', '날', '씨', '가', ' ', '좋', '다'];
console.log(a.reverse());
(9) ['다', '좋', ' ', '가', '씨', '날', ' ', '늘', '오']

find / findIndex

find

• 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환한다.

let animals = [
            { name: 'lion', size: 'big', weight: 200 },
            { name: 'monkey', size: 'medium', weight: 30 },
            { name: 'cat', size: 'small', weight: 10 },
            { name: 'rat', size: 'small', weight: 2 }
        ];
let result1 = animals.find(i => i.name =="cat");
console.log(result1);
=> {name: "cat", size: "small", weight: 10}

findIndex

• 주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환한다.
• 만족하는 요소가 없으면 -1을 반환합니다.

let animals = [
            { name: 'lion', size: 'big', weight: 200 },
            { name: 'monkey', size: 'medium', weight: 30 },
            { name: 'cat', size: 'small', weight: 10 },
            { name: 'rat', size: 'small', weight: 2 }
        ];
let result2 = animals.findIndex(i => i.name =="cat");
console.log(result2); 
=> 2

filter

• 만족하는 모든 요소를 배열로 변환한다.
• callbackFunction에는 3개의 매개변수를 사용할 수 있습니다.
  element : 요소값
  index : 요소의 인덱스
  array : 사용되는 배열 객체

출처: https://aljjabaegi.tistory.com/312 [알짜배기 프로그래머]

let animals = [
            { name: 'lion', size: 'big', weight: 200 },
            { name: 'monkey', size: 'medium', weight: 30 },
            { name: 'cat', size: 'small', weight: 10 },
            { name: 'rat', size: 'small', weight: 2 }
        ];
let result = animals.filter(i => i.size =="small");
console.log(result); 
=> {name: "cat", size: "small", weight: 10}
   {name: "rat", size: "small", weight: 2}

글자 수가 4개 이상 출력

let colors = ['red', 'blue', 'black', 'green', 'orange', 'yellow'];
let result = colors.filter(color => color.length > 3);
console.log(result);
=> [ 'blue', 'black', 'green', 'orange', 'yellow' ]

18을 초과하는 숫자 출력
함수를 만들고 filter안에 넣어준다

function aboveEighteen(number){
    return number > 18;
}
let numbers = [12, 5, 8, 33, 22, 18].filter(aboveEighteen);

console.log(numbers);
=> [33, 22]

짝수만 출력

function isEven(number){
    return number % 2 == 0;
}

let filter_numbers = [10, 1, 3, 99, 123].filter(isEven);
console.log(filter_numbers);
=> [10]

map

• 함수를 받아 특정 기능을 실행하고 새로운 배열로 반환

배열값에 각각 2씩 더한 값을 출력한다.

화살표 함수형 표현
var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var newNumbers = numbers.map(num =>num + 2);
console.log(newNumbers);
=> [3, 4, 5, 6, 7, 8, 9, 10, 11]

함수형으로 표현
var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var newNumbers = numbers.map(function(num) {
      return num + 2;
});
console.log(newNumbers);
=> [3, 4, 5, 6, 7, 8, 9, 10, 11]

곱셈 함수를 만들어고 새로운 변수를 선언해 함수를 넣어 값을 출력

var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
function multiplyTwo(num){
    return num * 2;
};
var newNumbers = numbers.map(multiplyTwo);
console.log(newNumbers);
=> [2, 4, 6, 8, 10, 12, 14, 16, 18]

객체 배열에 특정 키값 불러오기

var students = [
            {id: 1, name: 'tom'},
            {id: 2, name: 'james'},
            {id: 3, name: 'jerry'},
            {id: 4, name: 'john'},
        ];
var names = students.map(student => student.name);
console.log(names);
=> [ 'tom', 'james', 'jerry', 'john' ]

배열에 2씩 곱하고 반대로 출력

var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var nembersReverse = numbers.map(num => num * 2).reverse();
console.log(nembersReverse);
=>[18, 16, 14, 12, 10, 8, 6, 4, 2]

배열 안에 배열 넣기

var numbers = [[1, 2, 3], [4, 5, 6],[ 7, 8, 9]];
var newNumbers = numbers.map(array => array.map(num => num * 2));
console.log(newNumbers);
=> [ [ 2, 4, 6 ], [ 8, 10, 12 ], [ 14, 16, 18 ] ]

forEach

• 배열반복
• 함수를 인수로 받는다

let colors = ['red', 'blue', 'green'];
//colors.forEach((item, index, arr) => {});
	// 첫번째 매개변수는 요소, 두번재는 인덱스, 세번째는 배열 그자체
    // item : red blue green
    // index : 0 1 2
    // arr : colors
colors.forEach(name => {
    console.log(name);
});
// red, blue, green 

let numbers = [1, 2, 3, 4, 5, 6, 7];
함수형
numbers.forEach(function(number){
    console.log(number);
});
화살표 함수형
numbers.forEach(number =>{
    console.log(number);
});
=> 1 2 3 4 5 6 7

배열에 값을 추가하고 리턴한다.

let fruits = ['banana', 'apple', 'orange' , 'grape'];
let fruits2 = ['cherry'];
fruits.forEach(item => fruits2.push(item));
console.log(fruits2);
=> [ 'cherry', 'banana', 'apple', 'orange', 'grape' ]

배열의 총합을 구한다.

let sum = 0;
let numbers = [20, 11, 33, 10, 7, 77];
numbers.forEach(addTotal);

function addTotal(number){
    sum += number;
};

console.log(sum);
=> 158
아래 코드를 사용해도 결과값이 같다.
numbers.forEach(number => {
    sum += number;
});

함수 인수를 활용해서 배열에 곱하기 2 값을 출력

let numbers = [20, 11, 33, 10, 7, 77];
numbers.forEach((number, index, array) => {
    array[index] = number * 2;
});

console.log(numbers);
=> [ 40, 22, 66, 20, 14, 154 ]

reduce

• 배열의 모든 수 합치기
• (누적 계산값, 현재값) => {return 계산값}

let animals = [
            { name: 'lion', size: 'big', weight: 200 },
            { name: 'monkey', size: 'medium', weight: 30 },
            { name: 'cat', size: 'small', weight: 10 },
            { name: 'rat', size: 'small', weight: 2 }
        ];
let sum = animals.reduce((prev, cur) => {
    return (prev += cur.weight)    
}, 0);
=> 242