배열

일련의 순서가 있는 데이터를 담기 위해서는 배열 자료형을 사용한다.

배열

배열은 여러 개의 값을 순차적으로 나열한 자료구조이다. 배열은 다른 형태의 자료형을 저장할 수 있는 참조타입 자료형이다. 참조타입의 자료형은 모두 객체타입으로 분류할 수 있는데, 배열 또한 객체로 타입이 분류 되며 배열 스스로를 나타내는 자료형(array)는 존재하지 않는다. 해당 자료형이 배열임을 확인하기 위해서는 Array 객체의 프로토타입 메소드인 isArray를 사용해 확인한다.

console.log(typeof [1,2,3]) // object
console.log(Array.isArray([1,2,3])) // array

배열은 배열 생성자함수 Array를 통해서 생성할 수 있지만, 대괄효 표기법 ([ ])을 이용해 배열 리터럴을 선언하는 방법이 일반적이다. 대괄호로 표기된 배열은 안에 자료를 담을 수 있는데, 자료형을 구분하지 않는다. 배열에 담겨있는 자료를 요소(element)라고 부른다. 요소는 배열(식별자)[요소인덱스]를 통해 값을 호출할 수 있다. 존재하지 않는 인덱스를 호출할 경우 undefined를 반환한다. 또 추가적으로 대괄호 표기법을 사용해 배열에 새로운 요소를 추가할 수 있다.

let fruits = ['apple', 'banana', 'pineapple']
console.log(fruits[0]) // 'apple'
fruits[3] = 'kiwi'
console.log(fruits[3]) // 'kiwi'

배열의 특징

1 ) 배열은 index를 가지고 length 속성을 가진다.
배열은 본래 객체인데, index를 key값으로 value와 쌍을 이루는 특별한 객체 형식을 가진다. 이를 이용해 배열은 일반 객체와는 달리 자료의 for-of 문을 통해 순회가 가능하다. 이렇게 배열과 비슷한 형식(index와 length값)을 갖고 있는 객체를 유사배열객체(array-like object)라고 이야기한다.

let arr = [1,2,3,4];
console.log(arr[0], arr[1], arr[2], arr[3]) // 1,2,3,4
console.log(arr.length) // 4

for(element of arr) {
  console.log(element);
} // 1,2,3,4

2) 배열은 이터러블(iterable) 이다.
이터러블이란 Symbol.iterator를 키 값으로 하는 함수(메소드)를 가지고 있는 객체를 의미한다. Symbol.iterator 함수는 index와 length 그리고 next 메소드를 가지고 있는 이터레이터(iterator)를 반환해야 하는데, 배열은 대표적인 이터러블이라고 이야기 할 수 있다.

let arr = [1,2,3,4];
arr[Symbol.iterator](); // Array Iterator 

유용한 배열 메소드(method)

메소드란 객체내에 저장되어 있는 함수를 일컫는다. 모든 배열은 Array 객체의 프로토타입인 Array.prototype의 메소드들을 모두 상속받는다. 또한 Array객체의 정적(static)함수들을 불러와 배열 생성에 관여할 수 있다.

배열 생성 메소드

• Array.of (element0[, element1[, ...[, elementN ] ] ])

전달인자를 요소로 갖는 배열을 새롭게 생성해 반환한다.

console.log(Array.of(1,2,3)) // [1,2,3]

• Array.from ( arrayLike [, mapFn[, thisArg ] ])

전달인자로 전달된 유사배열객체나 이터러블을 요소로 하는 배열을 생성해 반환한다. 매핑 함수를 전달받아 매핑을 통해 새로운 배열을 생성할 수 있다. this 값을 전달하여, 매핑함수의 조작에 사용할 수 있다.

console.log(Array.from('123')) // [1,2,3]

---

배열 확인 메소드

• Array.isArray (obj)

전달인자가 배열(Array)객체인지 확인한다.

console.log(Array.isArray([1,2,3]) // true

• Array.prototype.indexOf (searchElement[, fromIndx])

배열에서 지정된 전달인자를 찾을 수 있으면 인덱스값을 아니면 -1을 반환한다.
시작 위치값을 지정하여 서칭을 시작할 지점을 고정할 수 있다.

console.log([1,2,3].indexOf(1)) // 0

---

기본 배열 조작 메소드

• Array.prototype.push (element1[,...[,elementN]])

임의의 전달인자를 해당 배열의 마지막 부분에 추가한다. 배열의 새로운 길이를 반환한다.

let arr = [1,2,3];
console.log(arr.push(4), arr) // 4, [1,2,3,4]

• Array.prototype.unshift ([...elementN])

임의의 전달인자를 해당 배열의 맨 앞의 부분에 추가한다. 배열의 새로운 길이를 반환한다.

let arr = [1,2,3];
console.log(arr.unshift(0), arr) // 4, [0,1,2,3]

• Array.prototype.pop ()

배열의 마지막 요소를 제거하고 그 요소를 반환한다.

let arr = [1,2,3];
console.log(arr.pop(), arr) // 3, [1,2]

• Array.prototype.shift ()

배열의 첫번째 요소를 제거하고 그 요소를 반환한다.

let arr = [1,2,3];
console.log(arr.shift(), arr) // 1, [2,3]

• Array.prototype.concat (value1[, value2 [, ... [, valueN]]])

전달인자로 주어진 값이나 배열을 메소드를 호출한 기존 배열에 합성하여 만든 새로운 배열을 반환한다. 기존 배열을 조작하지 않는다.

let arr = [1,2,3];
console.log(arr.concat(4,[5,6]) // [1,2,3,4,5,6]

• Array.prototype.splice (start[, deleteCount[, item1[, item2[, ...]]]])

배열의 기존 요소를 추가/삭제/변경 한다. 제거한 요소를 담은 배열을 반환한다. 삭제하지 않았다면 빈 배열을 반환한다.

start : 배열의 조작을 시작할 인덱스 (해당 인덱스를 포함한다). 배열의 길이를 넘어갈 경우 배열의 길이로 고정되며 음수일 경우 배열의 끝부터 거꾸로 세어 나간다.

deleteCount : 삭제할 요소의 개수, 생략하거나 시작 인덱스부터 배열의 끝까지 남은 요소의 갯수와 같으면 남은 요소를 모두 삭제한다. 0이하일 경우 아무것도 삭제하지 않는다.

item... : 추가할 요소의 지정, 지정된 요소를 배열에 지정된 위치에 추가한다. 명시되지 않으면 아무것도 추가하지 않는다.

let arr = [1,2,3];
console.log(arr.splice(1, 1, 20)) // [1,20,3]

• Array.prototype.slice ([begin[, end]])

begin 부터 end까지를 요소로 갖는 새로운 배열을 반환한다. (얕은복사) end 인덱스에 해당하는 값은 복사하지 않는다.

let arr = [1,2,3];
console.log(arr.slice(0,1)) // 1

• Array.prototype.join ([sperator])

배열의 모든 요소를 조합해 하나의 문자열로 만든뒤 반환한다. sperator를 지정해 sperator를 각 요소 뒤에 붙여 형식을 지정해줄 수 있다. 기본 sperator는 ','이다.

let arr = [1,2,3];
console.log(arr.join()) // '1,2,3'
console.log(arr.join('')) // '123'

• Array.prototype.reverse()

호출한 원본 배열의 요소의 순서를 전부 반전하여 반환한다.

let arr = [1,2,3];
console.log(arr.reverse()) // [3,2,1]

• Array.prototype.fill (value[, start[, end]])

배열의 시작 인덱스 부터 끝 인덱스까지 한가지의 정적인 값 하나로 채워 반환한다.

let arr = [1,2,3];
console.log(arr.fill(0,1,2)) // [1,0,3] end index = this.length

• Array.prototype.includes (valueToFind[, fromIndx])

배열이 특정요소를 가지고 있는지 판별한 후 불리언 값을 반환한다. 대소문자를 구별한다.

let arr = [1,2,3];
console.log(arr.includes(3)) // true

• Array.prototype.flat ([depth])

모든 하위 배열 요소를 지정한 깊이까지 재귀적으로 이어붙인 새로운 배열을 생성한후 반환한다. 평탄화할 깊이를 설정할 수 있다.

let arr = [1,2,3,[4,5,6]];
console.log(arr.flat()) // [1,2,3,4,5,6]

---

배열 고차 메소드

• Array.prototype.sort ([compareFunc])

원본 배열의 요소들을 적절한 기준을 통해 순서대로 정렬한후 반환한다. 함수를 전달인자로 받을 경우 해당 함수의 결과 값을 기준으로 순서대로 정렬한다. compareFunc 은 두 가지 배열요소(a,b)를 전달인자로 받아 0을 기준으로 음수를 반환할 경우 a를 우선순위, 그렇지 않을 경우 b를 우선순위로 정렬한다.
모든 요소를 적절하게 비교할 수 있을 때까지 배열의 요소를 적절하게 넣고 호출한다.

let arr = [1,2,3,6,5,4];
console.log(arr.sort((a,b) => a-b)) // [1,2,3,4,5,6]

• Array.prototype.forEach (callback(currentvalue[, index[, array]])[, thisarg])

주어진 함수를 배열요소에 대해 각요소의 오름차순으로 각각 호출한다. forEach 만의 특정 반환값은 존재하지 않는다. (undefined)

callback : 각 요소에 대해 호출할 함수
-> currentvalue : callback에 전달된 현재 요소
-> index : callback에 전달된 현재 요소의 index
-> array : 메소드를 호출한 배열 자신
thisarg : callback을 사용할 때 쓸 this의 값

let arr = [1,2,3,4];
arr.forEach((c,i,a) => console.log(c+i, a))
// 1 [1,2,3,4]
// 3 [1,2,3,4]
// 5 [1,2,3,4]
// 7 [1,2,3,4]

• Array.prototype.map (callback(currentvalue[, index[, array]])[, thisarg])

배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다. map 함수 그 자체는 원본 배열을 변경하지 않으나, callback 함수의 동작에 따라 변경될 수 있다. map 함수는 map 함수를 호출하여 원본배열을 변형한다고 하더라도 그 배열의 변화를 실시간으로 반영하지 않는다.

callback : 각 요소에 대해 호출할 함수
-> currentvalue : callback에 전달된 현재 요소
-> index : callback에 전달된 현재 요소의 index
-> array : 메소드를 호출한 배열 자신
thisarg : callback을 사용할 때 쓸 this의 값

let arr = [1,2,3,4];
console.log(arr.map((c,i)=> c+i), arr) // [1,3,5,7], [1,2,3,4]

• Array.prototype.filter (callback(currentvalue[, index[, array]])[, thisarg])

주어진 함수(callback)의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다. callback의 반환 값이 true로 판별되는 모든 요소들을 새로운 배열의 요소로 추가하며 true가 아닌 값은 무시한다. 값이 비어있는 요소에 대해서는 callback을 실행하지 않는다.

let arr = [1,2,3,4,5]
console.log(arr.filter((c) => c % 2 === 0)) // [2,4]

callback : 각 요소에 대해 호출할 함수
-> currentvalue : callback에 전달된 현재 요소
-> index : callback에 전달된 현재 요소의 index
-> array : 메소드를 호출한 배열 자신
thisarg : callback을 사용할 때 쓸 this의 값

• Array.prototype.reduce (callback(accumulator, currentValue[, currentIndex[, array]])[, initialValue])

배열의 각 요소에 대해 콜백함수(reducer)를 실행시키고 그 결과값들을 accumulator 에 축적해 반환한다.

callback : reducer 함수로 배열의 각 요소를 인자로 호출되며 reducer 함수의 반환값은 accumulator에 축적된다.
-> accumulator : callback 함수의 반환 값을 누적한다. initialValue가 주어졌을 경우 첫값은 initialValue의 반환 값이다.
-> currentIndex : callback에 전달된 현재 요소의 index
-> array : 메소드를 호출한 배열 자신

initialValue : 콜백함수에 제일 처음으로 인수로 제공할 값

let arr = [1,2,3]
console.log(arr.reduce((a,c) =>  a+c, 0)) // 6 (1+2+3)

• Array.prototype.some (callback([value, index[, array]])[, thisarg])

배열의 모든 요소에 대해서 주어진 콜백함수의 테스트를 한 번이라도 통과하면 true를 반환한다.

let arr = [1,2,3,4,5]
console.log(arr.some((c) => c < 3)) // true

• Array.prototype.every (callback([value [,index[, array]])[, thisarg])

배열의 모든 요소에 대해서 주어진 콜백함수의 테스트가 모두 통과하면 true를 반환한다.

let arr = [1,2,3,4,5]
console.log(arr.every((c) => c < 3))  // false

• Array.prototype.find (callback([value [,index[, array]])[, thisarg])

주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환한다. 그런 요소가 없다면 undefined를 반환한다.

let arr = [1,2,3,4,5]
console.log(arr.find((c) => c % 3 === 0)) // 3