19-3 JS 배열3

반복문

  for문은 배열을 순차적으로 순회라 때 index를 사용해서 값을 출력한다. 그런데 배열에는 다른 방법으로 순회할 수 있는데 그것은 for..of문이다. 그런데 for..in릉 현재 요소의 인덱스를 얻을 수 없고 값만 얻을 수 있다. 배열은 객체에 속하기 때문에 동일하게 출력도 가능하다.

const arr = [1, 2, 3];

for (let e of arr) {
	console.log(e);
}
// 출력
// 1
// 2
// 3

// 동일
//for (let e of arr) {
//	console.log(arr[e]);
//}

   그런데 for..in문을 사용했을 때 문제가 있다. ( 밑에 내용은 요악할 것이 없어 그대로 들고 왔습니다~~)

 

•   for..in 반복문은 모든 프로퍼티를 대상으로 순회합니다. 키가 숫자가 아닌 프로퍼티도 순회 대상에 포함됩니다. 브라우저나 기타 호스트 환경에서 쓰이는 객체 중, 배열과 유사한 형태를 보이는 ‘유사 배열(array-like)’ 객체가 있습니다. 유사 배열 객체엔 배열처럼 length 프로퍼티도 있고 요소마다 인덱스도 붙어 있죠. 그런데 여기에 더하여 유사 배열 객체엔 배열과는 달리 키가 숫자형이 아닌 프로퍼티와 메서드가 있을 수 있습니다. 유사 배열 객체와 for..in을 함께 사용하면 이 모든 것을 대상으로 순회가 이뤄집니다. 따라서 ‘필요 없는’ 프로퍼티들이 문제를 일으킬 가능성이 생깁니다.

•   for..in 반복문은 배열이 아니라 객체와 함께 사용할 때 최적화되어 있어서 배열에 사용하면 객체에 사용하는 것 대비 10~100배 정도 느립니다. for..in 반복문의 속도가 대체로 빠른 편이기 때문에 병목 지점에서만 문제가 되긴 합니다만, for..in 반복문을 사용할 땐 이런 차이를 알고 적절한 곳에 사용하시길 바랍니다.

결론 배열에 for..in 쓰지 마세요.

 

---

 

'length' 프로퍼티

  배열에 조작하면 length 프로파티가 자동으로 갱신된다. length 프로퍼티는 배열 내 요소의 개수가 아니라 가장 큰 인덱스에 1을 더한 값이다.

let arr = [];
arr[100] = 1;
arr.length; // 101을 출력함

배열은 이렇게 사용하면 안 됩니다~~~

  length의 특징 중 하나로 수동으로 증가시키면 아무 일도 일어나지 않지만 감소시키면 배열이 잘린다. 잘린 배열은 다기 되돌릴 수 없다.

let arr = [1. 2. 3. 4. 5];

arr.length = 2;
arr; // [1, 2]

arr.length = 5;
arr[3]; // undefined

arr.length = 0;은 arr = []와 동일하게 배열을 비울 수 있다.

 

---

new Array()

let arr = new Array(1. 2. 3);

  대괄호 '[]'를 짧아서 많이 사용하며 new Array()엔 다루기 까다로운 기능도 있어서 더욱 사용 안 하는 이유가 있다.

  숫자형 인수 하나를 넣어서 new Array를 호출하면 배열이 만들어지는데, 이 배열엔 요소가 없는 반면 길이는 인수와 같아진다.

let arr = new Array(2);
arr[0]; // nudefined가 출력
arr.length; // 2가 출력됨

 

---

 

다차원 배열

  배열 안에 배열을 넣을 수 있다. 이런 배열을 다차원 배열이라고 이야기한다. 다차원 배열은 행렬을 저장하는 용도이다. 

let arr = [
	[1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

arr.[1][1]; // 5
// arr 배열 1번 index에 있는 배열에 1번 index에 있는 요소를 출력

 

---

 

toString

  이용해 배열을 호출하면 요소를 쉼표로 구분한 문자열이 반환된다. 

let arr = [1, 2, 3];

String(arr); // '1,2,3' 출력

  배열엔 Symbol.toPrimitive나 valueOf 메서드가 없다. 따라서 []는 빈 문자열 이다. 이항 덧셈 연산자 "+"는 피연산자 중 하나가 문자열인 경우 나머지 피연산자도 문자열로 변환합니다.

[] + 1; // == "" + 1;  출력: '1'
[2] + 2; // == "2" + 2;  출력: '22'
[1, 2, 3] + 4; // =="1,2,3" + 4;  출력: '1,2,34'

 

---

공부한 곳!! 모던 JavaScript 튜토리얼

바로가기!!