배열

순서가 있는 값으로 객체와는 다름 객체는 순서가 없음.
순서는 index 라고 부르며 index는 0부터 시작
요소=값=element
순서가 있는 값이 므로 arr.length로 배열의 길이를 확인이 가능

배열 생성

변수를 선언하고 그 변수에 대괄호(Square bracket)을 이용해서 배열을 만듬
각각의 element는 쉼표(,)로 구분한다.

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

인덱스를 이용하여 배열 조회

let arr = [1,2,3,4,5]
arr[0] // 결과값 1

이 경우 arr[index]로 배열의 조회가 가능
arr[0]의 경우 0번째 index의 값을 조회한다는 의미

배열의 값 변경하는 법

'=' 를이용해서 대입시켜주면 됨.

let arr = [1,2,3,4,5]
arr[0] = 2  //0번째 index의 값을 1에서 2로 변경

배열인지 아닌지의 유무 확인하는 방법(Array.isArray()

일반적으로 원시 자료형은 typeof를 사용하면 어떤 형태인지 확인이 가능
원시자료형이 아닌 참조 자료형(대표적으로 객체 , 배열)은 tpyeof를 사용하면 object로 나오게됨
그래서 typeof로는 객체인지 배열인지 구분이 안됨
구분을 위해서는 Array.isArray()를 사용하여 구분을 함

array.isArray()를 사용하게되면 ()안의 값혹은 변수가 Array인지 아닌지 확인하고
배열일 경우 true를 아닐경우 false를 반환

let arr = []
Array.isArray(arr) // true
let a = "123"
Array.isArray(a) // false

배열의 반복

일반 for 반복문

배열은 순서가 있는 값이므로 기존에 사용하였던 for()문이 사용이 가능.
반복을 시킬경우는 index값을 인자로 하여 반복시키면됨.

let arr = [1,2,3,4,5]
for (let i = 0 ; i<arr.length ; i++) {
	console.log(arr[i])
} //arr[0]~arr[4]값인 1,2,3,4,5가 한번씩 출력됨.

for ..of 반복문

for..of를 사용하면 현재 요소의 인덱스는 얻을 수 없고 값만 얻을 수 있음
배열 요소를 대상으로 반복 작업을 수행
아래 예시에 기재된 let key값은 그저 변수 이므로 다른값을 사용해도됨.
모든 key값을 한번씩 출력하는 것.

let arr = [1,2,3,4,5]
for(let key of arr) {
	console.log(key)
} //arr[0]~arr[4]값인 1,2,3,4,5가 한번씩 출력됨.
<br>
let arr = [1,2,3,4,5]
for(let zxcv of arr) {
	console.log(zxcv)
} //arr[0]~arr[4]값인 1,2,3,4,5가 한번씩 출력됨.

배열의 메서드

arr.push()

배열의 끝에 요소를 추가함
push()를 호출하는 것은 arr.length를 하는것과 같은 효과를 가짐

let fruits = ["사과", "오렌지"];
fruits.push("배");  //이때 결과값은 fruits.length의 값은 3이 나옴
fruits; // 사과,오렌지,배

arr.pop()

배열의 끝 요소를 제거하고 , 제거한 요소를 반환

let fruits = ["사과", "오렌지", "배"];
fruits.pop() ); // 배열에서 "배"를 제거하고 제거된 요소를 반환함.
fruits; // 사과,오렌지

arr.shift()

배열 맨 앞의 요소를 제거하고 제거한 요소를 반환

let fruits = ["사과", "오렌지", "배"];
fruits.shift(); // 배열에서 "사과"를 제거하고 제거된 요소를 반환.
fruits; // 오렌지,배

arr.unshift

배열 맨앞에 요소를 추가

let fruits = ["오렌지", "배"];
fruits.unshift('사과'); //이때 결과값은 fruits.length와 같은 값을 지님.
fruits; // 사과,오렌지,배

push와 unshift는 요소 여러개를 한번에 더하는 것도 가능

let fruits = ["사과"];
fruits.push("오렌지", "배");
fruits.unshift("파인애플", "레몬");
fruits; // ["파인애플", "레몬", "사과", "오렌지", "배"]

arr.splice

사용시 splice를 사용하면 배열요소의 추가,삭제 ,교체가 모두 가능하며 배열의 값과 요소가 변경됨
객체에서 프로퍼티를 지우는 delete를 사용하면 배열의 length는 그대로 이지만 값은 사라짐
그래서 delete대신 splice를 활용하는것이 더 좋음

요소의 삭제

let arr = ["I", "study", "JavaScript"];
arr.splice(1, 1); // 인덱스 1부터 요소 한개를 제거
alert( arr ); // ["I", "JavaScript"]

요소의 교체

let arr = ["I", "study", "JavaScript", "right", "now"];
// 처음(0) 세 개(3)의 요소를 지우고, 이 자리를 다른 요소로 대체합니다.
arr.splice(0, 3, "Let's", "dance");
alert( arr ) // now ["Let's", "dance", "right", "now"]

음수 index또한 사용이 가능

배열 관련 메서드에는 음수 인덱스가 사용이 가능하며 마이너스 부호 앞의 숫자는 배열 끝에서부터 센 요소 위치를 나타냄.

let arr = [1, 2, 5];
// 인덱스 -1부터 (배열 끝에서부터 첫 번째 요소)
// 0개의 요소를 삭제하고
// 3과 4를 추가합니다.
arr.splice(-1, 0, 3, 4);
arr; // 1,2,3,4,5

arr.slice

arr.splice와는 다르게 배열이 바뀌지 않음.
arr.slice([start],[end])
"start" 인덱스부터 ("end"를 제외한) "end"인덱스까지의 요소를 복사한 새로운 배열을 반환하며 쉽게 말하면 end는 end-1이라고 보면됨.

let arr = ["t", "e", "s", "t"];
arr.slice(1, 3); // e,s (인덱스가 1인 요소부터 인덱스가 3인 요소까지를 복사(인덱스가 3인 요소는 제외))
arr.slice(-2); // s,t (인덱스가 -2인 요소부터 제일 끝 요소까지를 복사)

arr.concat

기존 배열에 요소를 추가하고 싶을때 사용하거나, 배열과 배열을 붙이고 싶을때 사용.

let a = [1,2,3]
let b = [4,5,6]
let c = a.concat(b)  // c라는 배열에는 a와 b가 모두 합쳐진 [1, 2, 3, 4, 5, 6]이 생성됨
<br>
let d = [1,2,3]
d.concat(4) //[1,2,3,4]

arr.indexOf, arr.includes

• 배열 내에서 무언가를 찾고 싶을 때 사용하는 메서드

indexOf

배열에서 해당 값이 존재하는지 없는지를 확인후 몇번째 index에 자리하고 있는지 리턴
만약 찾고싶은 값이 없을경우 -1을 리턴

let arr= ["a","b", "c"]
arr.indexOf("a") // 0번째 index에 위치하므로 0 
arr.indexOf("b") // 1을 리턴
arr.indexOf("c") // 2를 리턴
arr.indexOf("d") // 값이 존재하지 않으므로 -1 리턴

includes

indexOf와 비슷하지만 includes같은 경우는 해당값이 존재하면 true 없으면 false로 값을 리턴함.
한가지 주의해야할 점은 IE에서는 지원하지 않으므로 사용시 주의가 필요

let arr= ["a","b", "c"]
arr.includes("a") //true
arr.includes("d") // false