자바스크립트 배열(Arrays) – JavaScript 3

자바스크립트 배열

변수에는 값을 하나 저장할 수 있는데 이런 식으로는 대량의 데이터를 처리하는데 불편합니다. 그래서 거의 모든 언어에서 배열(Array) 자료형을 제공하고 있습니다. 배열에서는 하나의 변수에 여러개의 값을 분리해서 저장할 수 있습니다.

배열의 기본적 아이디어는 같은 데이터 타입을 연속적으로 순서가 있도록 나열하는 것 입니다. 예를 들어 var num1 이 정수형 변수 하나를 선언하는 것이면 var myNum = new Array() 는 배열 객체를 선언한 것 입니다. 배열이란 형태가 만들어졌으니 이제 데이터를 추가할 수 있습니다.

배열은 동적 메모리의 할당을 필요로 하기에 new 키워드를 사용하지만 이를 줄이면 var myNum = [] 가 됩니다. 훨씬 간소한 방식이죠.

배열의 초기화

배열의 초기화를 해봅시다. 배열의 초기화를 작성하는 동안 특성에 익숙해질 수 있습니다. 배열의 요소는 쉼표, 로 구분하여 초기화 할 수 있고 배열에는 인덱스가 있습니다. 이는 메모리의 인접공간에 순서대로 저장되는 것을 의미합니다.

자바스크립트에서 배열은 객체(Object)의 하나로 멤버변수와 메소드를 가지고 있는데요. 이는 객체지향 프로그래밍의 특징입니다. length 에는 배열의 요소 개수를 저장합니다.

> var myWeek = ['월', '화', '수', '목']
undefined
> myWeek
[ '월', '화', '수', '목' ]
> myWeek[0]
'월'
> myWeek[1]
'화'
> myWeek[2]
'수'
> myWeek[3]
'목'
> myWeek.length
4

배열의 특징

위 예제에 이은 몇가지 예제로 자바스크립트 배열의 특징을 살펴보겠습니다. 우선 concat 과 같은 메소드를 사용할 수 있죠. string (문자열) 메소드에도 비슷한 사용법이 있는데 이는 문자열이 대표적인 배열 방식이기 때문입니다. 문자열은 순서가 정해져 있기 때문에(당연하지만 순서를 바꾸면 의미가 바뀐다) 대표적인 배열 구조를 갖습니다. 또한 문자열도 객체입니다.

배열을 공부할 때 문자열과 비교하면서 하면 구조를 읽는데 도움이 됩니다.

자바스크립트는 동적 언어이기 때문에 사이즈의 변경이 자유롭습니다. 아래를 보면 원래 myWeek는 요소가 4개인데 6번 요소에 할당을 합니다. (인덱스 5) 그럼 5번 요소는 자동으로 빈 공간이 할당됩니다. 인덱스 10 할당하면 그 아래 것들은 빈 아이템으로 생성이 됩니다.

이것은 장점이기도 하지만 시멘틱 에러의 위험이 있습니다. 원래 배열 크기가 4였는데 실수로 5번째 인덱스를 사용하더라도 런타임은 오류를 잡아내지 못합니다. 이런 것을 시멘틱 에러(Semantic Error – 의미상 오류)라고 합니다.

> myWeek.concat(['금','토','일'])
[
  '월', '화',
  '수', '목',
  '금', '토',
  '일'
]
> myWeek[5] = ['new week']
[ 'new week' ]
> myWeek
[ '월', '화', '수', '목', <1 empty item>, [ 'new week' ] ]
> myWeek[10] = ['new distance week']
[ 'new distance week' ]
> myWeek
[
  '월',
  '화',
  '수',
  '목',
  <1 empty item>,
  [ 'new week' ],
  <4 empty items>,
  [ 'new distance week' ]
]
>

배열 메소드

위에서 언급한 것 처럼 배열은 문자열과 비슷한 특징이 있습니다. 그래서 문자열과 배열은 메소드도 비슷한데요. 서로 혼동하지 않도록 주의합니다. 내가 문자열을 처리하는 건지 배열을 처리하는 건지 헷갈릴 수 있습니다.

메소드는 concat, join, toString, sort 등이 있습니다. 자세한 사용법은 MDN 문서를 참고하도록 합니다. 참고문서에 있는 Array – JavaScript MDN 에 들어가보시면 굉장히 자세하게 설명이 되있습니다. 한글화도 되있습니다. 미국의 유명한 자바스크립트 개발자는 10년이 넘게 MDN을 사용하고 있다고 합니다. 문서화에 있어서는 거의 최고 수준입니다.

메소드의 종류가 많은데 그것들을 다 공부하는 것은 효율적인 방법이 아닙니다. 가장 기본이 되는 메소드들만 실습한 후에 전체적인 메소드의 이름과 설명을 쓰윽 읽어보는 것을 추천합니다. 프로젝트를 진행할 때 필요한 메소드들을 찾을 수 있는 정도는 파악할 필요가 있습니다. 그러나 메소드 하나하나를 테스트하는데 시간을 쏟기에 MDN은 방대합니다. 알아서 시간 조정을 해야 합니다.

현대 언어들은 워낙 라이브러리가 방대하기 때문에 그것을 다 외우는 방식은 무리죠. 의미도 없구요. 그런데 그들이 필요할 때 꺼내서 응용할 수 있는 실력은 갖춰야 합니다. 어찌보면 이게 현대 프로그래밍의 교습방식의 논란에 원인을 제공하죠.

응용이 가능한 프로그래머라… 어떻게 가르치고 배워야 그런 사람이 될 수 있을까요? 개인적으로 최근에 AR기술 발전을 보면 미래에는 프로그래밍도 인공지능이 가르쳐 줄거라 생각하는데요.

일단 프로그래밍이 사람이 사람에게 가르치기엔 매우 빡치는 공부입니다. 또 모든것에 온라인화가 진행되다 보니 요새는 그냥 Udemy나 유튜브에서 배우는게 일반화가 된 것 같은데요.

사람이 사람을 직접 가르친다는 방식 앞으로는 안먹힐 것 같다는 생각이 듭니다. 비슷하게 우리가 라이브러리를 사용하는 방법에 대해서도 생각할 꺼리가 될 것 같습니다. 저 수많은 메소드 중에 어떤 것을 사용해야 하는지 누가 나에게 가르쳐 주진 않습니다.

요약

자바스크립트 배열에 대하여 알아봤습니다.

어떤 때는 MDN 하나만을 의지하고 학습을 해도 충분할 때가 있습니다.

자바스크립트가 좀 빡세지만 인터넷의 모든 지식들은 다 연결되어 있기 때문에 열린 마음으로 접근하는 자세가 필요합니다. 이 튜토리얼도 수많은 같은 내용의 튜토리얼 중의 하나입니다. 단지 정리하는 방식에서 나름의 방식으로 접근할 뿐입니다.

인터넷의 좋은 문서를 많이 참고할 수록 실력은 늘게 됩니다. 다만 본질까지 이해할 수 있느냐? 그건 다른 문제입니다. 아직까지 인터넷이라는게 빠른 지식을 원하는 사용자에 최적화 되있기 때문입니다. 결국 인터넷의 역사가 길어질 수록 깊이 있는 문서들도 늘어날 거라 생각하는데요. 이 웹사이트도 그런 취지로 운영하고 있습니다.

어떤 특정한 답만 주는 문서보다는 주제에 대한 각도가 다른 생각들이 담겨있는 튜토리얼을 만드는 것이 목표입니다. 구글에서 많이 볼 수 있을지는 모르겠지만요 ㅋ

참고문서

Array – JavaScript | MDN (mozilla.org)