[JS] 06. 배열

1. 배열

• 여러가지 데이터 타입의 데이터들이 배열을 이룸.
• 데이터 안에 있는 하나하나를 element(요소)라고 한다.
• 배열에는 앞에서부터 뒤까지 순서가 있다. (0번부터 시작함)

let myArray = [19, 44, 'good', 'false']

//여기서 19는 0번 index
// false는 3번 index

1.1 배열에 접근하기

• 접근하고자 하는 배열을 적고, [몇번째 index]에 접근하고 싶은지 적는다.

console.log(myArray[1])

//결과값 : 44

예시1)

let myArray = [19, 44, 'good', [100, 200, 500], false]
console.log(myArray[3])

//결과값 : [100, 200, 500]

• 만약 배열 내 배열의 특정 index에 접근하고 싶다면? (중첩된 배열의 경우)
• 해당 배열의 몇번째 index인지 적어준다.

let myArray = [19, 44, 'good', [100, 200, 500], false]
console.log(myArray[3][0])

//결과값 : 100

예시2)

let myArray = [19, 44, 'good', [100, 200, 500], false]
console.log(myArray[5-1])
console.log(myArray[myArray.length-1])

//두 결과값 모두 false가 나온다.
//두번째 콘솔로그를 통해서는 해당 배열의 가장 마지막 요소를 출력할 수 있다.

1.2 요소를 수정하기

• 변경하고자 하는 array의 index값 = "변경하고자 하는 값"으로 바꿔준다.

let myArray = [19, 44, 'good', 'false']
myArray[0] = 500

console.log(myArray);

//결과값 : [500, 44, 'good', 'false']

1.3 배열 길이 구하기

• 길이를 알고자하는 array.length를 출력한다.
• 배열은 항상 index의 길이 +1 이다.
• index는 0번째부터 있지만 배열은 1부터 존재하기 때문.

let myArray = [19, 44, 'good', 'false']
console.log(myArray.length);

//결과값 : 4

1.4 요소 추가하기

• array.push를 이용한다.

myArray.push('Kiwi')
console.log(myArray);

//결과값 : myArray = [19, 44, 'good', 'false', 'Kiwi']

1.5 요소 삭제하기

• 요소를 삭제하는 방법에는 하기와 같은 방법이 있다.
• pop() : 배열의 마지막 요소를 제거한다.
• shift() : 배열의 맨 앞 요소를 제거한다.
• slice() : 특정 index 값에서 제거한다.
• filter() :

• splice() : 배열 내의 특정한 요소를 삭제하거나, 다른 요소로 대치하거나 새로운 요소를 추가할 때 사용한다.

• concat() : 주어진 배열에 기존 배열을 합쳐서 새로운 배열을 반환한다.

a) pop 예시

let myArray = [19, 44, 'good', 'false']

myArray.pop()
console.log(myArray);

//결과값 : [19, 44, 'good']

b) shift 예시

let myArray = [19, 44, 'good', 'false']

myArray.shift()
console.log(myArray);

//결과값 : [44, 'good', 'false']

c) slice 예시

• slice 메서드는 원본 배열을 변형하지 않는다.
• 즉, slice 메서드를 통해 특정 index를 제거해도 다시 배열을 출력해보면 제거 전 상태로 출력된다.
• 따라서 slice 메서드를 적용한 새로운 변수를 선언해주어야 한다.

시작 인덱스는 포함하지만, 끝 인덱스는 포함하지 않는다.

또한 index 시작과 끝을 셀 경우 좌에서 우는 0에서 시작하는 + 정수를 뜻하지만 마이너스(-)인덱스 값은 끝에서부터 -1이 시작된다. (사진참고)

출처

• 만약 [1,2,3,4,5] 라는 배열이 있고, 숫자 2~4까지만 남기고 싶다면 하기와 같이 실행하면 된다.

기본형태)

slice (배열의 index의 시작점, 끝점)

// 단, 시작 index는 포함하되, 끝 index는 포함하지 않는다.

let nums = [1,2,3,4,5]
let nums_new = nums.slice(1,4)

console.log(nums) // [ 1, 2, 3, 4, 5 ]
console.log(nums_new) // [ 2, 3, 4 ]

d) splice 예시

• 보통 댓글 삭제 기능을 구현할 때 splice 메서드를 많이 활용한다.

기본형태)

splice (start, delete, item)

// 첫번째 인자 : 배열의 index의 시작점
// 두번째 인자 : 삭제할 요소의 개수
// 세번째 인자 이후 : 추가하고 싶은 요소

• 예를 들어, [1,2,3,4,5] 라는 배열에서 숫자 3을 제거하고 그 자리에 10을 추가하려고 할 경우 하기와 같이 진행하면 된다.

let num = [1,2,3,4,5];
num.splice(2,1,10);

console.log(num); // [ 1, 2, 10, 4, 5 ]

예시문제)

array 감옥에 갇힌 2를 구해주세요.
단, slice 메서드를 활용해야 하며, 괄호 안에는 음수만 적어야 합니다.
let prisoners = [[0, 1],[1,2],[0,0]];
saveNumberTwo(prisoners) // 2

function saveNumberTwo(prisoners) {
  let temp = prisoners.slice(-2, -1)
  let answer = temp[0][1]
  return answer  
}

let prisoners = [[0, 1],[1,2],[0,0]];
console.log(saveNumberTwo(prisoners));

module.exports = { saveNumberTwo };

e) concat

• 원본 배열은 변하지 않으며 새로운 배열이나 원본 배열을 수정해도 서로 영향을 받지 않는다.

let alphabet = ['a', 'b', 'c'];
let hangeul = ['ㄱ', 'ㄴ', 'ㄷ'];

alphabet.concat(hangeul);      // [ 'a', 'b', 'c', 'ㄱ', 'ㄴ', 'ㄷ' ]

• 하기 코드 둘은 매우 비슷해보이지만 다른 결과를 반환한다. 두번째의 경우는 배열을 3개로 인식했기 때문에 [2, 3]을 감싸는 대괄호가 사라졌습니다.

• 이런식으로 배열을 변수에 지정해서 인자로 넘겨줄 수도 있고, 바로 인자에서 배열을 작성해줄 수 있다.

const alpha = ['a', 'b', 'c'];

// 배열 2개 이어붙이기 
const arr = [1, [2, 3]];     
alpha.concat(arr);             // [ 'a', 'b', 'c', 1, [ 2, 3 ] ]

// 배열 3개 이어붙이기 
alpha.concat(arr);
alpha.concat(1, [2, 3]);       // [ 'a', 'b', 'c', 1, 2, 3 ]

• 만약, 중복된 숫자나 글자를 가진 배열을 합친다면 어떤 결과가 나올까?
• 요소의 중복과 상관없이 concat()은 배열을 합쳐준다. (즉, 중복으로 배열 내 표기된다.)