[js] 배열 정리

배열은 순서가 있는 값으로 인덱스(index)와 요소(element)로 이루어져있으며
형태는,

let a = [63,36,12,1,6];

순서는 인덱스라고 부르며 0부터 출발하며 각 요소를 가르키고 각 요소는 ,(콤마)에 의해서 구분된다.

즉, 배열 a의 인덱스 0번째 값은 63이며 63이 요소가 된다.
코드로 0번쨰 인덱스 값은 a[0]로 표현된다.

이제 배열에 값을 넣고 빼보자.

먼저 a의 인덱스 0번에 직접 값을 넣어주는 경우

let a = [63,36,12,1,6];
a[0]=15; // 인덱스 0번 위치에 값을 할당.
console.log(a); // result : [15, 36, 12, 1, 6] //값이 바뀐다

그 다음 명령(method)어를 이용해서 추가 해보자.

크게 추가, 제거에 있어서 4개로 나누어져있는데

1. a.push(15); // a 배열 맨 끝에 15를 넣어준다.
2. a.pop(); // a 배열 맨 끝에 값을 삭제한다.
3. a.shift(); // a 배열 맨 앞 값을 삭제한다.
4. a.unshift(15); // a 배열 맨 앞에 15를 넣어준다.

배열의 길이를 구하는 방법? 문자열과 같이 length 메서드를 사용!

let a = [1,2,3,4,5];
a.length // result : 5

배열의 길이를 구할 수 있으면

빈 배열인지 아닌지 구분하기 위해선 어떠한 식을 쓰면 될까?

조건식을 이용하면

if(a.length===0){
	// 빈배열이다.
}

배열 a의 length 값으로 구해볼 수 있다.

배열의 합은?

배열의 합을 구하기 위해서 for문을 사용하며 배열 a를 순회하는 방법을 쓰며,
이 식 이후에 객체를 순회하는 다른 for문의 방법을 소개한다.

let a= [10,20,30,40,50,60,70,80];
let sum=0; //0을 지정해주지 않으면 undefined가 되버린다.
for (let i=0; i<a.length;i++){
	sum+=a[i];
}
return sum; // result : 360 

현재 이 for문 형태는 가장 일반적으로 많이쓰이는데,
변수 let i=0을 선언해주고, 조건 식을 가운데(i<a.length), 증감식(i++)은 그 다음에 쓰는 형태이다.

객체를 순한하기 위한 for문의 다음 형태는

for..in 형태이다.

for...in문은 상속된 열거 가능한 속성들을 포함하여 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복합니다. from mdn

말이란게 참 어렵다. 결과를 보면 훨씬 이해하기 쉽다.

let a= [10,20,30,40,50,60,70,80];
for (let i in a) {
  console.log(a[i])
  console.log(i)
}
//result 10..20..30.. 40..50.. 60.. 70.. 80
//result 0..1..2..3..4..5..6..7

즉, 일반 for (let i=0; i<a.length;i++)과 차이가없다.

배열을 처음부터 끝까지 순회하기 위해서 for..in을 사용한다고 기억하면 좋다.

근데 mdn에서는 이것을 배열 반복에 for .. in 사용을 비추천하는데

그 이유는 퍼왔다...

---

for...in이 객체의 반복을 위해 만들어졌지만, 배열의 반복을 위해서는 추천되지 않고, Array.prototype.forEach(), for...of가 이미 존재합니다. 그러면 for...in은 어떻게 사용하는 것이 좋을까요?
이것은 쉽게 객체의 속성을 확인(콘솔이나 다른 방법으로 출력)할 수 있기 때문에 실질적으로 디버깅을 위해 사용될 수 있습니다. 배열이 데이터의 저장에 있어서는 더 실용적이지만, 키-값 쌍이 선호되는 데이터의 경우(속성이 "key"의 역할을 함) 특정 값을 가진 키가 있는지 확인하려는 경우에 for...in을 사용할 수 있습니다.

---

오잉?? 그렇다면 이제 for..of 에 대해 알아보자..

for..of란?

for...of 명령문은 반복가능한 객체 (Array, Map, Set, String, TypedArray, arguments 객체 등을 포함)에 대해서 반복하고 각 개별 속성값에 대해 실행되는 문이 있는 사용자 정의 반복 후크를 호출하는 루프를 생성합니다. from mdn

말이 더 햇갈린다. for..in과 똑같이 값을 돌려본다.

let a= [10,20,30,40,50,60,70,80];
for (let i in a) {
  console.log(a[i])
  console.log(i)
}
//result undefined * 8 ....
//result 10..20..30..40..50..60..70..80

let a= [10,20,30,40,50,60,70,80];
for (let i in a) {
  console.log(a[i])
  console.log(i)
}
//result 10..20..30.. 40..50.. 60.. 70.. 80
//result 0..1..2..3..4..5..6..7

오 변화가 있다.
a의 값을 불러왔는데 undefined가 8번 호출되었다.
for in과 비교해보면 분명히 차이가 있다.

확실하게 이해를 해보자

for..in은

let iterable = "boo";

for (let value in iterable) {
  console.log(value);
}
// 0
// 1
// 2

0,1,2 가 출력되지만

for..of는

let iterable = "boo";

for (let value of iterable) {
  console.log(value);
}
// "b"
// "o"
// "o"

가 출력된다.
이렇게 보면 둘의 차이를 확인하기 쉽다 !

---