TIL 08 | Array

배열 (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 추가/삭제)

1. push: add an item to the end ( 뒤에 element 추가 )
2. pop: remove an item from the end
3. unshift: add an item to the benigging
4. 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

1. arr.indexOf (element)
   데이터의 위치 index를 찾는 API (똑같은 데이터가 있다면 맨 처음에 있는 데이터의 index 출력)
2. includes (element)
   데이터가 포함되어 있는지를 boolean 으로 return
3. lastIndexOf (element)
   똑같은 데이터가 있다면 맨 마지막에 있는 데이터의 index 출력

배열에서 반복문 (for)의 사용

• 배열의 모든 요소들이 한번씩 return 되게 할 수 있다.
• 아직 정확한 사용법을 모르니 나중에 한번 더 쓰도록 하겠다.

1. for

for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

2. for of

for(let fruit of fruits) {
    console.log(fruit);
}

3. forEach (콜백함수)

fruits.forEach(function (fruit, index) {
    console.log(fruit, index);
})

오늘 객체도 같이 공부하였지만 , 그건 내일 TIL로....

보람차다 요즘...!

이렇게 꾸준히 해나가자.