(SEB_FE) Section1 Unit8 배열

1. 배열에서 특정 인덱스(index)의 요소(element)를 조회하거나, 변경할 수 있다.
2. length 속성을 이용하여 배열의 길이를 조회할 수 있다.
3. 배열의 요소가 배열인 이중 배열을 이해하고, 이중 배열의 요소를 조회하거나 변경할 수 있다.
4. 배열의 각 요소에 대하여, 반복하는 코드를 실행시킬 수 있다.
5. 배열에서 사용되는 다양한 메서드를 알고 사용할 수 있다.
   • split(), join(), slice(), splice(), Array.isArray(), push(), unshift(), pop(), shift(), indexOf(), includes()

⭐배열

• 배열은 순서가 있는 값
• 이때 값은 엘리먼트, 순서는 인덱스라고 한다.
• 인덱스는 1이 아닌 0부터 매긴다.

💫 배열 선언하는 법

let array = [1, 2, 3, 4, 5]

• 대괄호(square bracket)로 배열을 만들고,
• 각각의 원소는 , (쉼표, comma)로 구분!

💫 배열의 값에 접근하는 법

//array라는 이름의 배열의 3번 인덱스의 값을 조회하려면
array[3]; //4
//array라는 이름의 배열의 3번 인덱스의 값을 변경하려면
array[3] = 100; // array = [1, 2, 3, 100, 5]

• 인덱스를 이용해서 접근할 수 있다.
• 만약 없는 인덱스(ex. 위의 예시로 선언한 배열 array에 array[8]로 접근할 경우)라면 undefined를 리턴한다.

💫 2차원 배열(행렬)

let myNumber = [[13, 30], [73, 8], [44, 17]];

• 위 배열에서 myNumber[1][0]으로 접근하면 73을 리턴한다.
• 아래의 표와 같은 형태의 행렬이라 생각하면 됨.
  즉, myNumber[1][0]은 myNumber 배열의 1행 0열의 요소!
  

---

⭐배열의 다양한 속성(property)들

• 속성은 온점(.)을 사용해서 접근할 수 있다.

💫 배열의 길이 알아보기

• length 속성을 사용. element의 갯수를 반환해 줌.
• array.length; 와 같이 사용한다.

⭐배열의 다양한 명령(method)들

• 명령은 뒤에 () 를 붙여서 함수처럼 실행한다.

1. 배열에 요소(element) 넣고, 빼기

1-1. 원본 배열을 수정하여, 불변성을 깨뜨리는 명령

💫 push( ); 배열의 끝에 요소 추가하기

• push() 명령(method) 실행
• array.push([넣을 값]) 과 같이 사용
• 추가 후 총 배열의 길이를 리턴해 줌

💫 pop( ); 배열의 마지막 요소 삭제하기

• pop() 명령 실행
• array.pop() 과 같이 사용
• 요소가 삭제된 배열을 리턴하지 않고, 삭제한 요소 값을 리턴

💫 unshift( ); 배열의 시작에 요소 추가하기

• unshift() 명령 실행
• array.unshift([넣을 값]) 과 같이 사용
• 추가 후 총 배열의 길이를 리턴해 줌

💫 shift( ); 배열의 첫번째 요소 삭제하기

• shift() 명령 실행
• array.shift() 과 같이 사용
• 요소가 삭제된 배열을 리턴하지 않고, 삭제한 요소 값을 리턴한다

💫 splice( ); 배열의 기존 요소를 삭제, 교체, 새 요소를 추가하기

• splice() 명령 실행
• array.splice(startIndex, deleteCount, item1, item2, ...);
• startIndex : 변경을 시작할 인덱스
  deleteCount : 제거할 요소의 수
  item : 추가할 요소

1-2 원본 배열을 수정하지 않고 새로운 배열을 반환하는 명령 (불변)

💫 slice( );

• array.slice(begin, end);
• begin 인덱스부터 end-1 인덱스까지 얕은 복사로 새로운 배열 객체로 반환
• end 생략 시, 배열의 끝까지(arr.length) 추출
  end 값이 배열의 길이보다 클 경우, 배열의 끝까지(arr.length) 추출
  end인덱스는 제외된다!

2. 배열에 요소가 있는지 확인하기

• 특정 값이 배열에 포함되어 있는지 확인할 수 있는 indexOf, includes

• indexOf([찾고자하는 요소])

  • 찾고자 하는 요소가 배열 내부에 있다면, 그 위치(인덱스)를 리턴하고,
    없다면 -1을 리턴한다.

• include([찾고자하는 요소])

  • 찾고자 하는 요소가 배열 내부에 있다면, true를 리턴하고,
    없다면 false을 리턴한다.
  • indexof()와는 달리 인덱스 정보는 얻을 수 없다.
  • Internet explorer에서는 사용 불가능하다. (비호환)

즉, indexof( ) 범용성이 더 넓다! 되도록이면 indexof( )를 사용하자.

---

⭐배열의 타입은 뭘까?

• typeof() 로 베열의 type을 알아보면 object 가 반환된다.
  ➡ 하지만 객체도 object이기 때문에, 배열인지 객체인지 명확히 구분 불가!
  

따라서 배열이 배열인지 확인하기 위해서는 Array.isArray( ) 를 사용하자!

• 괄호안의 인자가 배열이라면 true를 리턴, 아니라면 false를 리턴한다.
• 빈배열이라도 배열은 배열이니 true!

---

다양한 배열의 속성과 명령을 알아보고, 직접 사용해 보자! 백문이 불여일견이다.