배열
키와 값을 이용해서 만든 컬렉션을 객체라고 하죠
하지만 순서가 있는 컬렉션을 만들때는 배열을 사용해야 합니다.
const fruits = ['바나나','딸기','사과'];
console.log(fruits.[1]); // 딸기배열을 출력하려면 arr.[index] 제로 베이스 기준으로 출력합니다.
또 특정부분을 변경할수도 있고 추가할수도 있습니다.
const fruits = ['바나나','딸기','사과'];
fruits[2] = '키위' // 사과를 키위로
fruits[3] = '오렌지' // 오렌지 추가
console.log(fruits); // ["바나나", "딸기", "키위", "오렌지"]배열 요소에는 제약이 없습니다. 또다른 배열, 객체, 함수도 넣을수 있습니다.
const arr = ['바나나',{name:'일론',age:20},() =>{console.log("안녕");}];
console.log(arr[1]); // {name: "일론", age: 20}
arr[2](); // 안녕이와 같이 배열에 있는 데이터들을 요소(element) 라고 하고 item 이라고도 부릅니다.
arr.find(fn)
함수가 순차적으로 탐색합니다. 참을 찾으면 해당요소를 반환하고 탐색을 중단합니다.
const arr = [1,10,20,50];
const found = arr.find((el)=>{
return el > 15
})
console.log(found); // 20만약 조건에 해당하는 요소가 없으면 unifenid 를 반환합니다.
arr.findIndex()는arr.find()와 비슷하지만 요소가아닌 인덱스 값을 찾고
부합하는 요소가 없으면 -1을 반환합니다.
arr.length
length 메서드 는 기본적으로 요소의 갯수를 알려줍니다.
const arr = [1,10,20,50];
console.log(arr.length); // 4정확히 말하면 가장 큰 인덱스의 +1 값 입니다. 숫자50 은 인덱스3 이니 4가 된것이죠
배열에 인덱스 10이란 값을 주입해보겠습니다.
const arr = [1,10,20,50];
arr[10]=123456;
console.log(arr.length); // 11인덱스 5 ~ 9를 건너뛰고 10에 임의의 값을 주입했습니다.
가장큰 인덱스 값이 10이므로 11이 출력될겁니다.
따라서 length 메서드는 가장큰 인덱스의 +1 값을 알려주지만
그것이 정확히 요소의 갯수를 뜻하는건 아닙니다.
arr.concat()
배열과 배열을 합쳐줍니다.
const arr = [1,2,3,4];
const fruits = ['바나나','딸기','참외'];
const combine = (arr.concat(fruits));
console.log(combine); // [1, 2, 3, 4, "바나나", "딸기", "참외"]여기서 중요한것은 원본 배열은 변경하지 않고 새로운 배열을 반환 합니다.
arr.forEach(currentValue,index)
배열의 각 요소에 대해 callback 함수를 실행합니다.
currentValue 처리할 현재요소
index 옵션 처리할 요소의 인덱스
const arr = [1,2,3,4,5,6,7,8,9]
arr.forEach((el)=>{console.log(el)}) // 1 , 2 , 3 , 4 , 5 , 6 , 7 ,8 , 9arr.map(currentValue,index)
.forEach 와 같은 역할을 하지만 .map은 각요소에 대한 결과들을 모아서 return 을 해줍니다. 즉 새로운 배열을 만드는거죠
const arr = [1,4,9,20]
const arr2= arr.map((el)=>el*2)
console.log(arr2); //[2,8,18,40].fiter()
주어진 함수의 조건을 통과한 요소들을 배열로 만들어 반환 합니다.
사실 map 과 비슷한 개념인데 맵과 무엇이 다른지 확인하겠습니다.
const arr =[1,3,6,8,9,12];
const a = arr.map((el)=>el < 7); // 7보다 작으면
console.log(a); // [true, true, true, false, false, false]arr.map() 에서는 조건이 주어지면 true 와 false 가 반환됩니다.
만약 반환된 데이터 그 자체가 필요하다면 .fiter() 함수를 쓸수 있습니다.
const arr =[1,3,6,8,9,12];
const a = arr.filter((el)=>el < 7); // 7보다 작으면
console.log(a); // [1,3,6].includes()
배열이 특정요소를 포함하고 있는지 체크합니다.
const fruits = ['Apple','Banana','Cherry']
console.log(fruits.includes('Apple')); //trueincludes()는 대 소문자를구분합니다.
데이터가 수정됨
지금까지 봤던 메서드는 원본 데이터를 건드리지 않았습니다.
지금부터 볼 메서드는 원본 데이터가 수정됩니다.
.push() .unshift
push - 맨끝에 요소를 추가합니다.
unshift - 맨앞에 요소를 추가합니다.
const arr = [1,2,3,4,5]
arr.push(5);
console.log(arr); // [1, 2, 3, 4, 5, 5]const arr = [1,2,3,4,5]
arr.unshift(5);
console.log(arr); // [5, 1, 2, 3, 4, 5]push 와 unshift 는 앞뒤로 요소를 추가합니다.
반대로 요소를 빼는 메서드를 살펴보겠습니다.
const arr = [1,2,3,4,5]
arr.pop();
console.log(arr); // [1, 2, 3, 4]const arr = [1,2,3,4,5]
arr.shift();
console.log(arr); // [2, 3, 4, 5]요소를 마음껏 추가할수 있는 push 와 unshift 와 다르게
pop과 shift 는 요소 한개만 제거 후 return 합니다.
push 와 pop은성능이 빠릅니다. 뒤에서 배열을 추가 하면 되니깐요
하지만shift 와 unshift는 배열을 앞에서 제거하고 모든 배열을 한칸씩 당기기 때문에성능이 하락합니다. 때문에 배열의 길이가 길수록 큰 성능 하락을 불러옵니다.
revers()
reverse() 는 배열의 순서를 반전합니다.
const arr = [1,2,3,4,5]
arr.reverse();
console.log(arr); // [5, 4, 3, 2, 1]
splice(start,deleteCount,item1..)
splice 메서드는 만능 메서드 입니다. 추가,삭제,교체가 가능하기때문이죠
먼저 start 필수 인자 입니다. 어디서 부터 자르고 추가할지 기준을 정합니다.
단 start 인자 하나만 입력한다면 그 요소부터 뒷부분 모두 삭제합니다.
const arr = ['a','b','c','d','e','f','g']
arr.splice(3);
console.log(arr); // ["a", "b", "c"]두번째 매개변수deleteCount 입니다. start 를 기준으로 몇개를 삭제할지 정합니다.
const arr = ['a','b','c','d','e','f','g']
arr.splice(3,2);
console.log(arr); // ["a", "b", "c", "f", "g"]세번째 매개 변수는 item 입니다. 무엇을 추가할지 정합니다.
만약 배열구성의 변경없이 끼어넣기 를 원한다면 이렇게 할수있습니다.
const arr = ['a','b','c','d','e','f','g']
arr.splice(3,0,'Apple');
console.log(arr); // ["a", "b", "c", "Apple", "d", "e", "f", "g"]마찬가지로 splice 메서드또한 삭제된 요소들은 return 됩니다.
const arr = [1,2,3,4,5,6,7,8,9]
const remove=arr.splice(3,4)
console.log(remove); // [4, 5, 6, 7]