[Wecode] Week3. Array

1. 배열이 필요한 이유와 선언하는 방법

배열은 일반적으로 "리스트같은 객체(list-like objects)"로 기술된다. 배열은 보통 리스트에 저장된 다수의 값을 포함하는 하나의 객체를 말합니다. 우리는 배열 안의 각 값들에 개별적으로 접근이 가능하다. 가령, 오늘 마트에가서 쇼핑을 할 물건들을 선언하게 되더라도 배열이 없다면 아래와 같이 선언해야 할 것이다.

const shopping1 = 'milk'
const shopping2 = 'tomato'
const shopping3 = 'bread'

배열은 이러한 불편함을 해소할 수 있는데, 아래와 같이 배열을 선언한다.

const shopping = ['milk', 'tomato', 'bread']

이런식으로 배열로 선언하게 되면 하나의 변수에 여러 정보를 담을 수 있다.

2. 배열의 값을 추가, 수정, 삭제하는 방법

배열의 값을 추가, 수정, 삭제하려면 먼저 내가 수정하려고 하는 배열에 접근하는 방법을 알아야 한다. 아래와 같이 대괄호와 인덱스번호를 통해 각 값에 대해 개별적으로 접근이 가능하다.

const shopping = ['milk', 'tomato', 'bread']
console.log(shopping[0]);  // milk

1) 배열의 값을 추가하는 방법

변수명.push()로 배열의 맨 끝에 값을 추가할 수 있고, 인자로 배열에 추가할 값을 넣으면 된다.

const shopping = ['milk', 'tomato', 'bread']
shopping.push('coke')
console.log(shopping) // ['milk', 'tomato', 'bread', 'coke']

2) 배열의 값을 수정하는 방법

수정하려는 값에 접근 후에 다시 재선언해주는 방식으로 값을 수정할 수 있다.

const shopping = ['milk', 'tomato', 'bread']
shopping[0] = 'coffee'
console.log(shopping) // ['coffee', 'tomato', 'bread']

3) 배열의 값을 삭제하는 방법

가장 많이 쓰이는 방법으로는 변수명.splice()를 통해 배열의 값을 삭제가 가능하다.

const shopping = ['milk', 'tomato', 'bread']
shopping.splice(0, 1) // 0번 index부터 1개의 요소를 제거
console.log(shopping) // ['tomato', 'bread']

3. 반복문이 필요한 이유와 사용하는 방법

반복문은 말 그대로 반복문의 조건에 따라 계속 반복되는 과정을 코딩할 때 사용하는 문법이다. 반복문이 필요한 이유는 쉽게 설명이 가능한데, 우리가 게임을 한다고 했을 때, 우측으로 5번을 가는 동안 동쪽으로 더 가라는 멘트를 남기고 싶다면 이런 식으로 코딩을 하면 된다.

var step;
for (step = 0; step < 5; step++) {
  // step을 0으로 초기화하고; step이 5가 될때까지; step +1을 반복한다.
  // step이 0에서 5가 될때까지 반복한다.
  console.log('동쪽으로 한 걸음 더 가세요');
}

4. 배열과 반복문을 함께 자주 사용하는 이유

보통 배열은 같은 종류의 데이터를 저장하는 용도로 많이 사용하게 된다. 이 때 많은 데이터가 저장된 하나의 배열을 반복해서 돌며 내가 원하는 데이터를 찾아주는 반복문을 사용하게 된다면, 위에서 설명했던 데이터의 추가, 삭제, 수정 등을 용이하게 할 수 있다. 예를 들면 많은 댓글정보가 저장된 배열 안에서 악성댓글을 찾아 삭제하는 로직을 구현하는데에도 반복문이 사용될 수 있고, 배열에 최대 index길이를 정하고, 그 최대길이에 닿았을 때 가장 오래된 댓글을 삭제하는 로직을 구현할 때도 배열과 반복문을 사용하여 구현해낼 수 있다.

5. 배열의 메서드 5가지와 사용 방법

1) arr.pop()

pop은 배열의 맨 끝 인덱스를 삭제하고 삭제한 인덱스를 반환한다.
ex) 같은 삭제기능을 가진 splice는 삭제하고 싶은 인덱스를 삭제하고 남은 나머지 배열의 정보를 반환한다.

const shopping = ['milk', 'tomato', 'bread']
shopping.pop(); // bread
console.log(shopping) // ['milk', 'tomato']

2) arr.slice()

slice는 splice와 같은 개념으로 사용되지만, slice는 원본데이터를 건드리지 않고 복사본을 반환하고, splice는 원본 자체를 수정하는 기능을 가지고 있다.

const shopping = ['milk', 'tomato', 'bread']
// shopping.slice(시작인덱스, 끝인덱스(끝은 포함하지 않음))
shopping.slice(0, 2) // ['milk', 'tomato'] 
// 삭제된 나머지를 반환하는게 아닌 지정한 인덱스를 추출해내는 개념

3) arr.map()

map은 배열안을 돌면서 인자로 받은 함수의 로직을 각각의 값에 적용할 수 있다.

const number = [1, 2, 3]
number.map((index) => {
	index * 2 // number배열의 모든 index를 순환하며 * 2를 수행한다.
})
console.log(number) // [2, 4, 6]

4) arr.filter()

filter는 배열을 돌며 인자로 받은 함수의 로직을 통과하는 인덱스를 모아 새로운 배열로 반환한다. 예를 들어, 배열 안에 숫자 중 나눈 값이 1이되는 (홀수)를 찾는 로직을 구현하려면 아래와 같이 코딩할 수 있다.

const number = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
number.filter((index) => index % 2 === 1) // 
console.log(number) // [1,3,5,7,9]

5) arr.shift()

shift는 pop의 반대로 배열의 첫번째 요소를 제거하여 반환한다.

const shopping = ['milk', 'tomato', 'bread']
shopping.shift(); // milk
console.log(shopping) // ['tomato', 'bread']