배열 소개

배열은 가장 기초적인 자료 구조 중 하나이다.

삽입

.push(element) 를 사용해 새 요소를 삽입할 수 있다. 시간 복잡도 O(1)

var array1 = [1, 2, 3, 4]
array1.push(5) //array1 =[1, 2, 3, 4, 5]
array1.push(7) //array1 =[1, 2, 3, 4, 5,7]

삭제

.pop()을 사용해 배열의 마지막 요소를 삭제하고 지워진 요소를 반환한다. 시간복잡도 O(1)

.shift()를 사용해 배열의 첫번째 요소를 삭제하고 지워진 요소를 반환한다.

var array1 = [1, 2, 3, 4]
array1.pop() // 4;
array1.shift() // 1;

접근

배열의 특정 인덱스의 요소에 접근 하는 것은 O(1)이 소요된다.

var array1 = [1, 2, 3, 4]
array[0] //1
array[2] //3

반복

for( 변수 ; 조건 ; 변수 수정)

for 은 반복에서 가장 일반적인 메소드이다.

for (let i = 0, leng = array1.length; 1 < len; i++) {
  console.log(array1[i])
}

while 반복을 통해서도 구현할 수 있지만 counter을 while문 밖에 두어야한다.

let counter = 0
while (counter < array1.length) {
  counter++
}

무한루프 반복문 구현

while (true) {
  if (breakCondition) {
    break
  }
}

for (;;) {
  if (breakCondition) {
    break
  }
}

for (in)

인덱스를 하나씩 호출하는 방식

var array1 = ['all', 'cows', 'are', 'big']

for (var index in array1) {
  console.log(array1[index])
}
//all
//cows
//are
//big

for (of)

of 이전에 지정된 변수는 array의 요소이다

for (var element of array1) {
  console.log(element)
}
//all
//cows
//are
//big

forEach()

forEach와 다른 반복 메서드의 가장 큰 차이점은 forEach는 반복에서 벗어나거나 배열의 특정 요소를 생략할 수 없다.

array1.forEach(function (element, index) {
  console.log(element)
})
//all
//cows
//are
//big

array1.forEach(function (element, index) {
  console.log(array1[index])
})
//all
//cows
//are
//big

보조함수

.slice(begin,end)

배열을 수정하지 않고 기존 배열의 일부를 반환한다.

var array1 = [1, 2, 3, 4]
array1.slice(1, 2) //[2]
array1.slice(2, 4) //[3,4]

인수를 보내지 않으면 배열을 복사한다.

⇒ 자바스크립트에서 배열을 복사할 때 유용하다. 자바스크립트의 배열은 참조 기반이므로 배열에 새 변수를 할당하면 해당 변수의 변경 내용이 원래 배열에 적용된다.

.splice(begin,size,element1,element2...)

기존 요소를 제거하거나 새 요소를 추가하여 배열의 내용을 반환하고 변경한다.

var array1 = [1, 2, 3, 4]
array1.splice() // []
array1.splice(1, 2) //[2,3],array1 = [1,4]

var array1 = [1, 2, 3, 4]
array1.splice(1, 2, 5, 6, 7) // [2,3] , array1= [1,5,6,7,4]

.concat()

배열 끝에 배열로 새 요소를 추가하여 배열로 반환한다.

var array1 = [1, 2, 3, 4]
array1.concat() //[1,2,3,4]
array1.concat([2, 3, 4]) //[1,2,3,4,2,3,4]
console.log(array1) //[1,2,3,4]

.legnth 프로퍼티

배열의 크기를 반환한다. 프로퍼티를 작은 수로 변경하면 배열 요소를 제거할 수 있다.

var array1 = [1, 2, 3, 4]
console.log(array1.length) //4

array1.length = 3
console.log(array1) //[1, 2, 3]

펼침 연산자(Spread Operator)

점 세 개로 표시된 펼침 연산자는 0개 이상의 인수로 확장한다.

function sum(x, y, z) {
  return x + y + z
}

const numbers = [1, 2, 3]

console.log(sum(...numbers))
// 6

자바스크립트 배열 메소드

자바스크립트는 함수형 프로그래밍처럼 쓰일 수 있다. 반복문을 통하지 않고 메서드만 호출할 수 있다.

Map

모든 배열 요소에 함수를 실행시킨 결과값을 새로운 배열로 반환한다.

;[1, 2, 3, 4, 5, 6, 7].map((value) => {
  return value * 10
})
// [10, 20, 30, 40, 50, 60, 70]

Filter

조건에 만족하는 배열 요소만 새 배열로 만들어 반환한다.

;[100, 2003, 10, 203, 333, 12].filter((value) => {
  return value > 100
})
// [2003, 203, 333]

Reduce

배열의 모든 요소를 하나의 값으로 결합시킨다.

let sum = [0, 1, 2, 3, 4].reduce((prevVal, currentVal, index, array) => {
  return prevVal + currentVal
})
console.log(sum) // prints 10

두 번째 인수로 초기값을 설정할 수 있다.

let sum = [0, 1, 2, 3, 4].reduce((prevVal, currentVal, index, array) => {
  return prevVal + currentVal
}, 1)
console.log(sum) // prints 11

다차원 배열

자바나 C++과는 다르게 자바스크립트에는 다차원 배열이 존재하지 않는다. 대신 "Jagged" 배열이 존재한다. 들쭉날쭉한 배열은 배열의 요소들이 배열인 배열이다. 각 요소들은 다른 차원이거나 크기일 수 있다.
$multidimensionalArray$ jaggedArray

function Matrix(row, colums) {
  let jaggedarray = new Array(rows)
  for (let i = 0; i < coulums; i += 1) {
    jaggedarray[i] = new Array(rows)
  }

  return jaggedarray
}

console.log(Matrix(3, 3))

들쭉날쭉한 배열의 요소에 접근하기 위해 열과 행을 특정한다.

let matrix3by3 = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
]

matrix3by3[0] //[1, 2, 3]
matrix3by3[1] //[4, 5, 6]
matrix3by3[2] //[7, 8, 9]

matrix3by3[0][0] //1
matrix3by3[1][1] //5