JavaScript : 배열

앞서 배운 변수는 JS에서 사용할 수 있는 다양한 타입의 값을 넣을 수 있지만, 하나의 변수에는 하나의 값만 넣을 수 있다. 대량의 데이터를 쉽게 다루기 위해 사용하는 것이 바로 배열(Array)과 객체(Object)이다. 

 

---

1. 배열 기초

• 배열은 순서가 있는 값을 의미한다. 이 값을 element라고 부른다.
• 배열의 순서는 index라고 부른다. 1이 아닌 0부터 번호를 매긴다.
• 대괄호[]로 배열을 정의하고, 배열 안의 element는 쉼표로 구분한다.

let myNum = [73, 98, 3, 61, 11];

// 0번째 인덱스값은 73이다.
// 2번째 인덱스값은 3이다.

 

배열의 값에 접근하기

배열이름[인덱스]를 통해 접근한다. 

let fruits = ['banana', 'apple', 'pineapple'];

fruitrs[2]; // 'pineapple'
fruitrs[3]; // 3번째 인덱스 값은 존재하지 않기 때문에, undefined가 출력된다.

배열 안에 배열을 넣고 접근할 수도 있다.

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

myNumber[1]; // 1번째 인덱스 : [73, 8]
myNumber[1][0]; // 1번째 인덱스의 0번째 값 [73]

단순히 배열 이름만 작성하면 모든 요소를 나열해 준다.

 

 

배열에서 할 수 있는 것들

📌 배열의 길이 알아내기

Array.length를 이용한다. '점.'을 이용해 변수가 가지고 있는 property(속성)에 접근할 수 있다.

let myNumber = [73, 98, 86, 61];
myNumber.length; // 4

let playlist = ['Learning', 'Chapstick', 'Cutie'];
playlist.length; // 3

 

📌 배열의 요소 추가하기

Array.push : 배열의 마지막에 요소 추가하기

Array.unshift : 배열의 가장 앞에 요소 추가하기

let myNum = [73, 98, 86, 61];
myNum.push(15); 
// myNum = [73, 98, 86, 61, 15];

let myNum2 = [73, 98, 86, 61];
myNum2.unshitf(13); 
// myNum2 = [13, 73, 98, 86, 61];

 

📌 배열의 요소 삭제하기

Array.pop : 배열의 마지막 요소 삭제하기

Array.shift : 배열의 가장 앞에 요소 삭제하기

let myNum = [73, 98, 86, 61];
myNum.pop(); 
// myNum = [73, 98, 86];

let myNum2 = [73, 98, 86, 61];
myNum2.shitf(); 
// myNum2 = [98, 86, 61];

 

 

---

2. 배열과 반복

반복문과 배열은 자주 조합된다. 반복문을 이용해 배열의 element를 한번씩 출력해 보자.

let myNum = [73, 98, 86, 61];

// 문제 : 배열 myNum의 n번째 인덱스를 출력하자
// myNum[0], myNum[1], myNum[2], myNum[3]으로 출력 가능
// 대괄호 안에 들어가는 수를 바꿔주면 된다!

for (
    let i = 0; // 0번째 인덱스부터 시작
    i < myNum.length; // 인덱스의 수(3)가 myNum의 길이(4)보다 작을때까지
    i++ // 인덱스 순서대로 출력
	) 
{
    console.log(myNum[i]) 
    // 위의 조건이 끝날 때까지 myNum의 i번째 인덱스 값을 출력
}

 

 

 

---

3. 배열 매서드

📌 Array.isArray

배열도 데이터타입의 일종이다. 우리가 아는 데이터타입으로는 string, number, boolean 등이 있다. 이런 데이터타입의 값을 확인하기 위해 사용하는 것이 typeof 연산자이다. 만약 배열을 typeof로 구분해보면 어떨까?

let str = '문자열';
let num = 15;
let bool = 5<2;
let myNum = [10, 20, 40, 10];

typeof str // string
typeof num // number
typeof bool // false
typeof myNum // object

배열의 이름을 구분해도, 모든 배열을 확인해도 object라는 단일 값만 나온다. 이때 사용하는 것이 Array.isArray이다.

let myNum = [10, 20, 40, 10];

Array.isArray(myNum)
Array.isArray([10, 20, 40, 10])
Array.isArray([])

// true

Array.isArray의 괄호() 안에는 검사하고 싶은 객체를 넣는다. 객체의 데이터타입이 배열이면 true를, 아닐면 false를 출력한다.

 

📌 indexOf & includes

특정 배열에 특정 요소가 있는지, 없는지 확인할 수 있는 명령어. 배열이름.indexOf(확인하려는 요소) 형태로 사용한다. 확인하려는 요소는 대소문자를 구분하기 때문에 확실히 구별해 줘야 한다.

let vanguard = ['Hunter', 'Titan', 'Worlock'];

vanguard.indexOf('Titan'); // 결과값 1
vanguard.indexOf('Worlock'); // 결과값 2
vanguard.indexOf('worlock'); // 결과값 -1
vanguard.indexOf('Fallen'); // 결과값 -1

// 결과값의 숫자는 해당 요소가 위치한 인덱스를 가리킨다
// 요소가 없을 시 결과값은 -1로 나온다.

 

indesOf를 사용하면 배열에 요소가 포함되었는지 여부를 true, false값으로 리턴하는 함수를 만들 수도 있다.

let vanguard = ['Hunter', 'Titan', 'Worlock'];

function hasElement(array,element) { 
	let isPresent = array.indexOf(element) !== -1;
	return isPresent
}

hasElement(vanguard,'Hunter'); // true
hasElement(vanguard,'Fallen'); // false

또는 이미 내장된 명령어인 includes로도 사용할 수 있다.

let vanguard = ['Hunter', 'Titan', 'Worlock'];

vanguard.includes('Hunter'); // true
vanguard.includes('Fallen'); // false

includes가 이미 존재하지만 indexOf의 중요성을 더 기억해 주자. includes는 요소의 존재여부만 알 수 있지만, indexOf는 인덱스 값까지 알 수 있기 때문. 또한 includes는 브라우저 호환성이 indexOf보다 조금 부족하다.