배열

• 배열 : 여러 자료를 묶어서 활용할 수 있는 특수한 자료
• 순서가 있는 컬렉션을 저장할 때 쓰는 자료구조인 배열을 사용하면 편리하다.
• 같은 상황에서 객체를 사용하면 순서와 관련된 메소드가 없어 편리하지 않다.
• 여러 개의 자료를 저장하려면 변수를 여러 개 선언해야 하는 불편함을 해결하기 위함.

배열 선언

• 배열은 여러 개의 변수를 한 번에 선언해 다룰 수 있는 자료형이다.
• 대괄호 [ ] 를 사용해 생성하고 내부의 값을 쉼표(,) 로 구분해 입력한다.
• 요소 : 배열 내부에 들어 있는 값
• 어떠한 종류의 자료형도 요소가 될 수 있다.

[요소, 요소, 요소, … , 요소]

빈 배열 만드는 문법

• 대부분 두 번째 방법으로 선언한다.

let arr = new Array();

let arr = [];

• 대괄호 안에 초기 요소를 넣어주는 것도 가능하다.

let fruits = ["사과","오렌지","자두"];

• 크기 지정

let number = new Array(5); 

console.log(number); // [ <5 empty items> ]
console.log(fruits.length); //3
// 배열에 length 자주 쓰임 
console.log(number.length); //5

배열 요소에 접근하기

• 인덱스 : 요소의 순서
• 가장 앞에 있는 요소를 0번째로 표현한다.

배열[인덱스]

• 배열은 여러 개의 요소를 갖기 때문에 일반적으로 배열 이름을 복수형으로 짓는다.
• 대괄호 안에 계산식을 넣는 것도 가능하다.

배열 요소 개수 확인하기

• 배열의 length속성을 사용한다.

배열.length

> const fruits = ['배', '사과', '키위', '바나나']
undefined

> fruits.length
4

> fruits[fruits.length - 1]
"바나나" // fruits[4-1], 배열의 3번째 요소인 "바나나"를 출력한다.

배열 메소드

1. push (뒤에 넣기)

 let fruits = ["사과", "바나나"];
 console.log("1 =>", fruits); //1 => [ '사과', '바나나' ]

 fruits.push("오렌지");
console.log("2 =>", fruits); //2 => [ '사과', '바나나', '오렌지' ]

2. pop (마지막 요소 삭제)

let fruits = ["사과", "바나나"];
console.log("1 =>", fruits);

fruits.pop();
console.log("2 =>", fruits);

3. shift (첫번째 요소 삭제)

let fruits = ["사과", "바나나", "키위"];
 console.log("1 =>", fruits);

fruits.shift();
console.log("2 =>", fruits);

4. unshift (맨 앞자리에 어떤 걸 추가하는 것)

fruits.unshift("포도");
console.log(fruits);
let fruits = ["사과", "바나나", "키위"];

5. splice (index, deleteCount, items)

• 첫 번째 매개변수 index : 배열에서 요소를 추가 또는 제거할 위치를 지정하는 정수값
• 두 번째 매개변수 deleteCount : 배열에서 제거할 요소의 수를 지정하는 정수값
• 두 번째 매개변수 생략 시 index 위치 이후의 모든 요소 제거
• 세 번째 items : 배열에 추가할 요소를 지정하는 매개변수. 생략 가능

fruits.splice(1, 1, "포도"); 
// 첫번째요소부터 시작해서 첫번째 요소까지를 삭제하고 포도로 갈아끼어줘
console.log(fruits);

6. slice(start, end) : 해당되는 요소를 뽑아 새로운 배열로 만드는 것

• start : 추출을 시작할 인덱스를 지정하는 정수값.
• end : 추출을 종료할 인덱스를 지정하는 정수값.생략 가능
• 기존 배열을 변경하지 않고 추출된 일부분으로 새로운 배열 반환

let slicedFruites = fruits.slice(1, 2); 
console.log(slicedFruites); // ["바나나"];

let slicedFruites = fruits.slice(1, 3);
console.log(slicedFruites); //[ '바나나', '키위' ]

배열과 함께 자주 사용되는 함수

forEach

let numbers = [4, 1, 5, 4, 5];
//매개변수 자리에 함수를 넣는 것 : 콜백 함수
numbers.forEach(function (item) {
console.log("item입니다 =>" + item);
});

// item입니다 =>4
// item입니다 =>1
// item입니다 =>5
// item입니다 =>4
// item입니다 =>5

map : 기존에 있었던 배열을 가공해서 새로운 배열을 생성하는 역할

• 항상 원본 배열의 길이 만큼이 리턴된다.

let newNumbers = numbers.map(function (item) {
return item * 2; //return 필수
});
console.log(newNumbers); // [ 8, 2, 10, 8, 10 ]

filter : 조건에 해당하는 것만 리턴

let numbers = [4, 1, 5, 4, 5];
let filteredNumbers = numbers.filter(function (item) {
return item === 5; // return 필요함, 필터링할 조건이 들어간다
});

console.log(filteredNumbers); // [5,5] 조건에 해당하는 것만 리턴

find : 조건에 맞는 것중 첫번째로 들어오는 것만 반환

let numbers = [4, 1, 5, 4, 5];
let result = numbers.find(function (item) {
  return item > 3; // 조건에 맞는 것중 첫번째로 들어오는 것만 반환
});

console.log(result); //4

• forEach 를 제외한 나머지는 다 리턴문이 필요했다.
• return 문이 필요했던 것들은 모두 다 새로운 배열을 내뱉었다.
  (새로운 배열과 새로운 값을 리턴했다.)
• 새로운 값으로 받아줘야 했다. ex) let filteredNumbers

메소드 요약

요소를 더하거나 지우기

• push(...items) : 맨 끝에 요소 추가하기
• pop() : 맨 끝 요소 추출하기
• shift() : 첫 요소 추출하기
• unshift(...items) : 맨 앞에 요소 추가하기
• splice(pos, deleteCount, ...items) : pos부터 deleteCount개의 요소를 지우고, items 추가하기
• slice(start, end) : start부터 end 바로 앞까지의 요소를 복사해 새로운 배열을 만듦
• concat(...items) : 배열의 모든 요소를 복사하고 items를 추가해 새로운 배열을 만든 후 이를 반환함. items가 배열이면 이 배열의 인수를 기존 배열에 더해줌

원하는 요소 찾기

• indexOf/lastIndexOf(item, pos) : pos부터 원하는 item을 찾음. 찾게 되면 해당 요소의 인덱스를, 아니면 -1을 반환함.
• includes(value) : 배열에 value가 있으면 true를, 그렇지 않으면 false를 반환함.
• find/filter(func) : func의 반환 값을 true로 만드는 첫 번째/전체 요소를 반환함.
• findIndex는 find와 유사함. 다만 요소 대신 인덱스를 반환함.

배열 전체 순회하기

• forEach(func) : 모든 요소에 func을 호출함. 결과는 반환되지 않음

배열 변형하기

• map(func) : 모든 요소에 func을 호출하고, 반환된 결과를 가지고 새로운 배열을 만듦
• sort(func) : 배열을 정렬하고 정렬된 배열을 반환함
• reverse() : 배열을 뒤집어 반환함
• split/join : 문자열을 배열로, 배열을 문자열로 변환함
• reduce(func, initial) : 요소를 차례로 돌면서 func을 호출함. 반환값은 다음 함수 호출에 전달함. 최종적으로 하나의 값이 도출됨

기타

• Array.isArray(arr) : arr이 배열인지 여부를 판단함

• sort, reverse, splice는 기존 배열을 변형시킨다는 점에 주의.