JavaScript 기초6 배열(Array)

 

 

• 학습 내용

이번 시간에 학습할 내용은 배열이다. 배열은 같은 타입의 변수들로 이루어진 유한 집합으로 정의된다. 배열은 요소와 인덱스로 는데,구분하는데, 배열을 구성하는 각각의 값을 요소(element)라 하고, 배열의 위치 그리고 순서를 가리키는 숫자인 인덱스(index)라 한다. 기본적으로 JS에서는 대괄호(square bracket)를 이용해서 배열을 만든다. 그리고 각각 요소를 쉼표로 구분한다. 

 배열을 선언하는 방법은 크게 두 가지가 있다. new Array()를 사용하는 방법과 []를 할당하는 방법이다.

let arr = new Array();
let arr = [];

이렇게 해서 빈 배열을 만들 수 있다. 두 방법 다 괄호 안에 값을 넣으면 배열의 요소가 추가된다. 또 배열은 조회가 가능하다. 

let myNumber = [73, 98, 86, 61, 96]
myNumber[3]; // 61

변수의 대괄호에 인덱스를 넣으면 그 인덱스의 요소를 출력해준다. 값을 변경하는 경우 역시 마찬가지로 인덱스를 통해서 가능하다.

myNumber[3] = 200;
myNumber; // [73, 98, 86, 200, 96]

배열은 배열 안에 배열을 추가할 수도 있다. 배열 안에 배열을 추가하여 행렬을 만들기도 하고 차수를 증가시키기도 한다. 

let myNumber = [
  [13, 30], 
  [73, 8], 
  [44, 17]
];
myNumber[1]; // [73, 8]
myNumber[1][0]; // 73

 

 이제는 배열을 조작하는 방법에 대해서 알아보도록 하겠다. 기본적으로 배열의 length프로퍼티를 사용 거나 push와 pop 그리고 shift와 unshift를 사용하여 배열의 요소를 더하거나 뺄 수 있다.

1) length

 length프로퍼티의 경우 배열을 조작하면 자동으로 갱신되는데, 흔히 실수하는 것이 length프로퍼티를 단순히 배열 내 요소의 개수를 구하는 속성이라고 생각하는 것이다. 그러나 정확히 말하면 가장 큰 인덱스에 1을 더한 값을 구하는 것이다. 만약 배열에 요소가 하나만 있다고 할 때 요소의 인덱스가 큰 정수이면 length프로퍼티도 그만큼 커진다.

let arrNum = []
arrNum[123] = "87"
console.log(arrNum.length); // 124 , 빈 배열에 추가된 요소는 하나뿐이지만 124를 출력한다

length의 값을 감소시키면 배열이 잘린다.

let arr = [1, 2, 3, 4, 5];
arr.length = 2;
console.log(arr); // [1, 2]
arr.length = 0; // 배열을 비움

주의할 점은 length로 자르면 복구되지 않는다는 점이다. 0으로 하면 배열을 비운다.

2) push와 pop

 push와 pop은 배열의 맨 뒤에 요소를 추가하거나 맨 뒤의 요소를 지운다.

let myNumber = [73, 98, 86, 61];
myNumber.push(96);
myNumber; // [73, 98, 86, 61, 96]
myNumber.pop();
myNumber; // [73, 98, 86, 61];

 

3) shift와 unshift

 push와 pop과 달리 shift와 unshift는 맨 앞의 요소를 지우거나 더한다.

let myNumber = [73, 98, 86, 61];
myNumber.shift();
myNumber; // [98, 86, 61]
myNumber.unshift(31);
myNumber; // [31, 98, 86, 61]

push와 pop에 비해 shift와 unshift의 계산 속도가 훨씬 느리다. 왜냐하면 앞의 인덱스를 지우거나 더하기 때문에 배열의 전체 자리를 움직이게 한다. 그래서 속도가 배열의 변화가 없는 push와 pop에 비해서 느리다.

 

 배열을 사용할 때 반복문을 조합해서 사용하는 경우가 많다. 배열을 한 번씩 출력하는 반복문을 작성해보겠다. 조건으로 숫자(n)는 0부터 시작하고(인덱스의 시작이 0이기 때문에), 배열의 길이보다 작을 때 (마지막 인덱스가 배열의 길이보다 1이 작음) 1씩 증가하는 조건이다. 우리가 주로 사용하는 for문으로 작성하면 이렇다.

for (let n = 0; n < myNum.length; n++) {
  console.log(myNum[n]);
}

for ~ of문으로도 배열의 반복문을 만들 수 있다. 다만 위와는 다르게 인덱스는 얻을 수 없고 값만 얻을 수 있다.

for (let n of myNum) {
  console.log(n);
}

 

 배열인지 아닌지 확인이 필요한 경우가 있다. 원래 타입을 확인할 때는 typeof를 통해 할 수 있었다. 그러나 이 방법으로는 배열과 객체를 구분할 수 없다. 

typeof [1, 2, 3] // 'object'
typeof { a: 1 } // 'object'

그래서 배열을 확인할 때는 Array.isArray를 사용하여한다. 

Array.isArray('this'); // false
Array.isArray([1, 2, 3]); // true
Array.isArray({ a: 1 }); // false

문자열과 객체는 false를 출력하지만 배열의 경우는 true를 출력함을 알 수 있다.

 

  마지막으로 배열이 변수 안에 포함되어있는지 아닌지 확인하는 방법을 알아보겠다. 이 경우에는 앞에서 배웠던 문자열을 취급하는 것과 방법이 같다. 

let words = ['How', 'about', 'you'];
words.indexOf('about'); // 1

 

배열에 특정 요소가 있는지 없는지 검사가 필요한 경우도 종종 있다. 그 방법에 대해 3가지로 살펴보겠다.

1) indexOf의 기능 중 값이 없으면 -1을 출력하는 기능 사용

 indexOf는 특정 값의 인덱스를 출력해준다. 그러나 그 값이 없는 경우에는 -1을 출력하는데 이 것을 이용하는 것이다.

words.indexOf('you') !== -1 // true
words.indexOf('me') !== -1 // false

2) 함수를 따로 만들어 사용

 함수로 기능을 구현해서 하는 것 역시 당연히 가능하다.

function hasElement(arr, element) {
  return arr.indexOf(element) !== -1
}

hasElement(words, 'How'); // true

3) includes

 위의 방법 외에 그냥 값의 존재 여부를 확인하는 includes라는 메서드가 따로 있다. 

words.includes('you'); // true
words.includes('me'); // false

단, includes의 경우 호환이 안 되는 브라우저가 있다는 단점이 있다. 대표적으로 인터넷 익스플로러가 호환이 안된다.