목차
배열(Array)
배열(Array)은 순서대로 번호가 붙은 원소들이 연속적인 형태로 구성된 구조다. 목록과 유사하게 여러 정보를 저장할 수 있는 특별한 객체다.
배열을 만들 때는 대괄호([])를 사용하여 생성한다. 배열을 생성하면서 여러 값(value)을 추가할 수 있다. 각 값은 쉼표로 구분한다. 배열 값으로는 모든 유효한 JavaScript 값을 할당할 수 있다. 기본 타입과 객체 타입 모두 가능하다.
// 빈 배열 생성
const shoppingCart = []
// 여러 값을 가진 배열 생성
const shoppingList = ['두부', '양파', '대파', '부추', '계란']
배열 항목
배열은 객체이기 때문에 속성과 메서드를 갖는다. 배열의 항목 개수는 length 속성을 사용하여 확인할 수 있다.
console.log(shoppingList.length) // 5
배열의 인덱스(index)는 숫자 타입이다. 0부터 시작하며, 각 항목에 순서대로 할당된다. 배열 항목 값을 불러오기 위해서는 각괄호 방식을 사용하거나 at() 메서드를 사용할 수 있다. 배열에 있는 항목 수를 초과하는 인덱스를 전달할 경우 undefined를 반환한다.
console.log(shoppingList[3]) // '부추'
console.log(shoppingList.at(2)) // '대파'
console.log(shoppingList.at(9)) // undefined
배열의 마지막 항목 값을 불러올 때 length 속성을 사용하면 쉽다. 또는, at() 메서드에 음수 값을 사용할 수도 있다.
const lastItemUsingLength = shoppingList.at(shoppingList.length - 1)
const lastItemUsingAt = shoppingList.at(-1)
console.log(lastItemUsingLength) // '계란'
console.log(lastItemUsingAt) // '계란'
배열 항목 값을 수정하려면 = 연산자를 사용하여 값을 지정하면 된다. 배열에 있는 항목 수보다 큰 인덱스를 사용하면 JavaScript가 중간 항목을 만들고 undefined로 채운다.
// 항목 값 수정
const numberList = [1, 2, 3, 4]
numberList[1] = '둘'
console.log(numberList) // [1, '둘', 3, 4]
// 배열 length보다 큰 index 사용
numberList[9] = '아홉'
console.log(numberList) // [1, '둘', 3, 4, undefined, undefined, undefined, undefined, undefined, '아홉']
배열 메서드
배열 항목 위치 찾기
indexOf() 메서드를 사용하면 배열이 포함하는 항목(item)의 인덱스를 찾을 수 있다. 메서드로 전달된 항목 값과 일치하는 것이 있으면 해당 인덱스를 숫자 값으로 반환하고, 없으면 -1을 반환한다. 단, 기본(원시) 타입에만 적용된다.
const index = array.indexOf(item)
includes() 메서드를 사용하면 전달한 값과 일치하는 항목을 포함하는지 여부를 불리언(true, false) 값으로 알려준다.
const index = array.includes(item)
객체 타입에서는 findIndex() 메서드를 사용한다.
const fruitBasket = [
{name: 'watermelon'}, // 0
{name: 'lemon'}, // 1
{name: 'apple'}, // 2
]
console.log(fruitBasket.indexOf({name: 'lemon'})) // -1
console.log(fruitBasket.findIndex(/* callback */(fruit) => {
return fruit.name === 'apple'
})) // 2
배열 항목 추가
배열 항목은 다음 세 가지 방법으로 추가할 수 있다.
- unshift() = 새로운 항목(들)을 배열의 시작 위치에 추가하고 새로운 길이(length) 반환
- 배열의 중간 어딘가 위치에 추가하는 방법은 아래 배열 항목 수정에서 확인
- push() = 새로운 항목(들)을 배열의 끝 위치에 추가하고 새로운 길이(length) 반환
배열 항목 제거
배열 항목은 다음 세 가지 방법으로 제거할 수 있다.
- shift() = 하나의 항목을 배열의 시작 위치에서 제거하고 제거한 항목 값 반환. 여러 항목을 제거하려면 여러 번 반복
- 배열의 중간 어딘가 위치에서 제거하는 방법은 아래 배열 항목 수정에서 확인
- push() = 하나의 항목을 배열의 끝 위치에서 제거하고 제거한 항목 값 반환. 여러 항목을 제거하려면 여러 번 반복
배열 항목 수정
splice() 메서드를 사용하면 배열의 중간 위치의 항목을 추가, 교체, 제거할 수 있다.
const deletedItems = array.splice(startIndex, deleteCount, itemsToAdd1, itemsToAdd2, ...)- startIndex: 배열을 수정할 항목의 인덱스 값
- deleteCount: 제거하려는 항목의 개수
- itemsToAdd: 추가하려는 항목의 값. 둘 이상이면 쉼표로 구분
배열 복사
slice() 메서드를 사용하면 배열을 복사하거나, 특정 인덱스부터 잘라낸 배열을 새로 만들 수 있다.
const coppiedItems = array.slice(begin, end)begin과 end는 필수 항목이 아니다. 아무 값도 전달하지 않으면 배열 전체를 복사한고, begin과 end(end 미포함)에 배열 항목의 인덱스 값을 전달하면 특정 인덱스 영역의 배열을 새로 만든다.
slice() 메서드는 배열을 참조(같은 주소 공유)하는 것이 아니라 값을 복사하는 것이기 때문에 복사한 배열의 내용을 수정해도 기존 배열의 값은 변하지 않는다.
const numbers = [8, 6, 5]
const copyedNumbers = numbers.slice()
copyedNumbers.push(3)
console.log(numbers) // [8, 6, 5]
console.log(copyedNumbers) // [8, 6, 5, 3]
루프(Loop)
루프(Loop)는 명령어를 프로그램 내에서 일정하게 반복해서 실행하는 것을 말한다. 루프는 조건이 충족될 때까지 반복해서 프로그래밍 작업의 효율성을 높인다. while, do while, for와 같이 다양한 유형의 루프가 있고, 각각 고유한 용도가 있다.
오늘 수업 때는 while 문에 대해 배우기 시작했는데, 내일 다른 루프들을 배우고 함께 묶어서 포스팅하겠다.
오늘 하루를 돌아보며
배열과 반복문은 대학생 때 배운 게 기억이 난다. 당시에 과제를 하면서 머리를 쥐어뜯었던 기억이 있는데 처음부터 다시 설명을 들으니까 이해가 훨씬 잘 된다. 특히 for 문에서 많이 고생했는데 오늘 배운 것도 열심히 복습하고, 내일 배울 것도 열심히 예습하면 내일 수업 때 더 잘 이해되지 않을까! 살짝 기대해 본다.
강사님이 수업 노트에 "배열과 반복문은 쉽지 않지만, 잘 배워두면 JavaScript가 재밌어질 거예요."라고 써놓으셨다. 확실히 쉽지 않은 개념이지만, 열심히 배우고 많이 반복해서 연습하면 언젠가 자연스럽게 배열과 반복문을 사용하고 있는 나를 발견할 수 있겠지? 그 날이 올 때까지 화이팅!!
