모던 자바스크립트 튜토리얼 part1 - 5.4

5.4 Arrays

Get last elements with "at"

let fruits = ["Apple", "Orange", "Plum"];

// same as fruits[fruits.length-1]
alert( fruits.at(-1) ); // Plum

Methods pop/push, shift/unshift

pop/push는 자바에서도 같은 이름의 함수가 존재해서 잘 알고 있다.

shift

let fruits = ["Apple", "Orange", "Pear"];

alert( fruits.shift() ); // remove Apple and alert it

alert( fruits ); // Orange, Pear

unshift

let fruits = ["Orange", "Pear"];

fruits.unshift('Apple');

alert( fruits ); // Apple, Orange, Pear

Internals

javascript에서 배열은 기본적으로 연속된 메모리에 값을 저장하게 되어 있지만, 만약 이 배열을 다른 일반 객체와 같은 방식으로 사용하려하면 이러한 특성이 깨지게 된다. 엔진이 봤을 때, 배열이 아닌 일반적인 객체와 같은 방식으로 동작하면 그럴 수 있다. 아래와 같은 방식처럼 말이다.

• 인덱스 속성이 아닌 다른 속성에 값을 저장할 때
• 배열에 중간에 빈 공간이 있을 때
• 배열이 뒤에서부터 채워져 있을 때

Performance

push/pop은 빠르고 shift/unshift는 느리다.

shift의 경우 맨 앞의 요소를 삭제한 뒤, 나머지 모든 요소에 대해 인덱스를 갱신하고 length 속성까지도 업데이트를 해야한다. 비슷한 원리로 unshift도 맨 앞에 요소를 새롭게 추가하기 위해 인덱스 갱신, length 속성 업데이트 작업이 필요하다. 반면에, push/pop은 마지막 요소 뒤에 새로운 값을 저장, 제거하는 것 만으로 모든 작업이 끝나기 때문에 훨씬 빠르게 동작하는 것이다.

Loops

for...of 의 경우 요소의 인덱스가 아니라 바로 값에 접근한다. 이정도로도 충분한 기능이다.

for...in을 비추천하는 이유

1. for...in은 모든 속성들에 접근한다. 즉, 숫자가 아닌 속성이나 메서드에도 접근하게 되는데, 다른 환경에 존재하는 배열과 유사한 객체들을 대상으로 해당 구문이 동작했을 때 원치 않은 결과를 반환할 수도 있다.
2. 객체에 최적화되어 있기에 좀 더 느리다.

Don't compare arrays with ==

배열도 객체와 같아서 두 배열을 비교할 때 동일한 주솟값을 저장한 변수가 아니면 다른 객체로 판별한다. 빈 배열의 경우 빈 문자열로 변환되어서 비교된다. 따라서 다음과 같은 결과가 나올 수 있다. 

alert( 0 == [] ); // true

alert('0' == [] ); // false
// ----------------------
// after [] was converted to ''
alert( 0 == '' ); // true, as '' becomes converted to number 0

alert('0' == '' ); // false, no type conversion, different strings