배열 (Array)
변수를 선언 할 때 하나의 변수에 하나의 데이터만 할 당한다면 아마도 굉장히 많은 변수를 선언해야하는 불편함을 겪게 될 것이다. 비슷한 종류의 많은 양의 데이터를 다룰때 효율적이고 편리하게 사용 할 수 있는 방법이 바로 배열과 객체이다.
그 중에서도 오늘은 배열에 대해 공부했다.
- 배열은 한개의 변수를 선언하고 여러개의 값을 할당하여 저장할 때 사용.
- 각각의 데이터는 순서를 가지게 되는데 index라고 하며 0부터 시작한다.
- 데이터 하나 하나를 element (요소) 라고 칭한다.
Declaration , 배열의 선언 방법!
배열을 선언하는 방법은 총 2가지
const arr1 = new Array ('a','c',true,5,);
const arr2 = [1, 2, '사과', '바나나', '수박']; // 이 방법을 더 많이 쓰고 있다.
arr2[0] // output: 1
arr3[3] // output: '바나나'- 배열의 element에는 모든 type의 데이터들이 들어 갈 수 있다.
ex) 배열, 객체, number, boolean, string 등...
Addition, Deletion (element 추가/삭제)
- push: add an item to the end ( 뒤에 element 추가 )
- pop: remove an item from the end
- unshift: add an item to the benigging
- shift : remove an item from the benigging (앞에서부터 데이터 삭제)
const arr = ['ManU', 'Arsnal', 'Milan']
// 1. push
arr.push('PSG')
console.log(arr);
//output arr = ['ManU', 'Arsnal', 'Milan', 'PSG']
// 2.pop
arr.pop();
console.log(arr);
//output arr = ['ManU', 'Arsnal']
//3. unshift
arr.unshift('Messi', '호우')
console.log(arr);
//output arr = ['Messi', '호우', 'ManU', 'Arsnal', 'Milan']
//4. shift
arr.shift();
console.log(arr);
//output arr = ['Arsnal', 'Milan']알아둬야 할 것!
push , pop은 뒤에서 부터 아이템을 넣거나 삭제하는 원리이다. 즉 비어있는 공간에 element를 넣어 채워주고 뒤에서부터 빼면서 빈공간을 만들어주기 때문에 데이터들의 이동이 없다. 즉 기존의 index는 변하지 않고 index가 추가되거나 삭제된다.
BUT! shift, unshift는 앞에서부터 element를 넣고 빼야되기 때문에 데이터들의 이동이 발생한다. 기존의 데이터들이 element가 추가되고 삭제됨에 따라 index가 바뀐다.
때문에 속도차이가 발생 할 수 있다. 배열의 길이가 길면 길수록 더 심할 수 있다.
pop, push를 사용하는것을 권장.
Cloning / 배열의 복사
slice method
- start index 부터 end index까지, but end index는 포함하지 않음
- start가 arr.length보다 크면 빈 배열 return
- end가 arr.length보다 크면 마지막 index 까지 return
- start, end 모두 음수 가능.
- slice method를 사용해도 원래 arr에는 영향 없음 (Immutable)
arr.slice( start, end )
const arr = [1,2,3,4,5,6,7]
arr.slice(0, -3) // [1, 2, 3, 4]
arr.slice(2, -2) // [3, 4, 5]
arr.slice(2, -2) // [3, 4, 5]
arr.slice(1, -1) // [2, 3, 4, 5, 6]
splice method
-
start index부터 count 숫자 만큼 element를 지운다.
-
return 되는건 지워진 element들이다.
-
count에 0이나 음수가 들어가면 빈 배열 return
이때 return 되는건 지워진 element 들인데 빈 배열 이기 때문에
arr는 그대로 유지 되는것!! 착각하지 말기. -
선택해서 element를 삭제하고 원하는 element를 추가 할 수 있다.
-
splice는 실행하고 나면 arr이 바뀌기 때문에 mutable이다. slice랑 햇갈리지 말자.
arr.splice(start, count, '추가', '추가')
const arr = ['Messi', 'Bezema', 'ManU', 'Arsnal', 'Milan', 1, 2, 3];
arr.splice(0, 5) // return = ["Messi", "Bezema", "ManU", "Arsnal", "Milan"] / arr = [1,2,3]
arr.splice(3, 3) // return ["Arsnal", "Milan", 1] / arr = ["Messi", "Bezema", "ManU", 2, 3]
arr.splice(2, 2, 'a','b') // return ["ManU", "Arsnal"] / arr = ["Messi", "Bezema", "a", "b", "Milan", 1, 2, 3]배열인지 아닌지 판별하는 Method
Array.isArray(obj)
- boolean 값으로 return
- typeof로 데이터의 type을 구분 할 수 있지만
- object, array, null은 typeof로 했을 때 모두 'object' 반환
- 이럴때 Array.isArray(obj)로 배열 판별 할 수 있음.
// 모두 true 반환
Array.isArray([]);
Array.isArray([1]);
Array.isArray(new Array());
Array.isArray(new Array('a', 'b', 'c', 'd'));
// 모두 false 반환
Array.isArray();
Array.isArray({});
Array.isArray(null);
Array.isArray(undefined);
Array.isArray(17);Searching
- arr.indexOf (element)
데이터의 위치 index를 찾는 API (똑같은 데이터가 있다면 맨 처음에 있는 데이터의 index 출력) - includes (element)
데이터가 포함되어 있는지를 boolean 으로 return - lastIndexOf (element)
똑같은 데이터가 있다면 맨 마지막에 있는 데이터의 index 출력
배열에서 반복문 (for)의 사용
- 배열의 모든 요소들이 한번씩 return 되게 할 수 있다.
- 아직 정확한 사용법을 모르니 나중에 한번 더 쓰도록 하겠다.
- for
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}- for of
for(let fruit of fruits) {
console.log(fruit);
}- forEach (콜백함수)
fruits.forEach(function (fruit, index) {
console.log(fruit, index);
})오늘 객체도 같이 공부하였지만 , 그건 내일 TIL로....
보람차다 요즘...!
이렇게 꾸준히 해나가자.
