JavaScript - 배열(Array)에 대해 알아보자

Sonny·2019년 8월 28일

목록 보기

8/29

배열 (Array)

배열이란? 한개의 변수에 여러 개의 값을 순차적으로 저장할 때 사용한다.

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

배열 안에 들어있는 값들을 요소(element, item, etc)라고 한다.

var arr = [ 1, '2', ture ];
var arr1 = [ undefined, null, false, NaN, 1000 ];

배열의 값은 어떤 값이라도 배열의 요소로 추가할 수 있으며 종류가 다른 값들도 함께 담을 수 있다.

배열의 특징

배열은 번호가 메겨진 인덱스를 갖는 특별한 유형의 객체이다.
(객체이지만 객체와는 접근 방법이 다름)

var fruits = [ 'apple', 'orange', 'banana' ];
fruits[0];		// 결과 : apple

var fruits = { first : 'apple', second : 'orange', third : 'banana' };
fruits.first;	 // 결과 : apple

배열 요소는 객체가 될 수 있다.
동일한 배열에 다른 유형의 변수를 가질 수 있다.
배열에 객체를 가질 수 있다.
배열에 함수를 가질 수 있다.
배열에 배열을 가질 수 있다. (다차원 배열)

myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;

배열과 객체의 차이점

배열은 숫자 인덱스를 사용한다.
객체는 이름으로 된 인덱스를 사용한다.

배열과 객체의 각 사용시기

JavaScript는 이름으로 된 인덱스(연관 배열)를 지원하지 않는다.
요소 이름이 문자열이 되도록 하려면 객체를 사용해야 한다.
요소 이름을 숫자로 하려면 배열을 사용해야 한다.
요소들의 정렬이 필요할 경우 배열을 사용한다.

배열 사용시 주의점

var points = new Array(40, 100, 1, 5, 25, 10); 	// Bad
var points = [40, 100, 1, 5, 25, 10];          	// Good

생성자 new Array() 대신 []를 사용하는것이 좋다.

배열을 인식하는 방법

1. isArray()이용하기

변수가 배열인지 알고싶은 경우, JavaScript 연산자 array.isArray를 이용하여 알 수 있다.

var fruits = ["Banana", "Orange", "Apple", "Mango"];

Array.isArray(fruits); 

// 결과 : true

하지만 이 방법은 ECMAScript 5가 이전 브라우저에서 지원이 되지 않아 문제가 된다.

2. 자신만의 isArray()함수 만들기

function isArray(x) {
  return x.constructor.toString().indexOf("Array") > -1;
}

// 결과 : true

위 방법은 인자가 배열일 경우, ture를 반환한다. 보다 정확히 얘기하자면, 객체 프로토 타입에 'Array'라는 단어를 포함할 경우 true가 반환된다.

3. instanceof를 사용하기

var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits instanceof Array;

// 결과 : true

위 방법은 instanceof개체가 주어진 생성자에 의해 생성되는 경우, true를 반환한다.

배열 요소 접근

1. 인덱스를 이용하여 접근하기

var food = [ 'pasta', 'steak', 'rice' ];
var myFavoriteFood = food[1];
console.log(myFavoriteFood);

// 결과 : steak

2. 전체 배열에 접근하기

var food = [ 'pasta', 'steak', 'rice' ];
document.getElementById("demo").innerHTML = food;

3. 인덱스를 이용하여 배열의 해당 인덱스 위치에 있는 요소를 수정하기

var fibonacci = [ 1, 2, 3, 5, 8, 13 ];

console.log(fibonacci[4]); 		// 결과 : 8

fibonacci[4] = false;

console.log(fibonacci[4]); 		// 결과 : false

배열의 속성

length

배열의 array.lengthmethod는 배열의 길이를 반환한다.

var fruits = [ 'apple', 'banana', 'orange' ];
console.log(fruits);		   // 결과 : [ 'apple', 'orange', 'grape' ]
console.log(fruits.length);	// 결과 : 3

함수와 매개변수를 응용해서 배열의 길이를 반환해주는 함수 만들어보기

var fruits = [ 'apple', 'grape', 'banana' ];

function getNumOfFruits(array) {
	return array.length;
}
var numOfFruits = getNumOfFruits(fruits);
console.log(numOfFruits);

// 결과 : 3

배열의 Method

1. forEach()

배열의 array.forEach()method는 주어진 함수를 배열 요소 각각에 실행한다.

var array1 = [ 'a', 'b', 'c' ];

array1.forEach(function(element) {
  console.log(element);
});

// 결과: a, b, c

2. indexOf()

배열의 array.indexOf()method는 배열 안 요소의 인덱스를 찾는다.

var fruits = ["apple", "banana", "mango"]

fruits.indexOf("banana");
// 결과 : 1

3. unshift()

배열의 array.unshift()method는 배열의 앞에 요소를 추가한다.

var arr = [];

arr.unshift(1);
arr.unshift(2);

4. push()

배열의 array.push()method는 배열의 끝에 요소를 추가한다.

var arr = [];

arr.push(1); 
arr.push(2);

5. shift()

배열의 array.shift()method는 배열의 앞에서부터 요소를 제거한다.

arr.shift();

6. pop()

배열의 array.pop()method는 배열의 끝에서부터 요소를 제거한다.

arr.pop();

7. splice()

배열의 array.splice()method는 인덱스 위치에 있는 요소를 제거,추가할 수 있다.

array.splice( 인덱스, 인덱스로부터 제거할 요소의 수, 인덱스로부터 추가할 요소명 );

추가할 요소명을 입력하지 않으면 제거만 됨,
제거할 요소에 0을 넣고 추가할 요소명을 넣을 경우 추가만 됨

8. slice()

배열의 array.slice()method는 배열을 복사할 수 있다.

var fruits = [ 'apple', 'mango', 'orange' ];
fruits.slice();

예제

1. 2차원 배열로 체스보드 생성하기

var board = [ 
  ['R','N','B','Q','K','B','N','R'],
  ['P','P','P','P','P','P','P','P'],
  [' ',' ',' ',' ',' ',' ',' ',' '],
  [' ',' ',' ',' ',' ',' ',' ',' '],
  [' ',' ',' ',' ',' ',' ',' ',' '],
  [' ',' ',' ',' ',' ',' ',' ',' '],
  ['p','p','p','p','p','p','p','p'],
  ['r','n','b','q','k','b','n','r'] ];

console.log(board.join('\n') + '\n\n');

// Move King's Pawn forward 2
board[4][4] = board[6][4];
board[6][4] = ' ';
console.log(board.join('\n'));

결과는 다음과 같다.

R,N,B,Q,K,B,N,R
P,P,P,P,P,P,P,P
 , , , , , , , 
 , , , , , , , 
 , , , , , , , 
 , , , , , , , 
p,p,p,p,p,p,p,p
r,n,b,q,k,b,n,r

R,N,B,Q,K,B,N,R
P,P,P,P,P,P,P,P
 , , , , , , , 
 , , , , , , , 
 , , , ,p, , , 
 , , , , , , , 
p,p,p,p, ,p,p,p
r,n,b,q,k,b,n,r

2. 배열을 사용하여 일련의 값을 테이블처럼 표시하기

values = [];
for (var x = 0; x < 10; x++){
  values.push([
    2 ** x,
    2 * x ** 2
  ]);
};
console.table(values);