What I Learned Today
오늘은 배열과 배열 메서드에 대해 배우고 실습했다.
- JS에서 목록을 나타내는 데이터 타입을 배열이라고 한다.
- 배열은 목록과 유사하게 여러 정보를 저장할 수 있는 특별한 객체를 말한다.
// 배열을 생성하는 정석적인 방법. (new 호출 생략 가능)
const arrayName = new Array("item1", "item2", ...)
// 배열을 가장 쉽게 생성하려면 대괄호([])를 사용한다.
const arrayName = ["item1", "item2", ...]
// 배열은 모든 유효한 JS 값을 포함할 수 있다.
// string, number, boolean, object, array 등...
// 배열은 모든 내용이 한 줄에 작성되면 읽기 어려워질 수 있다.
// 각 항목을 새 줄에 배치하면 읽기가 더 쉬워진다.
const objectArray = [
{ name: "도현" },
{ name: "으내" },
]
위에 코드는 배열의 값이 적어서 눈으로 세어볼 수 있지만 값이 많아진다면 힘들 것이다.
이때 배열의 항목 개수를 셀 수 있는 속성이 있다.
const manyArray = [1, 2, 3, ..., 100]
console.log(manyArray.length) // 100
또는 배열에서 항목의 값을 알고 싶을 때에는 index를 대괄호 안에 넣으면 된다.
const cartArray = ["Banana", "Orange", "Apple", "Kiwi"]
// 배열은 0부터 시작하기 때문에 Banana가 나온다.
console.log(cartArray[0]) // "Banana"
// 만약 배열을 초과하는 index를 넣을 경우
console.log(cartArray[4]) // "undefined"
// 그럼 배열의 마지막 값은 하나씩 세어보아야 하는가?
// 아니다. 배열 전체 길이 -1을 하면 가장 마지막 index가 된다.
console.log(cartArray[cartArray.length -1]) // "Kiwi"
console.log(cartArray[cartArray.length -2]) // "Apple"
그럼 값을 수정하고 싶을 때에는 어떻게 해야 할까?
const numberArray = [1, 2, 3, 4]
// index 2번을 지정해 string "셋"으로 변경했다.
numberArray[2] = "셋"
console.log(numberArray) // [1, 2, "셋", 4]
// 만약 배열 항목 수보다 큰 index를 사용하면 어떻게 될까?
numberArray[6] = "여섯"
// 해당 값까지 undefined로 채워진다.
console.log(numberArray) // [1, 2, "셋", 4, undefined, undefined, "여섯"]
그럼 반대로 배열 안에 어떠한 값이 몇 번째 index에 들어있는지 확인하려고 한다.
그럴 때에는 indexOf() 메서드를 사용하면 된다.
// indexOf 메서드는 전달된 항목 값과 일치하는 것이 있으면 그 항목의 index를 반환하고 그렇지 않으면 -1을 반환한다.
// 다만 indexOf 메서드는 기본(원시) 값에만 적용된다.
// 객체, 배열, 함수 타입의 항목 인덱스를 찾아야 한다면 findIndex 메서드를 사용해야 한다.
const findArray = ["소주", "맥주", "막걸리", "양주"]
console.log(findArray.indexOf("알밤 막걸리")) // -1
console.log(findArray.indexOf("막걸리")) // 2
배열의 값을 바꾸는 것이 아닌 항목을 추가하거나 삭제하고 싶다면 이렇게 하면 된다.
const createDeleteArray = [1, 2, 3, 4, 5, 6]
// 맨 앞에 제거
.shift()
console.log(createDeleteArray) // [2, 3, 4, 5, 6]
// 맨 뒤에 제거
.pop()
console.log(createDeleteArray) // [2, 3, 4, 5]
// 맨 앞에 추가
.unshift(6)
console.log(createDeleteArray) // [6, 2, 3, 4, 5]
// 맨 뒤에 추가
.push(1)
console.log(createDeleteArray) // [6, 2, 3, 4, 5, 1]
// 다만 이렇게 하면 중간에 항목을 추가하거나 제거하기는 귀찮다.
// 따라서 splite()를 사용하면 된다.
const spliceArray = array.splice(startIndex, deleteCount, itemsToAdd)
// startIndex : 배열을 수정할 항목의 인덱스 위치
// deleteCount : 제거하려는 항목의 갯수
// itemsToAdd : 추가하려는 항목, 둘 이상인 경우 쉽표로 구분
// 중간 위치 항목 추가
const numbers = [1, 4, 5]
numbers.splice(1, 0, 2, 3)
console.log(numbers) // [1, 2, 3, 4, 5]
// 중간 위치 항목 삭제
const numbers = [1, 2, 3, 4, 5]
const removedNumbers = numbers.splice(1, 3)
console.log(numbers) // [1, 5]
console.log(removedNumbers) // [2, 3, 4]
배열을 복사하거나 특정 인덱스부터 잘라낸 배열을 새로 만드는 방법
const numbers = [8, 6, 5]
const copyedNumbers = numbers.slice()
copyedNumbers.push(3)
console.log(numbers) // [8, 6, 5]
// numbers가 복사되었고 push로 끝에 3을 넣었다.
console.log(copyedNumbers) // [8, 6, 5, 3]
The Problem I Faced
What I Tried to Do
How I Solved It
So
Aha Moments
평소 배열을 사용할 때 대입과 length 정도만 사용했었는데 이렇게 다양한 속성과 메서드가 있는 줄 알았다면 그동안 했던 것들이 훨씬 쉬웠을 것 같았다.
반응형
