자바스크립트 배열(Array)

Array

 자바스크립트에서 배열은 '순서'가 있으며, 여러 객체중 특별한 형태로 취급된다. 이 배열은 수많은 데이터를 저장하고 처리하기 위함이기도 하고, 중복된 변수의 선언을 줄이기 위한 용도와 반복문을 이용해 요소들을 쉽게 처리하기 위해 사용된다.

 

배열은 담겨있는 각각의 값을 요소(Element)라고 하고, 그 요소의 위치를 인덱스라고 불리는 표지판이 붙어있다

arr    =    ['a', 'b', 'c', 'd', 'e']
index  =      0    1    2    3    4

arr[0] // 0번째 요소는 'a'
arr[1] // 1번째 요소는 'b'

배열생성 방법

배열 리터럴

let arr = [];

let arr = ['a','b','c','d'];

Array() 생성자 함수

let arr = new Array();

let arr = new Array('a','b','c');

배열 리터럴은 생성자 함수를 축약한 형태이다. 

 

배열의 메소드

 Array.prototype의 constructor 생성자 함수를 통해 만들어진 여러개의 메소드들이 존재한다. 우리가 배열을 arr이라는 변수에 담아주고 데이터를 추가하거나 하나씩 지우는 작업을 하기위해 뒤에 .push()나 .pop()를 쓰게된다.  

 여기서 자바스크립트는 new 연산자나 배열 리터럴( [ ] )로 생성한 인스턴스 arr에 .pop() 메소드가 정의되지 않은걸 알게되고, Array.prototype 속성(protperty)을 검색하여 pop()메소드가 정의된 주소를 찾아내서 메소드가 쓰일 수 있도록 한다.

 

 자바스크립트는 이러한 환경을 통해 생성자 함수의 속성을 객체 인스턴스(let arr = [], let obj = {}) 가 상속받을 수 있도록 연결해준다. 

 

Array.isArray()과  Array.from()

Array.isArray(value) 는 입력된 인자가 배열인지 아닌지 Boolean으로 판별한다.

Array.isArray(value)
// true or false

//만약 typeof를 사용하게되면 배열도 객체에 포함되있기 때문에 결과는...
//const arr = [1,2,3]
//typeof arr = "object"

if(Array.isArray(array)) 또는 if(!Array.isArray(array))

Array.from()

Array.isArray(value)
// true or false

//만약 typeof를 사용하게되면 배열도 객체에 포함되있기 때문에 결과는...
//const arr = [1,2,3]
//typeof arr = "object"

if(Array.isArray(array)) 또는 if(!Array.isArray(array))

Array.prototype.methods

Array.length()

Array.isArray(value)
// true or false

//만약 typeof를 사용하게되면 배열도 객체에 포함되있기 때문에 결과는...
//const arr = [1,2,3]
//typeof arr = "object"

if(Array.isArray(array)) 또는 if(!Array.isArray(array))

 

.slice() 와 .splice() 메소드

• .slice() 메소드는 어떤 배열의 시작(begin)부터 끝(end)까지(end 생략가능) 복사본을 새로운 배열로 반환한다. 원본 배열은 바뀌지 않는다.

let arr = [1,2,3,4,5,6,7]

let newArr = arr.slice(3, 5) //[4,5]
let newArr1 = arr.slice(-1)  //[2,3,4,5,6,7]
let newArr2 = arr.slice(1)   //[1,2,3,4,5,6,7]

function list() {
  return Array.prototype.slice.call(arguments);
}

let list1 = list(1,2,3); //[1,2,3]

 

• splice() 메소드는 배열의 기존 요소를 삭제, 교체 하거나 새 요소를 추가하여 배열의 내용을 변경한다. 원본 배열을 바꾼다.

let arr = [1,2,3,4,5,6,7]

//마지막 인덱스에서 요소 하나만 제거
let rmArr = arr.splice(-1, 1) // rmArr = [7], arr = [1,2,3,4,5,6]
//모든 인덱스를 제거
let rmArrAll = arr.splice(0) // rmArrAll = [1,2,3,4,5,6], arr = [];
//인덱스 추가 (arr의 요소가아무것도 없으므로 아무 인덱스에 추가해도됨)
let addArr = arr.splice(0,0,5,6,7,8) // addArr = [], arr = 5,6,7,8
//해당 인덱스의 위치한 요소 n개 제거
let rm1 = arr.splice(1,2) // rm1 = [6,7], arr = [1,8]

 

slice와 splice의 차이점

slice 메소드 : 임의로 정한 요소에 따라 원본 배열을 참조하여 새로운 배열을 생성한다.

splice 메소드 : 임의로 정한 요소에 따라 원본 배열의 내용을 바꾼다.(추가 및 제거)

 

.pop()과 .push() 메소드

push()는 배열의 끝에 하나이상의 요소를 추가한다.

pop()는 배열의 끝부터 요소 하나만 제거하고 그 요소를 반환한다.

let arr = [];

arr.push('a')                   //arr = ['a']
arr.push('b','c','d','e','f')   //arr = ['a','b','c','d','e','f']
arr.pop()                       //arr.pop() = 'f' , arr =['a','b','c','d','e'] 

shift()와 .unshift() 메소드

shift()는 배열의 첫번째 요소를 제거하고, 제거된 요소를 반환한다.

unshift()는 배열의 새로운 요소를 맨 앞에 추가한다.

let arr = ['a','b','c','d','e','f','e'];
 
arr.shift()    //arr.shift() = 'a', ['b','c','d','e','f','e'];
arr.shift()    //arr.shift() = 'b', ['c','d','e','f','e'];
arr.shift()    //arr.shift() = 'c', ['d','e','f','e'];

arr.unshift({a: 'as'})   // [{a: 'as'}'d','e','f','e'];
arr.unshift([5], 4)      // [[5], 4{a: 'as'}'d','e','f','e']
arr.unshift('abc')       // ['abc',[5],4,{a: 'as'}'d','e','f','e']

.join()과 .concat() 메소드

join() 메소드는 배열의 모든 요소를 연결해 하나의 문자열로 만든다.

Array.isArray(value)
// true or false

//만약 typeof를 사용하게되면 배열도 객체에 포함되있기 때문에 결과는...
//const arr = [1,2,3]
//typeof arr = "object"

if(Array.isArray(array)) 또는 if(!Array.isArray(array))

 

 

Array.isArray(value)
// true or false

//만약 typeof를 사용하게되면 배열도 객체에 포함되있기 때문에 결과는...
//const arr = [1,2,3]
//typeof arr = "object"

if(Array.isArray(array)) 또는 if(!Array.isArray(array))

.indexOf()와 .includes() 메소드

indexOf() 메소드는 배열에서 지정된 요소 가 존재할 경우 인덱스를 반환하고, 존재하지 않을경우 -1을 반환한다.

let artist = ['matisse', 'renoir', 'varmeer']
artist.indexOf('matisse') // 0
artist.indexOf('renoir')  // 1
artist.indexOf('varmeer') // 2
artist.indxeOf('lucien') // -1

includes() 메소드는 배열의 특정 요소를 포함하고 있는지 판별한다.

let artist = ['matisse', 'renoir', 'varmeer']
artist.includes('matisse')   // true
artist.includes('renoir')    // true
artist.includes('lucien')    // false
artist.includes('raffaello') //false

includes와 indexOf의 차이점

includes()는 해당 요소의 인덱스를 리턴하고 존재하지 않으면 -1을 반환한다

indexOf()는 해당 요소가 존재하는지 확인 후 Boolean값을 반환한다.