JavaScript 객체 타입 - 배열 ( array )

배열 ( array )

배열은 다수의 데이터를 저장하고 처리하는 경우에 유용하게 사용할 수 있다. 예를 들어 100개의 데이터를 처리해야 한다면 배열을 사용하지 않으면 100개의 변수가 필요하다. 그러면 코딩하기도 힘들고 코드량도 길어지기 때문에 배열을 이용하면 효율적으로 짤 수 있다. 자바스크립트 배열은 배열 내부의 데이터 타입이 서로 달라도 쓸 수 있고 배열의 크기가 동적으로 변할 수 있다. 배열안에 number, string, boolean, object, array 등 들어갈 수 있다.

배열의 선언

JavaScript의 배열 선언은 2가지 방법이 있다.

• 대괄호([])를 사용하여 만드는 방법
• Array() 생성자 함수로 배열을 만드는 방법
  보통 첫 번째 방법이 일반적이다.

var arr = [ '1', 2 'Hello' ]; // 선언과 동시에 할당
var arr = [];
arr[0] = 'zero';
arr[1] = 'one'; // 빈 배열을 생성후 할당
var arr = new Array(); // 빈 배열을 생성후 할당
arr[0] = 1;
arr[1] = 2;
arr[2] = 3;
var arr = new Array( 'a', 'b', 'c', 'd' ); // 선언과 동시에 할당

배열 출력 방법

var arr = new Array( 'a', 'b', 'c', 'd' ); 
var arr = [ 'a', 'b', 'c', 'd']; 
for ( let i = 0; i < 4; i++ ){
  console.log(arr[i]);
}
for ( let i = 0; i<arr.length; i++){
  console.log(arr[i]);
} // 보통 배열 데이터가 앞으로도 추가가 될수도 있고 삭제가 될수도 있기때문
 // 에 이방법을 많이 사용한다.

배열 관련 함수

• Array.isArray()
  JavaScript 배열은 typeof로 type을 출력해보면 object 객체라고 나온다. 그래서 더 정확하게 배열인지 아닌지 판별하기 위해 Array.isArray(배열명)을 써서 true가 나오면 배열이고 false가 나오면 아니다.

var arr = [ 'a', 'b', 'c', 'd' ];
console.log(Array.isArray(arr); // true

• array.indexOf()
  배열에서 특정 데이터를 찾고, 검색된 배열의 '첫번째'로 나타나는 위치 index를 리턴한다. 파라미터에 데이터를 넣어준다. ( 대소문자를 구분한다. )

var arr = [ 'a', 'b', 'c', 'd' ];
console.log(a.indexOf('c')); // 2

• array.length
  배열의 길이를 length를 통해 구할 수 있다. 배열에서 데이터의 갯수를 return 시켜준다.

var arr = [ 'a', 'b', 'c', 'd' ];
console.log(arr.length); // 4

• array.toString()
  배열뿐만 아니라 number 타입도 문자열화 시켜준다. 문자열화 될때 하나의 문자열로 된다. ( 구분되는 , 자동생성 ) 객체는 모든 객체에는 객체가 텍스트 값으로 표시되거나 객체가 문자열이 예상되는 방식으로 참조 될 때 자동으로 호출되는 toString() 메서드가 있는데 기본적으로 toString() 메서드는 Object에서 비롯된 모든 객체에 상속된다.

var arr = [ 1, '2', [ 1, 2, 3 ], { name : 'lee' } ];
console.log(arr.toString()); // "1,2,1,2,3,[object Object]"

• array.join()
  배열의 모든 데이터를 연결해 하나의 문자열로 만들어 준다. 매개변수는 separator - 분리 기호가 들어간다. ( 인자를 문자열로 ' ' - 사이띄어쓰기 '' 띄어씌기 없이 '-', '+', '안에 필요한거' 를 넣는다. ) 원본 배열은 변하지 않는다.

var arr = [ '가', 2, '나', 4 ] ;
console.log(arr.join('-')); //  '가-2-나-4'

• array.concat()
  concat()은 두개 이상의 배열을 하나의 배열로 만들어주는 역할을 하는 함수이다. concat().concat()으로 여러개의 배열도 붙일 수 있다. 원본 배열은 변하지 않는다.

var arr = new Array( 'a', 'b', 'c', 'd' );
var arr1 = [ 'e', 'f' ];
console.log(arr.concat(arr1)); // ['a', 'b', 'c', 'd', 'e', 'f']

• array.slice()
  배열에서 특정 부분만 골라내 반환해주는 함수이다. 매개변수는 ( start, end ) end의 이전까지만 포함된다. start가 end보다 크면 빈 array를 반환한다. index가 음수이면 뒤에서 부터 가져온다. ( 음수는 -1부터 시작 start, end 둘다 음수도 start가 더 작아야 제대로 가져온다. -1, -3 이면 빈 string 음수도 마찬가지로 end는 포함 x ) 원본 배열은 변하지 않는다.

var arr = [ 'a', 'b', 'c', 'd', 'e', 'f' ];
console.log(str.slice(1,4)); // [ 'b', 'c', 'd' ]
console.log(str.slice(-3)); // [ 'd', 'e', 'f' ]

• array.splice()
  배열의 기존 원소를 삭제 또는 교체하거나 새 원소를 추가하여 배열의 내용을 변경한다. 원본 배열 자체를 수정 매개변수는 첫번째 start 배열의 변경을 시작할 index 음수일 경우 배열의 끝에서 -1부터 시작 두번째 deleteCount 첫번째 index부터 제거할 길이 0이거나 0보다 작은 수이면 어떤 원소도 삭제되지 않는다. 0일때 추가할때는 첫번째 매개변수 start뒤에서 부터 추가되고 0이면 빈배열 []를 반환한다. 세번째 배열에 추가할 원소이다. ( 제거된 마지막 원소자리에 추가된다. ) 제거된 원소가 반환값으로 나온다.

var arr = [ 'a', 'b', 'c', 'd', 'e', 'f' ];
console.log(arr.splice(1,3)); // [ 'b', 'c' 'd' ]
console.log(arr) // [ 'a', 'e', 'f' ]
console.log(arr.splice(1,3,'가','나'); // [ 'b', 'c', 'd' ]
console.log(arr) // [ 'a', '가', '나', 'e', 'f' ]
var arr1 = [ '가', '나', '다', '라' ];
console.log(arr1.splice(1,0,'마','바); // []
console.log(arr1); // [ '가', '마', '바', '나', '다', '라' ];

• array.pop()
  배열의 맨 마지막 원소 하나를 제거한다. 제거한 데이터는 해당 원소 타입으로 반환 원본 배열은 제거된 원소를 제외한 나머지가 된다. 넣어줄 인자 x

var arr = [ 'a', 'b', 'c', 'd' ];
console.log(arr.pop()); // 'd'
console.log(arr); // [ 'a', 'b', 'c' ]

• array.push()
  배열의 마지막에 새로운 원소를 추가한다. 반환값은 변경된 배열의 길이를 반환 ( push()의 인자로 넣어준 원소 포함 ) 인자는 넣어줄 원소를 쓴다. ( 넣어줄 타입과 값 1개이상 가능) 원본 배열이 수정된다.

var arr = new Array( 'a', 'b', 'c', 'd' );
arr.push('e');
console.log(arr); // [ 'a', 'b', 'c', 'd', 'e' ];
console.log(arr.push('e')); // 5

• array.shift()
  배열의 첫 번째 원소 하나를 제거한다. 제거한 데이터는 해당 원소 타입으로 반환 원본 배열은 제거된 원소를 제외한 나머지가 된다. 넣어줄 인자 x

var arr = [ 'a', 'b', 'c', 'd' ];
arr.shift();
console.log(arr.shift()); // 'a'
console.log(arr); // [ 'b', 'c', 'd' ];

• array.unshift()
  배열의 첫 번째에 새로운 원소를 추가한다. 반환값은 변경된 배열의 길이를 반환 ( unshift()의 인자로 넣어준 원소 포함 ) 인자는 넣어줄 원소를 쓴다. ( 넣어줄 타입과 값 1개이상 가능) 원본 배열이 수정된다.

var arr = new Array( 'a', 'b', 'c', 'd' );
arr.unshift('a0');
console.log(arr.unshift('a0')); // 5
console.log(arr); // [ 'a0', 'a', 'b', 'c', 'd' ];

• array.reverse()
  배열의 순서를 뒤집는다. 원본 배열도 순서가 뒤집힌다.

var arr = [ 'a', 'b', 'c', 'd' ];
console.log(arr.reverse()); // [ 'd', 'c', 'b', 'a' ]

• array.sort()
  sort()는 기본적으로 배열의 원소를 오름차순으로 정렬해준다. ( 인자에 아무것도 넣지 않을경우 number, string 해당) 하지만 대부분 sort함수의 인자값으로 비교 함수를 전달하여 정렬을 시킨다. ( 이 경우 같은 데이터 타입이여야 해당된다. )

var arr = [ 'f', 4, '라', 2, 'c', '나', [ 1, 5, 3 ] ];
console.log(arr.sort()); // [ [ 1, 5, 3 ],  2, 4, 'c', 'f', '가', '다' ];