4. 배열
객체는 한 변수 혹은 상수에 여러가지 정보를 담기 위한 자료형이라고 말씀드렸습니다. 그런데 위에 설명한 객체와는 다른 방식으로 여러가지 정보를 담을 수 있는배열, 그리고 특정 동작을 수행하는함수도 객체입니다. 이번 파트에서는 배열에 대해서 알아보겠습니다.
const array = [1, 2, 3, 'test', {sample: 'code'}];
const emptyArray = [];배열은 [ ] 로 감싸서 데이터를 표현합니다. 이 배열안에는 어떠한 자료형도 다 들어갈 수 있습니다. 다른 프로그래밍 언어를 먼저 배우신 분들은 이러한 배열의 모습이 너무나도 생소할 텐데요, 자바스크립트에서 배열의 특징은 배열의 길이를 미리 정할 필요가 없다는 점, 그리고 함수 또한 배열의 요소로 넣을 수 있다는 점입니다. 함수도 크게보면 객체거든요!
위의 코드를 보면 array 에는 숫자, 문자열, 객체가 들어있는 것을 확일 할 수 있습니다. 이렇게 여러개의 값을 표현할 때는 쉼표 (,) 로 구분해서 코드를 작성하시면 됩니다. 이렇게 배열 안에 들어간 것들을 우리는 요소 (item) 라고 부릅니다. 객체와 다른 점은 어떤 값을 찾기위해 사용하는 키(key) 가 없다는 것입니다. 단순히 요소들을 순서대로 나열했을 뿐이죠. 그래서 배열은 보통 반드시 찾기위해 필요한 키를 사용하는 것이 아니라, 여러 개의 값을 단순히 나열해서 한 번에 보관하고 싶을 때 사용합니다.
배열에서 값을 꺼내는 방법은 정말 간단합니다. 몇 번째에 있는지를 나타내는 인덱스 (index) 값만 뒤에 붙여주면 되거든요. 모든(아마도) 프로그래밍 언어에서는 1이 아니라 0부터 수를 세기 시작합니다. 따라서 배열 변수 이름 뒤에 [0]을 붙이면 첫 번째 요소가, [1]을 붙이면 두 번째 요소가 선택됩니다.
array[0]; // 1
array[3]; // 'test'배열도 객체의 한 종류인데요, 다만 객체보다 몇 가지 추가적인 기능이 제공됩니다.객체 안의 속성으로 함수가 있으면 메소드라고 부른다고 저번 시간에 설명했었죠? 이렇게 배열에서 제공하는 추가적인 기능도 자바스크립트 안에서 배열 자체를 구현한 내용 안에 함수로 구현되어있기 때문에 메소드라고 부릅니다. 프로그램을 만들다보면 자주 배열을 쓰게되는 만큼, 필요한 메소드를 사용하게 되면 편리하게 코드를 짤 수 있게 됩니다.
물론 모든 메소드를 외워서 사용하면 좋지만, 우리는 공부할게 산더미이란 말이죠... 자연스럽게 사용하다보면 외워지는 메소드들도 있고, Vs Code나 Intellij와 같이 통합 개발 환경(Integrated Development Environment, IDE)에서 자동완성으로 어떤 메소드들이 있는지 도와주기 때문에 억지로 외울 필요는 없습니다. 여기서 구현되어있는 메소드들은 정말 성능이 좋게끔 구현이 되어있기 때문에 우리가 같은 내용을 구현하는 것 보다 빠른 경우가 많아요. 배열 안에는 어떤 메소드들이 있는지 알아봅시다.
4-1. array.length
const array = [1, 2, 3, 4];
array.length; // 4배열의 길이를 반환합니다. 배열의 요소 수가 변동함에따라 length도 반영되서 결과값을 반환합니다.
4-2. array.join( 구분자 )
const array = ['a', 'b', 'c'];
array.join(); // 'a,b,c'
array.join(':'); // 'a:b:c'배열의 요소들을 구분자를 이용해서 만든 하나의 문자열을 반환합니다. 구분자를 입력하지 않으면 기본 구분자인 쉼표를 이용해서 결과가 반환됩니다. 이렇게 프로그래밍에서 어떤 작업이나 입력을 하지 않아도 자동으로 하게끔 설정되어 있는 것, 혹은 기본 설정값을 우리는 Default라고 부릅니다. 이 디폴트라는 영어단어 의미는 "무언가 있어야 하는데 없는 경우에 되는 어떤 것", "무언가 해야 하는데 안 했을때 나타나는 결과"이기 때문에 더욱이 프로그래밍에서 많이 쓰이는 단어입니다. 계속해서 설명에서 나오는 용어들에 익숙해지시면 공부하기 위해 읽는 다른 글들을 이해하시는데 많은 도움이 될겁니다 :)
4-3. array.concat(합칠 요소들)
let array = [1, 2, 3];
array = array.concat('a', 'b'); // [1, 2, 3, 'a', 'b']
array.concat(['test', 'sample']); // [1, 2, 3, 'a', 'b', 'test', 'sample']위의 코드를 순서대로 해석을 해보자면,
1. 코드에서 array 변수에 세 개의 요소 [1, 2, 3]을 넣었습니다.
2. 그 후에 array.concat('a', 'b')의 결과를 다시 array에 대입합니다.
3. 마지막으로 array.concat(['test', 'sample'])을 수행합니다.
이렇게 concat 메소드 옆에 'a', 'b' 혹은 ['test', 'sample'] 과 같은 값들을 괄호 안에 넣었는데요, 이와 같은 방식으로 메소드 안에 전달하기 위해 괄호 안에 넣는 값들을 전달인자(argument) 라고 부릅니다. 위의 코드를 보면 concat 메소드 안에 'a', 'b'를 전달했고, 이는 'array 배열 뒤에다가 'a', 'b'를 붙여줘!'라고 해석할 수 있습니다.
참고로 concat은 concatenate의 약자로 사슬같이 잇다라는 의미입니다.
4-4. array.reverse()
const array = ['hi', 'hello', '안녕'];
array.reverse(); // ['안녕', 'hello', 'hi']원래의 배열 요소를 뒤집어서 반환합니다. 자동으로 결과가 배열에 저장됩니다.
4-5. array.push(데이터), array.pop()
const array = [];
array.push(1); // 1
array.push(3); // 3
array.push(6); // 6
array; // [1, 3, 6]
array.pop(); // 6
array; // [1, 3]배열의 맨 뒤에 값을 추가하거나 빼는 메소드입니다. 이 메소드도 마찬가지로 작업 후의 결과가 배열에 반영됩니다. 만약 push를 하면 실제로 배열의 길이가 늘어나고, pop은 배열의 마지막 요소를 빼서 반환하게 되므로 배열의 길이가 줄어들게 됩니다.
이 외에도 배열은 정말 다양한 메소드를 지원하는데요, MDN JavaScript Array 설명을 보면서 어떤 메소드가 있고, 어떻게 동작하는지 참고하시면 됩니다! 다른 메소드들은 아직 배우지 않은 개념들을 사용하는 것들이 많아서 이만 생략하겠습니다.
다음 시간에는 객체의 종류 중 마지막인 함수에 대해서 알아보도록 하겠습니다!
댓글