[JS] 10. 자바스크립트의 기초 문법 - 배열

Q : 자바스크립트에서는 배열을 사용하나요?

A : 자바스크립트에는 많은 데이터 타입이 존재하는데, 그 중 배열타입또한 존재합니다.

자바스크립트는 여러 데이터 타입을 가지고 있습니다. String, Number를 시작으로 Object, Array등 이 있죠. 이중 Array를 포함한 여러 데이터 타입들이 자바스크립트 뿐만 아니라 다른 타 언어들 에게도 포함됩니다.

선언

배열의 선언방식은 new키워드를 사용하는 리터럴방식과 [ ]를 이용하는 배열리터럴 방식이 있습니다.

let Students = 

let Students = ['KJW', 'JSH', 'YGJ', 'KYG', 17];
// 배열리터럴 방식

let Students = new Array('KJW', 'JSH', 'YGJ', 'KYG', 17);
// 리터럴 방식

위와 같이 배열을 선언할 수 있습니다. 하지만 제가 지금까지 코딩을 하면서 리터럴방식을 사용한적은 정말 거의 드물었던 것 같습니다. 배열리터럴 방식을 손에 익히기 위해 노력하시면 좋을 것 같습니다.

저의 경우에 리터럴방식을 이용하는 경우는 배열의 길이를 미리 선언해두는 경우 밖에 없던 것 같습니다.

let Students[] = new Array(5);
// Students[]에는 아무런 값이 없고, 배열의 길이는 5이다.

호출

배열을 선언했으면 호출을 해야겠죠? 배열을 호출하는 방법을 알기전에 배열에 대해 설명드리겠습니다. 배열안에 들어가는 인자들은 0부터 시작합니다. 무슨의미인지 잘 이해가 안가시겠죠? 코드를 통해 설명드리곘습니다.

console.log(Students[0]);
// 'KJW'

console.log(Students[4]);
// 17

이와 같이 위에서 선언했던 Student배열의 0번째 인자값은 'KJW'라고 하는 문자열입니다. 또한 4번째 인자값은 17이죠. 배열의 길이가 5칸이니까 0부터 1, 2, 3, 4 이렇게 총 5개의 인자를 갖고있을 수 있는 것 입니다. 이해가가시나요?

배열의 속성

배열또한 객체에 속하기 때문에 배열또한 속성을 갖습니다. 지금부터 배열이 갖는 속성에 대해 몇가지만 설명드리겠습니다.

length - 배열의 index길이를 반환

let a = [1,2,3,4,5,6,7,8];

console.log(a.length);
// 8

prototype - 배열에 관련된 메소드를 추가합니다.

이 속성은 특별합니다. 기존에 없던 메소드를 우리가 직접 구현할 수 있게 해줍니다.

let a = [1,2,3];

console.log(a.first());
// Error

위의 first() 메소드가 작동하지 않는 이유는 first라는 메소드가 존재하지 않기 때문입니다. 이제부터 사용할 수 있도록 만들어보겠습니다.

first메소드는 배열의 첫번째 인자를 반환해줍니다.

if (!Array.prototype.first) {
  Array.prototype.first = function() {
    return this[0];
  }
}

이러한 방식으로 메소드를 만들어 보았습니다.

let a = [1,2,3];

console.log(a.first());
// 1

배열의 메소드

배열은 여러가지 메소드를 갖고있습니다. 여러 메소드가 있지만 쉽지 않은 개념이 포함된 메소드들이 있기 때문에 몇가지만 알려드리도록 하겠습니다. 더 궁금하시다면 Google에 물어보시기 바랍니다 :D

concat - 배열을 합친다

let a = [1,2,3];
let b = [4,5,6];

a.concat(b);

console.log(a);
// [1,2,3,4,5,6]

reverse - 배열을 역순으로 재배치

let a = [1,2,3,4,5];

a.reverse();

console.log(a)
// [5,4,3,2,1]

sort - 배열을 오름차순으로 정렬해줌

let a = [7,6,2,3,5,4,1];

a.sort();

console.log(a);
//  [1,2,3,4,5,6,7]

map - 배열의 index의 개수만큼 실행하되 index인자를 매개변수로 삼는 함수를 생성

let a = [1,2,3,4];

a.map((index) => {
  console.log(index);
});

// 1
// 2
// 3
// 4

map메소드또한 사실 중상급 개념에 속하긴 합니다. 하지만 알아두면 좋을 것 같다는 생각에 넣어봤습니다. 메소드안에서 사용한 =>는 화살표함수라고 불리는 것으로 나중에 상급개념에서 설명하도록 하겠습니다. 또한 index는 제가 임의로 생성한 매개변수명이기 때문에 크게 신경쓰지 않으셔도 됩니다.

지금까지 자바스크립트의 배열에 대해 살펴보았습니다. 이해가 가시나요? :D 자바스크립트를 제외하고도 타 언어에서도 중요하다고 생각되는것이 배열이라고 생각합니다. 꼭 여러번 사용해 보시기 바랍니다.

마무리
다음 포스팅 에서는 《기초문법-문자열》에 대해 포스팅 하도록 하겠습니다.