쉬운 코딩 용어3 - 배열(Array)에 대한 간단 정리.

안녕하세요 Vector JUN입니다.

벌써 변수와 함수까지 배우셨다면, 초보자분들이 금방 만나게 되는 또 하나의 코딩 용어가 있는데요. 바로 배열(Array)이라는 친구입니다.

이렇게 하나하나씩 배워나가다 보면 어느새 어엿한 1인 개발자가 되어있을 거니까 희망을 가지고 오늘도 앞으로 나아가 볼까요?

그런데 솔직히 말하면 배열도 이름만 어려워 보이지, 개념 자체는 생각보다 정말 정말 간단합니다. 배열은 쉽게 말해 여러 개의 정보를 한곳에 모아서 보관하는 방법인데 오늘도 쉬운 예시와 실제 코드를 이용해서 배열이 무엇인지 이해하고, 최소한 기본적인 개념만큼은 확실하게 이해하고 넘어가는 것을 목표로 해볼게요.

1. 배열(Array)

배열을 가장 쉽게 이해하는 방법은 여러 개의 상자를 한꺼번에 보관할 수 있는 수납장이라고 생각하는 거예요.

앞에서 배웠던 변수를 기억하시나요? 우리는 변수를 이름표가 붙은 상자 하나라고 배웠잖아요? (기억하시죠?)

예를 들어, score = 10이라고 하면 score라는 이름의 상자 하나에 숫자 10이 들어 있는 것인데, 만약 점수를 다섯 개 저장해야 한다면 어떨까요? 10, 20, 30, 40, 50 물론 변수를 다섯 개 전부 다 따로 만들 수도 있습니다. 그런데 숫자가 10개, 100개, 1,000개로 늘어나면 조금 귀찮아지겠죠? 그래서 이럴 때 배열이라는 친구를 사용합니다. 긴 수납장 하나가 있다고 상상해 봅시다. 그 안에 이렇게 여러 값을 넣을 수 있습니다. 10 | 20 | 30 | 40 | 50 생각보다 단순하죠? 상자를 다섯 개 따로 관리하는 대신, 하나의 큰 수납장 안에 여러 값을 순서대로 모아두는 것입니다. 이게 바로 배열이라는 친구예요.

2. 배열 실제 코드 사용법 (여기서 집중하세요.)

JavaScript에서는 다음과 같이 배열을 만들 수 있습니다.

let scores = [10, 20, 30, 40, 50];

갑자기 대괄호 [ ]가 등장해서 조금 낯설 수 있습니다.

하나씩 천천히 보겠습니다.

 

let scores

이 부분은 컴퓨터에게 “scores라는 이름의 수납장을 하나 만들어줘.”라고 부탁하는 것과 비슷해요..

[10, 20, 30, 40, 50] 이렇게 대괄호 안에는 여러 개의 값을 한꺼번에 넣을 수도 있어요.

즉, scores → [10, 20, 30, 40, 50]라고 생각하면 됩니다. 이제 scores라는 하나의 배열 안에 숫자 다섯 개가 들어가 있는 것입니다.

꽤 편리하죠? 그런데 여기서 아주 중요한 것이 하나 있습니다. 배열 안에 들어 있는 각각의 값에는 자기만의 자리 번호가 있는데요.

JavaScript를 포함한 많은 프로그래밍 언어에서는 이 번호를 0부터 세기 시작합니다.

네. 1이 아니라 0부터 시작하기 때문인데요. (저도 처음에는 “아니 왜 굳이 0부터 세는데?”라는 생각을 했습니다.)

그래서 배열 안의 위치는 이렇게 됩니다.

10 → 0번

20 → 1번

30 → 2번

40 → 3번

50 → 4번

예를 들어 다음과 같이 작성하면,

console.log(scores[0]);

컴퓨터는 다음과 같이 대답할 거예요.

"10" 왜 10일까요?

우리가 배열 안에 있는 0번 자리에 들어 있는 값을 보여줘라고 요청했기 때문입니다.

3. 배열은 실제로 어디에 사용할까?

여기까지 보면 이런 생각이 들 수도 있습니다.

“그래서 이걸 실제로 어디에 쓰는데?”

배열은 실제 프로그램에서 정말 정말 많이 사용된답니다.

예를 들어 온라인 쇼핑몰에서는 여러 상품 이름을 배열에 보관할 수도 있고,

게임에서는 여러 플레이어의 점수를 저장할 수 있고,

음악 앱에서는 여러 노래 제목을 저장할 수도 있습니다.

온라인 쇼핑몰의 장바구니에서는 내가 담은 여러 상품을 한꺼번에 관리하는 데 배열을 사용할 수도 있습니다.

예를 들어,

let fruits = ["Apple", "Banana", "Orange"];

라고 작성하면 하나의 배열 안에 세 가지 과일이 들어 있다고 가정해 볼게요.

굳이

fruit1

fruit2

fruit3

처럼 각각 따로 만들 필요 없이

fruits

라는 하나의 배열 안에서 함께 관리할 수 있는 것입니다.

훨씬 깔끔하죠? 쉽게 말하면, 비슷한 정보가 여러 개 있을 때 그것들을 한곳에 모아서 관리하도록 도와주는 친구가 바로 배열이라는 친구예요.

4. 변수와 배열의 차이

그래도 앞에서 배운 변수와 배열이 헷갈릴 수도 있어요.

그래서 아주 쉽게 나눠보겠습니다.

변수 = 하나의 값을 보관하는 이름표가 붙은 상자

배열 = 여러 개의 값을 보관할 수 있는 수납장

예를 들어,

let score = 10;

이 변수에는 숫자 하나가 들어 있습니다.

하지만,

let scores = [10, 20, 30];

이라고 하면 하나의 scores 안에 여러 숫자가 함께 들어 있다고 가정해 볼게요.

만약 변수를 도시락 하나라고 생각한다면,

배열은 여러 칸으로 나누어진 도시락 세트와 비슷하다고 생각해도 됩니다.

변수 = 값 하나

배열 = 여러 값을 한꺼번에

(저는 이렇게 짧게 연결해서 기억하면 훨씬 이해하기 편하다고 생각합니다.)

5. 초보자가 자주 하는 실수

배열을 처음 배울 때 가장 많이 헷갈리는 부분 중 하나가 바로 첫 번째 자리 번호가 0이라는 것입니다.

예를 들어,

let colors = ["Red", "Blue", "Green"];

이라는 배열이 있다고 해봅시다.

처음 보면 colors[1]이라고 하면 첫 번째 색상인 Red가 나올 것 같죠?

하지만 실제 결과는 Blue입니다. 왜냐하면 배열의 자리 번호가 다음과 같이 시작하기 때문입니다.

Red → 0

Blue → 1

Green → 2

이렇게 배열 안에서 각 값의 위치를 나타내는 번호를 바로 인덱스(Index)라고 부릅니다. (이 정도는 솔직히 외우세요.)

처음에는 조금 헷갈릴 수 있지만, “배열은 0부터 센다.” 이것만 반복해서 기억해두시면 편하실 거에요.

또 다른 초보자의 흔한 실수는 배열 하나로 정리할 수 있는 값을 굳이 여러 변수로 따로 만드는 것입니다.

예를 들어,

let score1 = 10;
let score2 = 20;
let score3 = 30;

이렇게 작성해도 틀린 것은 아닙니다.

하지만,

let scores = [10, 20, 30];

 

처럼 배열 하나에 넣어두는 것이 나중에 관리하고 사용하기 훨씬 편합니다.

방을 정리하는 것과 비슷합니다.

장난감 10개를 방 여기저기에 하나씩 놔둘 수도 있지만,

하나의 장난감 수납장에 모두 모아두는 것이 훨씬 찾기 편하겠죠?

저라면 당연히 수납장을 선택할 것 같습니다.

한 줄 정리

“배열(Array)”은 여러 개의 관련된 값을 컴퓨터가 한곳에 모아서 보관하고 관리할 수 있게 도와주는 “여러 칸짜리 수납장 친구”라고 생각하면 편합니다.

결론

배열은 프로그래밍에서 정말 자주 사용되는 기초 개념 중 하나에요.

처음에는 Array라는 영어 단어도 낯설고 [ ] 같은 기호까지 등장해서 조금 어려워 보일 수 있습니다.

하지만 오늘은 딱 이것만 기억하셔도 충분합니다.

변수 = 상자 하나

함수 = 일을 하는 작은 기계

배열 = 여러 값을 보관하는 수납장

이렇게 연결해서 생각하면 됩니다.

배열까지 이해하면 앞으로 만나게 될 객체(Object), 반복문(Loop), 조건문(Conditional Statement) 같은 다른 코딩 개념도 훨씬 쉽게 이해할 수 있을 거라고 생각합니다.

여기까지 이해하셨다면 벌써 코딩의 중요한 기초를 하나씩 제대로 쌓아가고 계신 겁니다.

오늘 하루도 긴 글 읽어주셔서 감사합니다. Vector JUN이었습니다.

 

공식 출처

배열과 배열 사용법에 대해 더 자세히 알고 싶다면 다음 공식 자료를 참고할 수 있습니다.

• MDN Web Docs — Java Script Array
  Java Script에서 배열을 만들고, 값에 접근하고, 배열을 사용하는 방법을 설명하는 공식 개발자 문서입니다.
• ECMAScript Language Specification — Array Objects
  JavaScript 표준을 관리하는 TC39에서 제공하는 ECMAScript 공식 명세입니다.