Javascript Arrays
2021년 9월 7일 수정
≡ 목차 (Table of Contents)
이 글은 Javascript의 배열(Array)과 관련된 글을 정리한다.
배열에 특정 원소가 포함되어 있는지 판단하기
Array.prototype.includes() 를 사용하는 게 가장 간단하다.
["0", "1", "2", "3"].includes("0") // -> true ["0", "1", "2", "3"].includes(0) // -> false
위치(index)를 알고 싶다면 Array.prototype.find() 를 사용할 수도 있다.
["0", "1", "2", "3"].find(e => e === "0") // -> 0 ["0", "1", "2", "3"].find(e => e === "1") // -> 1 ["0", "1", "2", "3"].find(e => e === "4") // -> undefined
For Each
자바스크립트의 Array에는 forEach 메서드가 제공된다.
> [1, 2, 3, 4, 5].forEach((e) => console.log(e)) 1 2 3 4 5
위는 화살표 함수를 써서 간단하게 구현한 것이지만 조금 더 전통적인(?) 방식으로 구현하면 아래와 같다.
> [1, 2, 3, 4, 5].forEach(function(e) { console.log(e); }); 1 2 3 4 5
일부러 전통적이라는 의미에서 세미콜론까지 붙여봤다. 근데 ES6를 지원하는 브라우저라면 굳이 쓸 필요는 없다. 개인적으로는 안 쓰는 것을 선호한다.
간혹 getElements류 함수의 결과로 forEach를 쓰려하면 에러가 나는 경우가 있는데 당연히 타입이 Array가 아니라서 오류가 발생한다. 이럴 때는 대충 아래처럼 돌려서 쓸 수 있다.
var elements = document.getElementsByClassName('some-class'); // pre ES6 Array.prototype.forEach.call(elements, function(e) { ... }); // after ES6 Array.from(elements).forEach((e) => { ... })
개인적으로 ES6 코드는 일부러 세미콜론을 안 붙이고 있으니 구분은 가능할 것 같다.
at
at 메서드는 배열 원소를 인덱스로 참조하는 커맨드다.
let lst = ['a', 'b', 'c'] lst[0] // => 'a' lst[1] // => 'b'
음수를 사용할 수 있는데 Python의 리스트 타입에서 지원하는 기능과 비슷하게 끝에서 부터 엑세스하기 편하다.
lst[lst.length - 1] // => 'c' lst.at(-1) // => 'c'
참고로 at 메서드는 대부분의 컬렉션에서 사용이 가능한 것 같다. 예를 들어 문자열 등에서도 인덱스 엑세스에 사용할 수 있다.