[PoiemaWeb] 배열

1. 배열 요소의 추가와 삭제

  1.1 배열 요소의 추가

• 객체가 동적으로 프로퍼티를 추가할 수 있는 것처럼 뱅려도 동적으로 요소를 추가할 수 있다. 이때 순서에 맞게 값을 할당할 필요는 없고 인덱스를 사용하여 필요한 위치에 값을 할당한다.

  1.2 배열 요소의 삭제

• 배열은 객체이기 때문에 배열의 요소를 삭제하기 위해 delete 연산자를 사용할 수 있다. 이때 length에는 변함이 없다.

 

2. 배열의 순회

• 객체의 프로퍼티를 순회할 때 for...in 문을 사용한다. 배열 역시 객체이므로 for...in 문을 사용할 수 있다. 그러나 배열은 객체이기 때문에 프로퍼티를 가질 수 없다. for...in 문을 사용하면 배열 요소뿐만 아니라 불필요한 프로퍼티까지 출력될 수 있고 요소들의 순서를 보장하지 않으므로 배열을 순회하는데 적합하지 않다.
• 배열의 순회에는 forEach 메소드, for 문, for...of 문을 사용하는 것이 좋다.

 

3. Array Method

  3.1 Array.isArray(arg:any):boolean

• 정적 메소드 Array.isArray는 주어진 인수가 배열이면 true, 배열이 아니면 false를 반환한다.

  3.2 Array.from

• 유사 배열 객체 또는 이터러블 객체를 변환하여 새로운 배열을 생성한다.

  3.3 Array.of

• 전달된 인수를 요소로 갖는 배열을 생성한다.
• Array.of는 Array 생성자 함수와 다르게 전달된 인수가 1개이고 숫자이더라도 인수를 요소로 갖는 배열을 생성한다.

  3.4 Array.prototype.indexOf(searchElement: T, fromIndex?: number): number

• 원본 배열에서 인수로 전달된 요소를 검색하여 인덱스를 반환한다.
• 중복되는 요소가 있는 경우, 첫번째 인덱스를 반환한다.
• 해당하는 요소가 없는 경우, -1을 반환한다.

 3.5 Array.prototype.concat(…items: Array<T[] | T>): T[]

• 인수로 전달된 값들(배열 또는 값)을 원본 배열의 마지막 요소로 추가한 새로운 배열을 반환한다.
• 인수로 전달한 값이 배열인 경우, 배열을 해체하여 새로운 배열의 요소로 추가한다. 원본 배열은 변경되지 않는다.

 3.6 Array.prototype.join(separator?:string):string

• 원본 배열의 모든 요소를 문자열로 변환한 후, 인수로 전달받은 값, 즉 구분자(separator)로 연결한 문자열을 반환한다.
  구분자는 생략가능하며 기본 구분자는 , 이다.

 3.7 Array.prototype.push(…items: T[]):number

• 인수로 전달받은 모든 값을 원본 배열의 마지막에 요소로 추가하고 변경된 length 값을 반환한다.
• push 메소드는 원본 배열을 직접 변경한다.
• push 메소드는 원본 배열을 직접 변경하지만 concat 메소드는 원본 배열을 변경하지 않고 새로운 배열을 반환한다.

• 인수로 전달받은 값이 배열인 경우, push 메소드는 배열을 그대로 원본 배열의 마지막 요소로 추가하지만 
  concat 메소드는 배열을 해체하여 새로운 배열의 마지막 요소로 추가한다.

• push 메소드는 성능면에서 좋지 않다. push 메소드는 배열의 마지막에 요소를 추가하므로 length 프로퍼티를 사용하여 직접 요소를 추가할 수도 있다. 이 방법이 push 메소드보다 빠르다.

3.8 Array.prototype.pop():T | undefined

• 원본 배열에서 마지막 요소를 제거하고 제거한 요소를 반환한다. 원본 배열이 빈 배열이면 undefined를 반환한다.
• pop 메소드는 원본 배열을 직접 변경한다.

스택(stack)은 데이터를 마지막에 밀어 놓고, 마지막에 밀어 넣은 데이터를 먼저 꺼내는 후입 선출(LIFO - Last In First Out) 방식의 자료 구조이다. 스택은 언제나 가장 마지막에 밀어 넣은 최신 데이터를 취득한다.

3.9 Array.prototype.reverse():this

• 배열 요소의 순서를 반대로 변경한다. 이때 원본 배열이 변경된다. 반환값은 변경된 배열이다.

3.10 Array.prototype.shift():T | undefined

• 배열의 첫요소를 제거하고 제거한 요소를 반환한다. 만약 빈 배열일 경우 undefined를 반환한다.
• shift 메소드는 대상 배열 자체를 변경한다.
• shift는 push와 함께 배열을 큐(FIFO:First In First Out)처럼 동작하게 한다.

3.11 Array.prototype.slice(start=0, end=this.length): T[]

• 인자로 지정된 배열의 부분을 복사하여 반환한다.
• 첫번째 매개변수 start에 해당하는 인덱스를 갖는 요소부터 매개변수 end에 해당하는 인덱스를 가진 요소 전까지 복사된다.
• start : 복사를 시작할 인덱스. 음수인 경우 배열의 끝에서의 인덱스를 나타낸다. 예를들어 slice(-2)는 배열의 마지막 2개의 요소를 반환한다.
• end : 옵션이며 기본값은 length 값이다.

• slice 메소드에 인자를 전달하지 않으면 원본 배열의 복사본을 생성하여 반환한다.

3.12 Array.prototype.splice(start: number, deleteCount=this.length-start, …items: T[]): T[]

• 기존의 배열의 요소를 제거하고 그 위치에 새로운 요소를 추가한다. 배열 중간에 새로운 요소를 추가할 때도 사용된다.
• start: 배열에서의 시작 위치이다. start만을 지정하면 배열의 start부터 모든 요소를 제거한다.
• deleteCount: 시작 위치부터 제거할 요소의 수이다. deleteCount가 0인 경우, 아무런 요소도 제거되지 않는다.
• items: 삭제한 위치에 추가될 요소들이다. 만약 아무런 요소도 지정하지 않을 경우, 삭제만 한다. 
• 반환값 삭제한 요소들을 가진 배열이다.

slice는 배열의 일부분을 복사해서 반환하며 원본을 훼손하지 않는다.

splice는 배열에서 요소를 제거하고 제거한 위치에 다른 요소를 추가하며 원본을 훼손한다.