Java Script - Array :: 배열

📎INDEX

배열(Array)이란?

배열이란? 한개의 변수에 여러 개의 값을 순차적으로 저장할 때 사용한다.

문법

var arr = new Array() ;
var arr = [];

배열 안에 들어있는 값들을 요소(element, item, etc)라고 한다.

:: 사용예제

var arr = [ 1, '2', ture ];
var arr1 = [ undefined, null, false, NaN, 1000 ];

// 배열의 값은 어떤 값이라도 배열의 요소로 추가할 수 있으며 
// 

1. 배열의 특징

배열은 번호가 매겨진 인덱스를 갖는 특별한 유형의 객체이다. (객체이지만 객체와는 접근 방법이 다름)

:: 사용 예제

var fruits = [ 'apple', 'orange', 'banana' ];
fruits

//배열에 값 넣는법

myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;

2. 배열의 단점

1 중간의 특정 요소를 삭제해야 하는 경우

2 Array Resizing

3. 배열과 객체의 각 사용 시기

4. 배열 사용 시 주의점

var points = new Array(40, 100, 1, 5, 25, 10); 	// Bad
var points = [40, 100, 1, 5, 25, 10];          	// Good

생성자 new Array() 대신 []를 사용하는것이 좋다.

5. 배열을 인식하는 방법

1 isArray()이용하기

변수가 배열인지 알고싶은 경우, JavaScript 연산자 array.isArray를 이용하여 알 수 있다.

var fruits = ["Banana", "Orange", "Apple", "Mango"];

Array.isArray(fruits); 

// 결과 : true

하지만 이 방법은 ECMAScript 5가 이전 브라우저에서 지원이 되지 않아 문제가 된다.

2 instanceof를 사용하기

var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits instanceof Array;

// 결과 : true

위 방법은 instanceof개체가 주어진 생성자에 의해 생성되는 경우, true를 반환한다.

6. 배열 요소 접근

1 인덱스를 이용하여 접근하기

var food = [ 'pasta', 'steak', 'rice' ];
var myFavoriteFood = food[1];   //배열의 index가 1인 값을 변수에 저장
console.log(myFavoriteFood);

// 결과 : steak

2 전체 배열에 접근하기

var food = [ 'pasta', 'steak', 'rice' ];
document.

3 인덱스를 이용하여 배열의 해당 인덱스 위치에 있는 요소를 수정하기

var fibonacci = [ 1, 2, 3, 5, 8, 13 ];

console.log(fibonacci[4]); 		// 결과 : 8
fibonacci[4] = false;
console.log(fibonacci[4]); 		// 결과 : false

7. 배열의 길이 - length

배열의 array.lengthmethod는 배열의 길이를 반환한다.

var fruits = [ 'apple', 'banana', 'orange' ];
console.log(fruits);		   // 결과 : [ 'apple', 'orange', 'grape' ]
console.log(fruits.length);	// 결과 : 3

:: 예제 참고 함수와 매개변수를 응용해서 배열의 길이를 반환해주는 함수 만들어보기

var fruits = [ 'apple', 'grape', 'banana' ];

function getNumOfFruits(array) {
	return array.length;
}
var numOfFruits = getNumOfFruits(fruits);
console.log(numOfFruits);

// 결과 : 3

8. 배열의 Method

1 forEach()

배열의 array.forEach()method는 주어진 함수를 배열 요소 각각에 실행한다.

var array1 = [ 'a', 'b', 'c' ];

array1.forEach(function(element) {
  console.log(element);
});

// 결과: a, b, c

2 indexOf()

배열의 array.indexOf()method는 배열 안 요소의 인덱스를 찾는다. (숫자 아니고 value값을 넣으면 인덱스 값을 반환!!!)

var fruits = ["apple", "banana", "mango"]

fruits.indexOf("banana");
// 결과 : 1

3 unshift()

배열의 array.unshift()method는 배열의 앞에 요소를 추가한다.

var arr = [];

console.log(arr)  // [] undefined
arr.unshift(1);
arr.unshift(2);
console.log(arr)  // ['2','1'] 

//앞에 추가하는 거니까 더 나중에 들어간 2가 앞에 위치

4 push()

배열의 array.push()method는 배열의 끝에 요소를 추가한다.

var arr = [];

console.log(arr)  // [] undefined
arr.push(1); 
arr.push(2);
console.log(arr)  // ['1','2']

//뒤에 추가하는 거니까 더 나중에 들어간 2가 뒤에 위치

5 shift()

배열의 array.shift()method는 배열의 앞에서부터 요소를 제거한다.

arr.shift();

6 pop()

배열의 array.pop()method는 배열의 끝에서부터 요소를 제거한다.

arr.pop(); 

7 splice()

배열의 array.splice()method는 인덱스 위치에 있는 요소를 제거,추가할 수 있다. (특정 범위의 값들을 추출하고, 그 자리에 새로운 값을 넣는다)

array.splice( 인덱스, 인덱스로부터 제거할 요소의 수, 인덱스로부터 추가할 요소명 );

var jbAry = [ 'One', 'Two', 'Three', 'Four', 'Five', 'Six' ];
jbAry.splice( 1, 2, 'Seven', 'Eight' );

//결과 ["One", "Seven", "Eight", "Four", "Five", "Six"]
// 인덱스값이 1인 Two부터 2개의 엘리먼트를 지워서 Two,Three가 지워지고,
// 그 자리에 Seven,Eight이 추가

8 slice()

배열의 array.slice()method는 배열을 복사할 수 있다.

(begin부터 end까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환 원본 배열은 바뀌지 않는다고함)

//전달인자 두개 받음!
slice(반환될부분의 처음, 반환될부분의 끝)


var a = [1, 2, 3, 4, 5]; 

a.slice(0, 3); // [1, 2, 3]을 반환한다. 
a.slice(3); // [4, 5]를 반환한다. 
a.slice(1, -1); // [2, 3, 4]를 반환한다. 
a.slice(-3, -2) // [3]을 반환한다.

9. 다중차원 배열

Array의 요소가 array가 될 수 있습니다. 이러한 array를 다중차원(multi-dimentional) array라고 합니다. 일반적으로 2D (2차원) array가 많이 사용됩니다

참고한 곳

✔https://velog.io/@surim014/웹을-움직이는-근육-JavaScript란-무엇인가-part-7-Arrays