[JavaScript] 배열

 

- 배열과 객체란 JavaScript에서 대량의 데이터를 쉽게 다룰 수 있게 해주는 데이터 타입이다.

---

- 배열([ ]) : 순서( index(인덱스); 0부터 번호를 매김 )가 있는 값( element(요소) )

let myNumber = [73, 98, 86, 61, 96];  //배열(array)의 예시
                                      // ☞ 배열 안에 배열을 넣을 수도 있다. [[1, 2], [3, 4], [5, 6]]


myNumber[3];  //myNumber라는 배열의 3번째 인덱스를 *조회*
              //61
              
              //참고로 5번째 인덱스를 조회하면 undefined가 찍힘.         
              // ☞ 배열 안의 배열을 조회하려면 myNumber[1][0]; ->3 이런 식으로 중첩하면 됨.
              
              
myNumber[3] = 200;  //myNumber라는 배열의 3번째 인덱스 값을 *변경*
                    //myNumber = [73, 98, 86, 200, 96]
                    
                    
myNumber.length;  //배열의 *길이*
                  //5
                  
                  //온점(.)을 이용하여 변수가 가지고 있는 속성(property)에 접근할 수 있다.
                  
                  
myNumber.push(22);  //새로운 요소(element)를 배열 끝에 *추가*
                    //myNumber = [73, 98, 86, 200, 96, 22]
                    
                    
myNumber.pop();  //배열의 마지막 값을 *삭제*
                 //myNumber = [73, 98, 86, 200, 96]

▶ 배열이 빈 배열인지 확인하는 방법?

    arr.length === 0

 

    왜 arr === [] 가 아닐까?

    두 배열의 주소가 다르기 때문. (참조 자료형의 ===은 주솟값이 같은 지를 확인함.)

     그러므로 [] === [] 는 false.

 

- 배열과 반복문

let myNum = [0, 1, 2, 3];

//반복문을 이용해 배열의 요소를 한번씩 출력하려면?
for(let n = 0; n < myNum.length; n++) {
	console.log(myNum[n]);
}


//배열의 모든 요소를 누적해서 더하려면?
let sum = 0;

for(let n = 0; n < myNum.length; n++) {
	sum = sum + myNum[n];
}

console.log(sum);  //6

 

- 배열 (내장) 메서드

● Array.isArray : 배열인지 아닌지 판별

사용 예시

 

● push, pop : 배열의 뒤쪽에 element 넣고 빼기 (위에 사용 예시 있음)
   unshift, shift : 배열의 앞쪽에 element 넣고 빼기

 

● indexOf, includes : element의 존재 여부 확인

해당 요소가 있으면 그 index가 나오고, 없으면 -1이 나온다.
그러므로 존재 여부를 확인하고 싶으면,

이런 식으로 검사할 수 있다.

물론 이렇게 includes를 사용할 수도 있음.

하지만 includes는 indexOf보다 호환성이 더 낮다. (인터넷 익스플로러 X )


(+) console.table(); 배열을 시각화하여 보여줌.

 

 

 

---

 

(+) slice() : 배열의 begin부터 end까지(end 포함X)에 대한 얕은 복사본을 새로운 배열 객체로 반환.

                   원본 배열은 바뀌지 않음.

arr.slice(begin, end)

// begin : 0을 시작으로 하는 추출 시작점에 대한 인덱스.
//         음수 인덱스는 배열의 끝에서부터의 길이를 나타냄.
//         begin이 undefined인 경우에는, 0번 인덱스부터 slice.
//         begin이 배열의 길이보다 큰 경우에는, 빈 배열을 반환.

// end : 추출을 종료 할 0 기준 인덱스. (slice 는 end 인덱스를 제외하고 추출함.)
//       음수 인덱스는 배열의 끝에서부터의 길이를 나타냄.
//       end가 생략되면 slice()는 배열의 끝까지(arr.length) 추출.

// TIP ! 복붙 기능이라고 생각하면 편하다.

 

 

cf. splice() : 배열의 기존 요소를 삭제, 교체 또는 새 요소를 추가. 

                     즉, 원본 배열의 내용을 변경.

array.splice(start, deleteCount, item1, item2, ... )

// start : 배열의 변경을 시작할 인덱스.(제거할 요소의 인덱스)
//         배열의 길이보다 큰 값이라면 실제 시작 인덱스는 배열의 길이로 설정됨.
//         음수인 경우 배열의 끝에서부터 요소를 세어나가며,
//         값의 절대값이 배열의 길이 보다 큰 경우 0으로 설정된다.

// deleteCount : 배열에서 제거할 요소의 수.(몇 번째 요소까지)
//               deleteCount를 생략하는 경우, start부터의 모든 요소를 제거한다.
//               0 이하라면 어떤 요소도 제거하지 않는다.

// item1, item2, ... : 배열에 추가할 요소.(제거한 후 대신 추가할 요소)
//                     아무 요소도 지정하지 않으면 splice()는 요소를 제거하기만 한다.

 

---

 

 

(+) split() : 문자열을 지정한 구분자로 잘라 배열로 리턴.

split(separator, limit)

// separator : 끊어야 할 부분을 나타내는 문자열. 실제 문자열이나 정규표현식을 받을 수 있다.

// limit : 끊어진 문자열의 최대 개수를 나타내는 정수. 



/* mdn 예제 */

const str = 'The quick brown fox jumps over the lazy dog.';

const words = str.split(' '); //띄어쓰기 기준
console.log(words[3]);
// Expected output: "fox"

const chars = str.split(''); //한 칸씩 다 자르기
console.log(chars[8]);
// Expected output: "k"

const strCopy = str.split(); //전달인자가 아무것도 없을 때
console.log(strCopy);
// Expected output: Array ["The quick brown fox jumps over the lazy dog."]

 

 

(+) join() : 배열의 모든 요소를 연결해 하나의 문자열로 만듦.

arr.join(separator)

// separator : 배열의 각 요소를 구분할 문자열을 지정. 이 구분자는 필요한 경우 문자열로 변환된다.
//             생략하면 배열의 요소들이 쉼표로 구분됨.
//             빈 문자열이면 모든 요소들이 사이에 아무 문자도 없이 연결됨.



/* mdn 예제 */

const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());
// Expected output: "Fire,Air,Water"

console.log(elements.join(''));
// Expected output: "FireAirWater"

console.log(elements.join('-'));
// Expected output: "Fire-Air-Water"