배열(Array) 기초

배열의 여러가지 기초 내용 중 중요하기도 하고 나름 약간 꿀팁(?)같은 느낌이라 한번 정리해보자.

1. 배열은 typeof로 알 수 없다!

let a = 1;
let b = 'str';
let obj = {name: 'Chung', age: 28};
let arr = [1,2,3,4];

typeof a;	// "number"
typeof b;	// "string"
typeof obj;	// "object"
typeof arr;	// "object"

위와 같이 배열인 arr는 객체인 obj와 같은 "object"라는 값을 리턴받는다. 그럴 때 쓸 수 있는 유용한 기능이 바로

Array.isArray!

이 녀석을 사용하게 되면 선언한 변수가 만약 배열이라면 true의 bool값을 리턴해준다.

let arr = [];	// 빈 배열 선언

Array.isArray(arr);	// true

2. 배열의 맨앞, 맨뒤에 값을 추가 or 빼기

자. let arr = [1, 2, 3, 4]; 이렇게 arr라는 배열이 있다고 쳤을 때, 배열을 이렇게 가지고 놀 수 있다^^

1) 배열 뒤에 element 추가

arr.push(5);	// arr = [1, 2, 3, 4, 5]

2) 배열 뒤에 element 삭제

arr.pop();	// 5 -> arr = [1, 2, 3, 4]

3) 배열 앞에 element 추가

arr.unshift(0)	// arr = [0, 1, 2, 3, 4]

4) 배열 뒤에 element 삭제

arr.shift()	// 0 -> arr = [1, 2, 3, 4]

너무 재밌다.

3. indexOf와 includes

배열을 사용하다보면 배열에 어떠한 특정 element가 속해 있는지를 알고 싶을 때가 있다. 그럴 때indexOf 혹은 includes를 활용할 수 있다.

let words = ['chung', 'seong', 'jun'];

// words라는 배열 내에 'chung'이라는 element의 인덱스가 존재하지 않지 않으면(ㅋㅋ)
words.indexOf('chung') !== -1	// true
// words라는 배열 내에 'seong'이라는 element가 포함되어 있냐?
words.includes('seong')		// true

// 존재하지 않는 것
words.indexOf('wow') !== -1	// false
words.includes('Yes')		// false

그럼 둘 중에 뭘 쓰는게 좋은가?

에 대한 답은 indexOf 이다. 그 이유는 바로 브라우저간의 호환성 때문이다.

위 처럼 includes는 Internet Explorer에서 호환되지 않는다...;
이놈의 익스플로러...;;
출처: MDN Web Docs

4. 배열의 Immutability

아직 배우는 단계이지만 배열관련 문제들을 풀다가 알게된 것이 있다. 바로 배열의 Immutability이다. 예시로 한번 봐보자.

let arr = [1, 2, 3, 4];	
let newArr = arr;	// [1, 2, 3, 4]

newArr.push(5);

console.log(newArr);	// [1, 2, 3, 4, 5]
console.log(arr);	// [1, 2, 3, 4, 5]

이처럼 newArr라는 새로운 변수로 배열을 선언해서 push를 해도 기존 arr를 참조하고 있기때문에 기존 arr의 값도 변경된 것을 볼 수 있다.

이럴 때, Immutability를 위해 slice를 활용해 기존 배열을 복사하여 기존 값을 참조하지 않고 사용이 가능하다.

let arr = [1, 2, 3, 4];
let newArr = arr.slice(); // [1, 2, 3, 4]

newArr.push(5);

console.log(newArr);	  // [1, 2, 3, 4, 5]
console.log(arr);	  // [1, 2, 3, 4]

slice는 범위를 정해주면 배열이나 문자열의 해당 범위를 잘라주기도 하지만 이렇게 인자를 넣어주지 않고 쓰면 전체 복사기능(?) 같은 좋은 기능을 가지고 있는 듯 하다.

21.05.26 추가 내용

5. [] !== []

이처럼 빈배열과 빈배열은 서로 다른 값이더라...이 부분은 개인적으로 신기했던 부분이다. 조건문에서 if (arr === [])로 설정하고 문제를 풀어본 적이 있는데, 안되길래 찾아보니 JavaScript안에 빈배열들은 서로 다른 주소값으로 설정이 되는 것을 파악했다. 그림으로 보면 이런 느낌이라고 볼 수 있다.

이런 미세하지만 중요한 팁들을 알아가는 재미가 아주 쏠쏠하다 ㅋㅎ.