2.1 배열
자바스크립트 배열은 타입이 엄격한 다른 언어와 달리 문자열, 숫자, 객체 심지어 다른 배열이나 어떤 타입의 값이라도 담을 수 있다.
var a = [1, "2", [3] ];
a.length; // 3
a[0] === 1; // true
a[2][0] === 3; // true
배열 인덱스는 보통 숫자지만, 배열 자체도 하나의 객체여서 키/프로퍼티 문자열을 추가할 수 있다. (자바스크립트는 이런 점이 독특한 것같음.. 파이썬과 비슷한건가?)
예)
var a = [];
a[0] = 1;
a["foobar"] = 2;a.length; // 1
a["foobar"]; // 2
a.foobar; // 2
그렇지만 키로 넣은 문자열 값이 10진수 숫자로 타입이 바뀌면, 마치 문자열 키가 아닌 숫자 키를 사용한것 같은 결과가 초래된다.
var a = [];
a["13"] = 42;
a.length; // 14
일반적으로 배열에 문자열 타입의 키/프로퍼티를 두는 건 추천하지 않는다..
2.1.1 유사배열
유사배열이란 무엇인가?
예)
var array = [1, 2, 3];
array; // [1, 2, 3]
var nodes = document.querySelectorAll('div'); // NodeList [div, div, div, div, ...]
var els = document.body.children; // HTMLCollection [noscript, link, div script, ...]
위 예제에서 array는 배열이고, nodes와 els는 유사배열이다.
둘은 똑같이 []로 감싸져있기 때문에 둘다 배열로 착각하기 쉽다.
하지만, Array.isArray 메서드(배열인지를 판단해주는 메서드)를 사용한다면?
Array.isArray(array); // true
Array.isArray(nodes); // false
Array.isArray(els); // false
array만 배열인 것을 확인할 수 있음
배열과 유사배열을 구분해야하는 이유는, 유사배열은 배열의 메서드를 사용하지 못한다.
array.forEach(function(el) { console.log(el)}); // 1, 2, 3
els.forEach(function(el) { console.log(el); }); // Uncaught TypeError : els.forEach is not a function
els에 forEach같은 배열 메서드를 사용하게 되면 에러가 발생
이럴 때 해결을 위해, 메서드를 빌려 쓰는 방법이 있다.
배열 프로토타입에서 forEach 메서드를 빌려오는 방법 (call, apply)
Array.prototype.forEach.call(nodes, function(el) {console.log(el});
[].forEach.call(els, function(el) {console.log(el);});
이와 같은 방법을 통해 forEach를 사용할 수 있음. map이나 filter, reduce, slice등의 배열 메서드도 사용가능
최신 자바스크립트에서는 Array.from으로 더 간단하게 할 수 있음
Array.from(nodes).forEach(function(el){
console.log(el)
});
2.2 문자열
보통 문자열은 다지 문자의 배열이라고 생각하지만 자바스크립트 문자열은 실제로 생김새만 비슷할 뿐 문자 배열과 같지 않다.
var a = "foo";
var b =["f","o","o"];a[1] = "0";
b[1] = "0";
문자열은 불변 값이지만 배열은 가변값이다.
a[1] 처럼 특정 문자를 접근하는 형태가 모든 자바스크립트 엔진에서 유효하지 않음
->a.charAt(1)으로 접근해야한다.
다음은 문자열의 순서를 뒤집는 코드이다. 배열에는 reverse()라는 가변 메서드가 준비되어 있지만, 문자열은 그렇지 않음
a.reverse; // undefined
b.reverse(); // ["o","o","f"]
b; // ["o","o","f"]
문자열은 불변 값이라 바로 변경되지 않으므로 배열의 가변 메서드는 통하지 않고 '빌려쓰는 것' 도 안됨
Array.prototype.reverse.call(a);
// 여전히 String 객체 래퍼를 반환함
// for "foo"
그렇다면 방법은
var c = a.split("").reverse().join("");
c; // "oof"
'a'를 문자의 배열로 분할, 문자 배열의 순서를 거꾸로 뒤집음, 문자 배열을 합쳐 다시 문자열로 되돌림
'문자열'자체에 어떤 작업을 빈번하게 수행한다면 문자열을 문자 단위로 저장하는 배열로 취급하는 것이 더 나을 수 있다.
문자열로 나타내야 할 때는 언제나 문자 배열에 join("")메서드를 호출하면 된다.
참고사이트
유사배열관련 https://www.zerocho.com/category/JavaScript/post/5af6f9e707d77a001bb579d2
참고도서
You Don't Know JS (한빛미디어)
