ES5 .Object(2) - Array(배열)

JavaScript의 배열은 객체이며, 1개 변수에 여러 개의 값을 순차적으로 저장할 때 사용한다. 또한 다른 프로그램 언어와는 달리 문자열, 숫자, 객체 심지어 다른 배열이나 어떤 타입의 값이라도 담을 수 있다. 또한 배열 크기는 미리 정하지 않고도 선언 할 수 있으며, 원하는 값만 추가하면 된다.

 

배열은 Array 생성자로 생성된 Array 타입의 객체이며 프로토타입 객체는 Array.prototype 이다.

 

- 타입에 상관없이 담을 수 있는 배열 - 

- 미리 배열 크기를 선언하지 않아도 되는 배열 -

또한 배열 자체도 하나의 객체기 때문에 키/프로퍼티 문자열을 추가할 수 있다. 하지만 배열의 크기는 포함되지 않는다. 일반적으로 배열에 키/프로퍼티를 두는 건 추천할 만한 방법이 아니다.

 

- 객체처럼 '키/프로퍼트'추가 가능한 배열 -

배열은 일반적으로 배열 리터럴 방식( var c = [];)으로 생성하지만, 이 방식도 결국 내장함수 Array()생성자 함수로 생성하는 것을 단순화시킨 것이다. (생성자를 사용해 호출하는 방법은 가급적 쓰지않는 편이 좋다. )

 

Array.prototype.constuctor 프로퍼티로 접근할 수 있는, 매개 변수에 갯수에 따라 다르게 동작하는 특징을 가지고 있다. 만약 매개변수가 1개인 경우 매개변수로 전달된 숫자를 length값으로 가지는 빈 배열을 생성한다. 

 

- new Array() 접근 -

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

 

- 객체처럼 배열도 추가하기 -

 

---

JavaScript에는 유사 배열이라는 개념이 존재하는 유사배열의 개념은 다음과 같다.

유사배열: 배열이 아닌데 배열인척 하는 존재 (arguments, DOM).  또한 배열메소드에 접근하게되면 에러가 난다. 

유사배열의 조건: 1. 반드시 length가 필요하다.  2. index가 0부터 시작해서 1씩 증가해야 한다. 

유사배열을 만들수도 있다. 다음과 같이 작성해주면 된다. 

 

- 유사배열 만들기 -

당연히 Object의 원타입이기 때문에, 배열 메소드는 사용할 수 없다는 단점이 있지만, 유사배열 값을 배열로 바꿀수 있다. 배열 메소드 중 slice() 함수의 기능을 차용하는 방법을 가장 많이 쓰는데, call()함수 this바인드를 여, 사용한다. slice()함수에 인자가 없으면 기본 인자값으로 구성된 배열을 복사한다. (ES5 기준)

 

* Array.prototype.slice.call(arguments)는 Array.prototype.slice.call(arguments,0)과 같다. 첫번째 원소부터 끝까지 잘라내므로 배열을 복사하는 것이나 다름 없기 때문이다. 

 

* call()은 추후에 다룰 예정입니다.

 

- Slice()활용 (ES5 기준) - 

ES6부터는 기본 내장 함수 Array.from()을 통하여 처리한다. 

---

Array가 가지고 있는 Property와 Method(자주쓰는) 는 다음과 같다.

 

* Array.length를 제외한 나머지는 Method입니다. 

* return 값 아이콘: �

 

1. Array.length 

2. Array.isArray()

3. Array.from()(ES6)

4. Array.of()(ES6)

5. Array.indexOf()

6. Array.concat()

7. Array.join()

8. Array.pop()

9. Array.push()

10. Array.reverse()

11. Array.shift()

12. Array.slice()

13. Array.splice()

 

Array.length

1) length 프로퍼티는 요소의 개수(배열의 길이)를 나타낸다.

2) length의 값보다 더 큰 인덱스로 요소를 추가하면 자동으로 length의 값이 늘어난다.

3) length의 값은 가장 큰 index에 1을 더한 것과 같다. 

4) length의 값은 명시적으로 변경이 가능하다. 만약 length의 값을 현재보다 작게 변경하면, length의 값보다 크거나 같은 인덱스에 해당하는 요소는 모두 삭제된다. 

 

Array.isArray(arguments:any)      � = boolean

객체가 배열이면 true, 아니면 false를 반환한다.

 

 

Array.from(iterable: Iterable | arrayLike: [])      � = Array(배열)      (ES6)

이터러블을 배열로 변환하여 반환한다. 

An iterable object to convert to an array.

 

 

Array.of(any[])      � = Array(배열)      (ES6)

입력한 인자를 가지고 새로운 배열을 생성하여 반환한다. 

Returns a new array from a set of elements.

 

 

Array.indexOf(searchElement: number, fromIndex?: number)      � = Number(숫자) 

메소드의 인자로 지정된 요소를 배열에서 검색하여, 배열내에 존재하는 해당 value의 Index 번호를 반환한다. 중복되는 경우 첫번째 index를 반환, 해당하는 요소가 없을 시 -1을 반환한다. 

The value to locate in the array.

Returns the index of the first occurrence of a value in an array.

 

Array.concat((...items: (number | ConcatArray<number>)[]))      � = Array(배열)  

* 원본 배열을 변경하지 않고 복사해서 새로운 배열을 반환합니다. 

 

메소드의 인자로 지정된 요소를 자신의 복사본 요소로 추가하고 복사된 배열을 반환한다. 

Combines two or more arrays.

Additional items to add to the end of array.

 

 

Array.join(separator?: string)      � = String(문자열)  

배열 요소 전체를 String 타입으로 바꾸어 String 객체로 반환한다. 

Adds all the elements of an array separated by the specified separator string.

 

 

Array.pop()      � = String(문자열)  

해당 배열 마지막 요소를 제거하고 그 요소를 문자열로 반환한다. 

Removes the last element from an array and returns it

 

 

Array.push(...items: string[])      � = Number(숫자) 

메소드의 인자로 지정된 요소를 배열 마지막에 새로운 값으로 추가하고, 새롭게 추가된 배열의 길이를 반환한다. 

Appends new elements to an array, and returns the new length of the array.

 

Array.push(), Array.pop()을 함께 사용하면 자료구조 중 하나인 Stack 처럼 동작하게 만들 수 있다. 

 

 

Array.reverse()      � = String(문자열) 

메소드를 호출하면 배열 요소의 순서가 바뀌어 반환된다.

Reverses the elements in an Array

 

 

Array.shift()      � = String(문자열) 

배열에서 첫번째 요소를 제거하고 제거한 요소를 반환한다. 

Removes the first element from an array and returns it.

 

Array.shift() 함수와 Array.push()함수를 함께 이용하면 자료구조 중 하나인 큐(Que)를 구현할 수 있다. 

 

Array.shift(): 배열의 첫번째 요소 제거 
Array.pop(): 배열의 마지막 요소 제거

Array.unshift(value): 배열의 첫번째 자리 값 추가
Array.push(value): 배열의 마지가 자리 값 추가

 

Array.slice()      � = Array(배열)

* 원본 배열을 변경하지 않고 복사해서 새로운 배열을 반환합니다.

 

메소드의 인자로 지정된 배열의 부분을 복사하여 반환한다. 

Returns a section of an array.

 

첫번째 매개변수 start에 해당하는 인덱스부터 두번째 매개변수 end에 해당하는 인덱스 전까지 복사된다.

@param: start

— The beginning of the specified portion of the array.

@param: end

— The end of the specified portion of the array.

 

Array.slice() 메소드의 인자가 없을 경우 원본 배열을 얕은 복사하여 복사본을 생성한 후 반환한다. 

 

*깊은 복사를 하기 위해서는 deepClone을 사용하는 것이 좋다. 

 

 

Array.splice(start?: number, end?: number)      � = String(문자열)

1. 기본 배열의 값을 제거한 후, 제거한 값을 반환한다. 

2. 기존 배열의 값을 제거하고, 제거된 위치에 새로운 요소를 추가할 수 있다. 반환값은 제거한 값 

3. 배열의 중간에 값을 새로운 요소를 추가하여 반환한다. 

 

Removes elements from an array and, if necessary, inserts new elements in their place, returning the deleted elements.

@param: start

— The zero-based location in the array from which to start removing elements.

@param: deleteCount 

— The number of elements to remove.

 

Array.slice() 와 Array.splice()의 차이점: slice()는 원본배열을 얕게 복사하여 복사본의 요소를 제거한 후 반환하지만, splice()는 원본 배열에서 요소를 제거하고 원본 배열을 반환한다. 

 

Array.slice(): 원본 보존
Array.splice(): 원본 훼손

 

 

다음 기록은 String(문자열)이다.

 

< 참고자료 >

 

[도서] You don't know JS - 카일심슨 지음-

https://poiemaweb.com/js-array

https://developer.mozilla.org/en-US/docs/Glossary/array

 

<ES5 series> chapter 6, Array end

 

---