배열

순서정보(index)를 가지고 있는 참조자료형 데이터 타입

• (2의 33승의 -1)개까지 배열에 담을 수 있다
  
  

Array.prototype Method

1. 원본 배열을 변경하는 메서드

   .push('')
   .pop()
   .shift()
   .unshift('')
   .splice(start, deleteCount, el)
   .reverse()
   .sort()

2. 원본 배열은 유지하고 참조만 하여 새로운배열/문자열 반환하는 메서드

   .join()
   .slice()
   .concat()
   .toString()

3. 원본 배열을 반복적으로 참조하는 메서드

   .forEach()
   .map()
   .filter()
   .every()
   .some()
   .reduce()
   .redeceRight()
   .entries()
   .keys()
   .values()

---

arr[index]

해당 배열인덱스의 요소를 반환

let arr = ['사과', '바나나'];
let first = arr[0]                // 사과
// 마지막 요소에 접근
let last = arr[arr.length - 1] // 바나나

.length

배열 길이를 number로 반환

let arr = ['사과', '바나나'];
console.log(arr.length)   // 2

// 빈 배열인지 확일할 때
if(arr.length === 0) return '빈배열인지 확인';

---

원본배열 변경 메서드 - 배열요소 추가 / 삭제

.push('추가요소')

배열 끝에 요소 추가

let arr = ['사과', '바나나'];
let newlast = arr.push('키위'); // ["사과", "바나나", "키위"]

.pop()

배열 끝에 요소 삭제

let last = arr.pop(); // ["사과", "바나나"]

.unshift('추가요소')

배열 앞에 요소 추가
배열의 길이가 반환된
새 배열로 반환

let newfirst = arr.unshift('포도'); // ["포도", "사과", "바나나"]

.shift()

배열 앞에 요소 삭제

let first = arr.shift(); // ["사과", "바나나"]

---

배열에서 찾는값 포함여부 확인

.indexOf('찾는요소')

배열에서 찾는 요소의 인덱스를 출력

• 브라우저 호환성, Boolean값 확인가능 여부로 인해 .includes()보다 권장한다

let arr = ['사과', '바나나', '키위'];
// 1. 배열에서 찾는요소 인덱스 출력 가능
let exist = arr.indexOf('키위'); // 2
let notExist = arr.indexOf('없는값'); // 없는 값은 -1 출력

// 2. Boolean값 출력가능
console.log(arr.indexOf('키위') !== -1);  // true
console.log(arr.indexOf('없는값') !== -1); // false

.includes('찾는요소')

배열에서 찾는요소의 존재여부를 Boolean값으로 출력

• 대소문자를 구분하여 찾는다
• 익스플로러에서 호환 안된다

.includes(searchElement, fromIndex)

• fromIndex (option)
  : searchElement 검색 시작할 위치

1. fromIndex 가 배열의 길이보다 같거나 크다면, false 반환
2. fromIndex가 -1 * array.length 보다 작거나 같다면, 처음부터 검색
3. fromIndex가 음수면, 배열 끝에서 절대값만큼 검색

let arr = ['a', 'b', 'c'];
arr.includes('a')  // true
arr.includes('없는값')  // false
arr.includes('c', 3);   // false
arr.includes('c', 100); // false
arr.includes('a', -100); // true
arr.includes('a', -2); // false

.some

배열 모든 요소에 대해 반복실행하는 콜백 함수에서 리턴값이 모두 true일때, true 반환

.every

배열 모든 요소에 대해 반복실행하는 콜백 함수에서 리턴값이 하나라도 true일때, true 반환

---

배열 자르기

<배열/문자열 자르는 메서드>
Array Method - slice(), splice()
String Method - split()

slice() - 원본배열 유지 / 새로운 배열 반환
splice() - 원본배열 변경 / 새로운 배열 반환
split() - 문자열을 배열로 반환

.slice(시작, 끝-미포함)

시작부터 끝까지(끝 미포함) 자른 새 배열 반환

• 음수 값 입력가능하므로, substring보다 slice를 권장한다
• 새로운 배열로 잘려진 배열 반환
• 기존 배열 원본이 변경되지 않는다 immutable

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2)); //  ["camel", "duck", "elephant"]

console.log(animals.slice(1, 5)); // ["bison", "camel", "duck", "elephant"]

console.log(animals.slice(-2)); // ["duck", "elephant"]

console.log(animals.slice(2, -1)); // ["camel", "duck"]

console.log(animals.slice()); // ["ant", "bison", "camel", "duck", "elephant"]

.splice(시작순서, 제거개수, 추가할값)

• 기존배열 요소를 삭제/추가/교체하여 배열 변경
• 기존 배열 원본이 변경된다 mutable
• 반환값 - 제거한 요소를 담은 배열 (제거안했으면, 빈배열 반환)

  array.splice(시작[, deleteCount, item])
  deleteCount (option) - 시작부분에서 제거할 요소의 개수
  item (option) - 배열에 추가할 요소

배열 요소 제거하기

// 제거하기
var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon'];
myFish.splice(3, 1);  // 배열 3번째부터 1개를 제거한다
// removed is ["mandarin"]
// myFish = ["angel", "clown", "drum", "sturgeon"]

제거한 배열 요소 추출하기

// 제거한 요소 추출하기
var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon'];
var remove = myFish.splice(1,1); // ['"clown"']
var remove = myFish.splice(1,2); // ['clown', 'drum']

배열 요소 추가하기

// 제거하고 추가
var myFish = ['angel', 'clown', 'drum', 'sturgeon'];
var removed = myFish.splice(2, 1, 'trumpet'); 
// removed is ["drum"]
// myFish = ["angel", "clown", "trumpet", "sturgeon"]

// 제거안하고 추가
var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2, 0, 'drum'); 
// removed is [], no elements removed
// myFish = ["angel", "clown", "drum", "mandarin", "sturgeon"]

배열 요소 교체하기

// 제거한 요소 추출하기
var myFish = ['angel', 'clown', 'drum'];
// 배열 1번째부터 1개 제거 후, 요소 추가하기
myFish.splice(1,1,'a'); // ['angel', 'a', 'drum']
// 배열 1번째부터 2개 제거 후, 요소 추가하기
myFish.splice(1,2,'a'); // ['angel', 'a']

str.split()

문자열을 ()안에 delimeter로 구분하여 잘라서 배열로 반환

let str = '안녕하세요 감사해요 잘있어요 다시 만나요';
let word = str.split(' ');
console.log(word);         // ['안녕하세요', '감사해요', '잘있어요', '다시', '만나요']

🚨 배열에 문자열메소드인 .split()하기

1. 배열을 .toString()로 문자열로 전환하기
2. 문자열을 배열로 다시 전환하려고 split(" ") 사용

let string = arr.toString();
string.split(" ");

---

배열 문자열로 반환

arr.join()

배열을 합쳐서 문자열로 반환

const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join()); // "Fire,Air,Water"
console.log(elements.join('')); // "FireAirWater"
console.log(elements.join('-')); // "Fire-Air-Water"

arr.toString()

배열을 ','로 연결한 문자열 반환

const arr = ['안녕하세요', '감사해요', '잘있어요'];
console.log(arr.toString()); // 안녕하세요,감사해요,잘있어요

arr.concat()

배열 뒤에 인수로 받은 배열을 합쳐서 새로운 배열을 반환

var arr = [1, true, "JavaScript"];

arr.concat([2, false, "문자열"]); // [1,true,JavaScript,2,false,문자열]
arr.concat([2], [3, 4]);        // [1,true,JavaScript,2,3,4] -> 2개 이상의 배열도 합치기 가능
arr.concat("다섯", [6, 7]);      // [1,true,JavaScript,다섯,6,7] -> 값과 배열도 합치기 가능

---

배열 반복문

for of

• 배열 반복문 : 배열 값 순환
• 반복 가능한(iterables) 객체
  반복 가능한(iterables) 객체 ?
  : 배열, 문자열, Set객체/Map객체, NodeList
• continue, break, yield 제어흐름 사용가능
• forEach보다 처리속도 빠름

let arr = [1 ,2 ,3];
let sum = 0;
for(let ele of arr){
	sum += ele;
}
return sum;   // 6

for in

• 객체의 속성 반복문
• 배열에서도 사용가능
  (하지만, for of보다 처리속도 느림 / 일관성 없는 요소일 경우 사용가능)

// 객체 반복
var obj = {
  a: 1,
  b: 2,
  c: 3
};

for (var item in obj) {
  console.log(item) // a, b, c
}

// 배열 반복 - 배열도 객체여서 객체의 키값(인덱스)에 해당하게 나온다
var arr = [1, 2, 3];

for (var item in arr) {
  console.log(item); // 0, 1, 2
}

---

Array.isArray()

array 타입인지의 여부를 Boolean값으로 반환

• typeof 연산자는 array도 object로 구분한다.
  따라서 array type을 구분할때는 Array.isArray()를 사용한다.

Array.isArray([])        // true
Array.isArray(['a','b']) // true
Array.isArray('a')   // false

참조
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array
http://www.tcpschool.com/javascript/js_standard_arrayMethod
https://developer-talk.tistory.com/279
https://doesitmutate.xyz/