소개
JavaScript에서 배열은 고정된 길이가 없고 원시값이나 객체 등 어떤 타입이든, 심지어 서로 다른 타입이 섞여 있어도 담을 수 있는 목록과 비슷한 구조예요.
배열을 만들려면 대괄호 [] 사이에 원소를 넣어요.
배열에서 값을 읽으려면 식별자 뒤에 대괄호 []를 쓰고 그 안에 인덱스를 넣어요.
배열의 인덱스는 0부터 시작해요.
예를 들면 다음과 같아요:
const numbers = [1, 'two', 3, 'four'];
numbers[2];
// => 3
배열 안에 들어 있는 원소의 개수를 알고 싶다면 length 프로퍼티를 사용해요:
const numbers = [1, 'two', 3, 'four'];
numbers.length;
// => 4
배열의 원소를 바꾸려면 해당 인덱스에 값을 할당해요:
const numbers = [1, 'two', 3, 'four'];
numbers[0] = 'one';
numbers;
// => ['one', 'two', 3, 'four']
메서드
모든 Array 객체에서 사용할 수 있는 메서드 중에는 배열에 원소를 추가하거나 제거하는 데 쓸 수 있는 것들이 있어요.
이 연습 문제를 풀 때 살펴볼 몇 가지를 소개할게요:
push
.push(value)를 사용하면 배열의 끝에 value를 _추가_할 수 있어요.
이 메서드는 배열의 새로운 길이를 반환해요.
const numbers = [1, 'two', 3, 'four'];
numbers.push(5); // => 5
numbers;
// => [1, 'two', 3, 'four', 5]
pop
.pop()을 사용하면 배열에서 마지막 value를 _제거_할 수 있어요.
이 메서드는 제거한 값을 반환해요.
이 변화로 배열의 길이는 줄어들어요.
const numbers = [1, 'two', 3, 'four'];
numbers.pop(); // => four
numbers;
// => [1, 'two', 3]
shift
.shift()를 사용하면 배열에서 첫 번째 value를 _제거_할 수 있어요.
이 메서드는 제거한 값을 반환해요.
이 변화로 배열의 길이는 줄어들어요.
const numbers = [1, 'two', 3, 'four'];
numbers.shift(); // => 1
numbers;
// => ['two', 3, 'four']
unshift
.unshift(value)를 사용하면 배열의 앞에 value를 _추가_할 수 있어요.
이 메서드는 배열의 새로운 길이를 반환해요.
const numbers = [1, 'two', 3, 'four'];
numbers.unshift('one'); // => 5
numbers;
// => ['one', 1, 'two', 3, 'four']
splice
.splice(index, 1)을 사용하면 특정 index에 있는 value를 배열에서 _제거_할 수 있어요.
이 메서드는 제거한 원소를 반환해요.
const numbers = [1, 'two', 3, 'four'];
numbers.splice(2, 1, 'one'); // => [3]
numbers;
// => [1, 'two', 'one', 'four']
이 메서드들은 설명한 것보다 더 강력해요:
-
push와 unshift는 인자를 더 넘겨서 여러 값을 한 번에 push하거나 unshift할 수 있어요.
이 연습 문제를 푸는 데는 필요하지 않아요.
- splice는 두 번째 인자를 늘려서 여러 값을 제거할 수 있어요.
이 연습 문제를 푸는 데는 필요하지 않아요.
- splice는
deleteCount 뒤에 인자를 추가해서 여러 값을 넣을 수도 있어요.
이렇게 하면 값을 교체하거나 배열 중간에 값을 삽입할 수 있어요(예를 들어 원소를 0개 제거하는 방식으로요).
이 연습 문제를 푸는 데는 필요하지 않아요.
지침
마술사 지망생 Elyse는 기본기를 몇 가지 연습하려고 해요. Elyse에게는
직접 다뤄보고 싶은 카드 더미가 하나 있어요.
조금 더 쉽게 하기 위해 Elyse는 1부터 10까지의 카드만 사용하기로 했고,
그래서 카드 더미는 숫자 배열로 나타낼 수 있어요. 특정 카드의 위치는 배열의
인덱스에 대응해요. 즉, 위치 0은 첫 번째 카드를, 위치 1은 두 번째 카드를
가리켜요.
두 함수를 제외한 모든 함수는 카드 배열을 갱신한 다음 수정된 배열을 반환해야 해요. 이는 빌더 패턴이라고 알려진 일반적인 작업 방식으로, 함수를 서로 멋지게 이어 붙일 수 있게 해줘요.
예외는 두 가지예요. getItem은 주어진 위치의 카드를 반환해야 하고, checkSizeOfStack은 주어진 크기가 일치하면 true를 반환해야 해요.
1. 카드 더미에서 카드 꺼내기
카드를 고르려면 주어진 카드 더미에서 인덱스 position에 있는 카드를
반환해요.
const position = 2;
getItem([1, 2, 4, 1], position);
// => 4
2. 카드 더미의 카드 바꾸기
손기술을 좀 부려서 인덱스 position에 있는 카드를 주어진 교체 카드와
바꿔요.
조정된 카드 더미를 반환해요.
const position = 2;
const replacementCard = 6;
setItem([1, 2, 4, 1], position, replacementCard);
// => [1, 2, 6, 1]
3. 카드 더미 맨 위에 카드 넣기
카드 더미 맨 위에 새 카드를 넣어 카드가 나타나게 해요.
조정된 카드 더미를 반환해요.
const newCard = 8;
insertItemAtTop([5, 9, 7, 1], newCard);
// => [5, 9, 7, 1, 8]
4. 카드 더미에서 카드 제거하기
카드 더미에서 주어진 position에 있는 카드를 제거해서 카드가 사라지게 해요.
조정된 카드 더미를 반환해요.
const position = 2;
removeItem([3, 2, 6, 4, 8], position);
// => [3, 2, 4, 8]
5. 카드 더미 맨 위의 카드 제거하기
카드 더미 맨 위에 있는 카드를 제거해서 카드가 사라지게 해요.
조정된 카드 더미를 반환해요.
removeItemFromTop([3, 2, 6, 4, 8]);
// => [3, 2, 6, 4]
6. 카드 더미 맨 아래에 카드 넣기
카드 더미 맨 아래에 새 카드를 넣어 카드가 나타나게 해요.
조정된 카드 더미를 반환해요.
const newCard = 8;
insertItemAtBottom([5, 9, 7, 1], newCard);
// => [8, 5, 9, 7, 1]
7. 카드 더미 맨 아래의 카드 제거하기
카드 더미 맨 아래에 있는 카드를 제거해서 카드가 사라지게 해요.
조정된 카드 더미를 반환해요.
removeItemAtBottom([8, 5, 9, 7, 1]);
// => [5, 9, 7, 1]
8. 카드 더미의 크기 확인하기
카드 더미의 크기가 stackSize와 같은지 아닌지 확인해요.
const stackSize = 4;
checkSizeOfStack([3, 2, 6, 4, 8], stackSize);
// => false
학습 연습 문제
