본 강의는 자바스크립트의 기초를 대충 안다고 가정하고 시작하는 조금 심도 깊은 포스팅이다.
완전 처음부터 배우고 싶다면 다른 블로그나 책의 글을 참조하기를 바란다.
특별한 추가 설명이 없다면 nodejs가 아닌 브라우저에서 사용하는 js를 의미한다.
참고:
js에서는 문법이 자유롭다보니 Object를 사용해도 배열처럼 보이게 할 수 있다.
가령 아래의 예제를 보도록하자.
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="outer">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<script>
let outer = document.querySelector('#outer').children;
console.log(outer);
console.log(typeof outer);
console.log(Array.isArray(outer));
console.log(outer instanceof Array);
</script>
</body>
</html>
흔히 사용하는 예제중 하나이다.
특정 돔을 찾아서 그 아래의 자식들을 리턴하는 예제는 아주 자주사용된다.
onsole.log(typeof outer);
그럼 그 돔의 타입은 뭐냐?
console.log(Array.isArray(outer));
그녀석이 배열이냐?
console.log(outer instanceof Array);
배열과 같느냐?
이제 실행해보자.
출력된 값을 보면 알 수 있겠지만 마치 배열 처럼 사용할 수 있다.
그러나 타입은 Object이고 심지어 비교해보면 배열이 아니라고 false가 출력되는것을 알 수 있다.
이렇게 배열이 아닌데 배열인척 하는 것을 유사배열 객체 혹은 유사배열이라고 부른다.
js측에서는 당연히 이를 인지하고 있다.
여러분도 유사배열을 만들 순 있다.
let arr = {
0: 'i',
1: 'am',
2: 'iron',
3: 'man',
length: 4
};
유사배열은 위와같은 형태로 선언하면된다. 반드시 length를 가져야한다.
보면 알겠지만 매우 원시적인 방법이며 값이 바뀔때 마다 length를 갱신해줘야한다.
가급적이면 유사배열을 만들지 않는게 좋다.
유사 배열의 조건
1.반드시 length가 필요해야한다. 이 조건은 필수, 없으면 유사배열이라고 인식하지 않는다.
2. index번호가 0번부터 시작해서 1씩증가해야한다. 안그래도 되긴하는데 예상치 못한 결과가 생긴다.
단 이미 사용하고 있는 유사배열들이 많다.
dom의 예도 그러하고 arguments(이 포스팅 참조)역시 유사배열로 되어있다.
단순히 Object라고 생각하고 접근을 하면되겠지만 형태가 배열처럼 되있는만큼 배열로써 접근을 시도해보려고 할 것이다.
하지만 배열 메소드들을 사용할 수 없다는게 문제다.
당연히 원타입이 Object이기 때문에 js의 아주 유용한 Array method(해당 포스팅 참조)들을 사용할수 없다는 문제가 있다.
하지만 꼼수로 사용하는 방법들이 있다.
function f() {
console.log(arguments);
[].forEach.call(arguments, (value, key) => {
console.log(`${value} : ${key}`);
})
}
f('i', 'am', 'iron', 'man');
가장 자주 쓰는 방법은 배열 메소드만 빌려와서 call로 this바인드해서 사용하는 방식이다.
this바인드에 대해서는 해당 포스팅을 참조하지.
{ '0': 'i', '1': 'am', '2': 'iron', '3': 'man' }
i : 0
am : 1
iron : 2
man : 3
정상 출력이 되는걸 확인할 수 있다.
또다른 방법으로는 유사배열을 진짜 배열로 바꾸는 방법이다.
function f() {
let arr = Array.from(arguments);
arr.forEach((value, key) => {
console.log(`${value} : ${key}`);
});
}
Array.from은 유사배열은 진짜배열로 바꿔준다.
Array.from => 유사 배열을 진짜 배열로 바꾼다
이 기능은 ES6에서 추가된 기능이다.
'Programming > JavaScript' 카테고리의 다른 글
| [JavaScript-16]Generator와 Yield (0) | 2019.06.22 |
|---|---|
| [JavaScript-14]가변인자와 arguments (0) | 2019.06.05 |
| [JavaScript-13]js에서 배열 메소드들(map, forEach, filter, reduce, some, every)이용해서 함수형 프로그래밍하기 (0) | 2019.05.31 |
| [JavaScript-12]js에서는 속성을 더 세분화해서 지정하는게 가능하다! Object.defineProperty (0) | 2019.03.04 |
| [JavaScript-11]async와 await, 비동기를 동기코드 처럼 (1) | 2019.02.20 |