자바스크립트 기초 #8 | Array 배열

Array 배열 

 

 

1. Declaration

const arr1 = new Array();
const arr2 = [1, 2];

 

 

2. Index position

length

length-1

const fruits = ['🍉', '🍓'];
console.log(fruits);
console.log(fruits.length); // fruits의 길이
console.log(fruits[0]); // 첫 번째 값 출력 (index값 전달)
console.log(fruits[1]);
console.log(fruits[2]); // undefined
console.log(fruits[fruits.length - 1]); // 배열의 마지막 값 찾을 때 자주 사용

console.clear();

 

 

 

3. Looping over an array

for

for..of

forEach

// print all fruits
// a. for
for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}
// b. for..of
for(let fruit of fruits) {
    console.log(fruit);
}
// c. forEach
fruits.forEach((fruit) => console.log(fruit));
// forEach는 callback 함수를 받아옴

 

 

 

4. Addtion, deletion, copy

뒤 데이터 추가, 삭제 - pop(), push()

앞 데이터 추가, 삭제 - unshift(), shift()

중간 삭제 추가 - slice()

// push: add an item to the end // 뒤에 데이터 추가
fruits.push('🍋', '🍒');
console.log(fruits);

// pop: remove an item from the end // 맨 뒤 데이터 삭제
const poped = fruits.pop(); // pop된 요소를 변수로
fruits.pop();
fruits.pop();
console.log(fruits);

// unnshift: add an item to the benigging // 앞에서부터 데이터 추가
fruits.unshift('🍋', '🍒');
console.log(fruits);

// shift: remove an item from the benigging // 앞의 데이터 삭제
fruits.shift();
fruits.shift();
console.log(fruits);

// note!! shift, unshift are slower than pop, push
// shift, unshift는 pop과 push보다 어어어어엄청 느림
// pop, push는 맨 뒤 빈 공간에 데이터를 넣었다 지웠다 하는 거라 기존 데이터는 움직이지 않아도 됨. 빠름
// 하지만 shift, unshift는 기존 데이터를 하나씩 밀고 새로운 데이터를 넣었다 뺐다 하는 것
// 따라서 배열의 길이가 길 수록 능률 낮음
// 제일 뒤에서 아이템에 접근하는 것은 빠름. 중간의 데이터를 바꾸는 것도 index를 사용해서 빠름
// 전체 배열을 움직여야 하는 경우, 배열이 길 수록 느림

// splice: remove an item by index position
// 지정된 포지션의 아이템 지우기
fruits.push('🍋', '🍒', '🍏'); // 이모지도 문자열
console.log(fruits);
fruits.splice(1, 1); // splice(start: number, deleteCount?: number): string[]
// 몇 개를 지울지 정하지 않으면 지정한 인덱스부터 모두 삭제함
console.log(fruits);
fruits.splice(1, 1, '🍑', '🍇'); // 삭제한 자리에 추가
fruits.splice(1, 0, '🤷‍♀️', '🤷‍♂️'); // 지우지 않고 중간에 추가
console.log(fruits);


// combine two array
// 두 개의 배열 엮어서도 가능
const fruits2 = ['🍎', '🍍'];
const newFruits = fruits.concat(fruits2);
// str.concat(string2, string3[, ..., stringN])
// : 매개변수로 전달된 모든 문자열을 호출 문자열에 붙인 새로운 문자열 반황
console.log(newFruits);

 

 

5. Searching

- 검색 api

indexOf(), lastIndexOf()

요소 존재 유무 확인 true/false - includes()

// indexOf(): 배열의 index값 이용해 요소 찾기 (배열에 없는 값은 -n으로 출력)
console.clear();
console.log(fruits);
console.log(fruits.indexOf('🍉'));
console.log(fruits.indexOf('🍒'));

// includes(): 배열에 요소가 있는지 없는지 true, false로 확인
console.log(fruits.includes('🍉'));// true
console.log(fruits.includes('🍎'));// false

// lastIndexOf(): 찾는 요소의 마지막 index값 검색
console.clear();
fruits.push('🍉');
console.log(fruits);
console.log(fruits.indexOf('🍉'));// 제일 첫번째로 만난 값 결과 출력
console.log(fruits.lastIndexOf('🍉'));// 제일 마지막 값 출력