배열 제대로 알고 쓰자
자료구조란
프로그래밍 언어에서 비슷한 데이터들을 묶어서 한 곳에 모아두는 것을 말한다.
object와 자료구조의 차이점
object는 서로 연관된 특징과 행동들을 묶어놓는 것을 말하고 자료구조는 비슷한 object들끼리 묶어서 모아두는 것을 말한다.
javascript는 dynamically typed language이기 때문에 여러가지 type의 객체를 자료구조로 묶을 수 있지만 그렇게 묶는 것은 좋지 않다.
배열
배열은 칸칸히 만들어져있는 박스의 형태이다.
박스에는 index가 부여되어 있고 그 순서는 0부터 시작하게 된다.
Aray declaration
배열 선언
const arr1 = new Array();
const arr2 = [1,2];배열에서는 index를 기준으로 데이터가 저장되기 때문에 데이터를 검색, 삽입, 삭제하는 것을 잘 아는 것이 중요하다.
index position
const fruits = ['사과','바나나'];index의 시작은 언제나 0부터 시작하기 때문에 사과의 위치는 0번이고 바나나는 1번이다.
배열 fruits의 길이를 알고싶을때는
fruits.length를 사용하면 배열의 길이를 알 수 있다.
각 배열안의 값을 출력하고자 할때는 그 인덱스 값을 알아야된다.
사과를 출력하려면
console.log(fruits[0]);바나나를 출력하려면
console.log(fruits[1]);그리고 배열 마지막에 있는 item을 출력할때는
console.log(fruits.length - 1);배열의 길이에서 1을 빼면 마지막 item이 출력된다.
Looping
배열안에 모든 item들을 출력하기
- for
for(let i = 0; i < fruits.length; i++){
console.log(fruits);
}변수 i 값을 주고 i 값이 fruits의 길이보다 작을때 fruits를 출력하고 i값을 1 증가 시킨다.
i값이 fruits 배열의 길이보다 크면 for를 중지시킨다.
- for of
for(let fruit of fruits){
console.log(fruit)
}fruits 배열에 있는 item들을 fruit변수에 하나씩 넣고 출력한다. fruits에 있는 모든 값들을 넣으면 중단한다.
- forEach (API)
forEach(callbackfn: (value: T, index:number, array: T[]) => void,thisArg?: any): void
value: 지금 현재 처리할 요소
index: 지금 처리할 요소의 인덱스(순서)
array: forEach()를 호출한 배열
thisArg: callback을 실행할 때 this로 사용할 값(파라메터를 전달해도 되고 안해도 된다.)
forEach는 주어진 callback을 배열에 있는 각 요소에 대해 오름차순으로 한 번씩 실행한다. 삭제했거나 초기화하지 않은 인덱스 속성에 대해서는 실행하지 않는다.
fruits.forEach((fruit) => console.log(fruit));forEach( )은 배열을 순회하면서 배열의 각 원소들을 출력합니다.
Addtion, deletion, copy
배열 제일 뒤의 값을 넣을때
push
fruits.push('사과','복숭아');배열 제일 뒤의 값을 지울때
pop
fruits.pop()
배열 앞에서 값을 넣을때
unshift
fruits.unshift('사과','복숭아');
배열 앞에서 값을 지울때
shift
fruits.shift();
unshift 와 shift는 pop 과 push보다 훨씬 느리다.
unshift는 [0]에 있는 값을 [1]로 옮기고 비어있는 [0]에 새로운 값을 넣게 된다.
shift도 마찬가지로 앞에 있는 값을 먼저 지우고 그 뒤에 있는 값들을 하나씩 앞으로 땡겨와야 되기 때문에 시간이 오래걸린다.
만약 배열의 길이가 아주 길다면 시간이 많이 걸릴 것이다.
그렇기 때문에 unshift. shift보다는 push, pop을 쓰는 것이 더 효율적이다.
값을 지정된 position에서 지우는 것
splice
splice(start: number, deleteCount?: number)(자르는 시작점, 자르는 갯수)를 정한다.
fruits.push('딸기','참외','복숭아'); fruits.splice(1,1) // 딸기 복숭아
자른 곳에 새로운 값을 넣으려고 할때
fruits.splice(1,1,'자두','포도'); // 딸기 자두 포도 복숭아지우지 않고 값을 추가 할 수도 있다.
fruits.splice(1,0,'자두','포도')
두가지 배열을 붙이는 API
concat()
cosnt fruits1 = ['사과','자두'] const fruits2 = ['청포도','오렌지']; const newFruits = fruits.concat(fruits2); // 사과 자두 청포도 오렌지
Searching(검색)
console.log(fruits.indexOf('자두')); // 1
console.log(fruits.includes('자두')); // true
console.log(fruits.includes('참외')); // false
console.log(fruits.indexOf('참외')); // -1indexOf는 배열안에 값이 어디에 있는지 index로 알려주고 만약 배열안에 값이 없다면 -1를 출력한다.
includes는 값이 배열안에 있는지 boolean타입으로 알려준다.
LastIndexOf
제일 마지막에 있는 값의 번호를 지정한다.
만약 중복되는 값이 있을 경우 배열안에 중복되는 값들 중에서 가장 마지막에 있는 값을 선택한다.
[사과,자두, 포도, 복숭아, 청포도, 오렌지, 사과]
여기서 indexOf와 lastIndexOf의 차이점은
indexOf는 배열안에서 처음으로 나오는 값을 지정하는 것이고 lastIndexOf는 배열안에 중복되는 값들중 제일 마지막에 있는 값을 선택한다.
fruits.indexOf('사과'); // 첫번째 있는 사과
fruits.lastIndexOf('사과'); //중복된 것들 중 제일 마지막에 있는 사과
