배열의 여러가지 기초 내용 중 중요하기도 하고 나름 약간 꿀팁(?)같은 느낌이라 한번 정리해보자.
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); // true2. 배열의 맨앞, 맨뒤에 값을 추가 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안에 빈배열들은 서로 다른 주소값으로 설정이 되는 것을 파악했다. 그림으로 보면 이런 느낌이라고 볼 수 있다.
이런 미세하지만 중요한 팁들을 알아가는 재미가 아주 쏠쏠하다 ㅋㅎ.
