Array 알아보기

😄 Code 1. 배열 선언

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

console.log(arr); // output : []
console.log(arr2); // output : (2) [1, 2]

• 배열은 new 연산자 사용해서 선언하거나 직접 값을 할당해서 선언하는 방법 두가지가 있다

• 배열 index는 0부터 시작한다

• arr2 배열의 0번 Index에는 1, 1번 index에는 2가 저장되어 있다

😄 Code 2. Index

const fruit = ['사과', '딸기'];
console.log(fruit); // output : (2) ['사과', '딸기']
console.log(fruit.length); // output : 2
console.log(fruit[1]); // output : 딸기
console.log(fruit[fruit.length - 1]); // output : 딸기

• array.length는 배열의 길이를 나타낸다 (배열 안에 있는 아이템 개수)

• Index로 접근할때는 array[Index]로 접근한다. 배열 Index는 0부터 시작하는것에 주의

😄 Code 3. 배열 출력

const fruit = ['사과', '딸기'];
// a = 0부터 1씩 증가하면서 배열의 길이만큼 반복한다
for (let a = 0; a < fruit.length; a++) {
  console.log(fruit[a]); // output : 사과 딸기
}
// for of
// 배열 fruit를 변수 fruits에 아이템 하나씩 저장한다
for (let fruits of fruit) {
  console.log(fruits); // output : 사과 딸기
}
// forEach
fruit.forEach((fruit) => {
  console.log(fruit); // output : 사과 딸기
});

• 위의 forEach문에서 이름 없는 함수는 =>(Arrow Function) 사용이 가능하다

😄 Code 4. 배열 아이템 조작

const fruit = ['사과', '딸기'];
// 배열 뒤 아이템 추가
fruit.push('복숭아', '바나나');
console.log(fruit); // output : (4) ['사과', '딸기', '복숭아', '바나나']
// 배열 뒤 아이템 삭제
fruit.pop();
console.log(fruit); // output : (3) ['사과', '딸기', '복숭아']
fruit.pop();
console.log(fruit); // output : (2) ['사과', '딸기']
// 배열 앞 아이템 추가
fruit.unshift('남승현', '호두과자');
console.log(fruit); // output : (4) ['남승현', '호두과자', '사과', '딸기']
// 배열 앞 아이템 삭제
fruit.shift();
fruit.shift();
console.log(fruit); // output : ['사과', '딸기']
fruit.push('바나나', '자두', '복숭아');
// 배열 안의 지정된 위치(index)의 아이템 지우기
console.log(fruit); // output : (5) ['사과', '딸기', '바나나', '자두', '복숭아']
// fruit 배열의 1번째 index 위치부터 아이템 1개만 지우고 지운 위치에 '수박' 아이템을 넣는다
fruit.splice(1, 1, '수박');
console.log(fruit); // output : (5) ['사과', '수박', '바나나', '자두', '복숭아']

• Push()는 배열 맨 뒤에 아이템을 추가한다

• pop()은 배열 맨 뒤에 있는 아이템 하나만 삭제한다

• unshift()는 배열 앞에서 아이템을 추가한다

• shift()는 배열 앞에서 아이템을 하나만 삭제한다

• splice(인덱스 번호, 지울 개수)

  • 지정한 Index 위치부터 지정한 개수만큼 지운다
  • 지울 개수는 생략 가능

unshift(), shift()는 pop(), push()보다 속도가 느리다

Why?

• 배열 뒤에서 아이템을 추가하고 삭제하는건 배열의 기존 아이템 움직임에 영향을 주지 않는다. 하지만 배열 앞에서 아이템을 추가하고 삭제하는건 배열의 기존 데이터 움직임에 영향을 준다

  • 그래서 가능하면 속도가 더 빠른 pop()과 push()를 권장한다

😄 Code 5. 배열 묶기

const fruit = ['사과', '딸기'];
const fruit2 = ['떡볶이', '감자'];
const newFruit = fruit2.concat(fruit);
console.log(fruit2); // output : (2) ['떡볶이', '감자']
console.log(newFruit); // output : (4) ['떡볶이', '감자', '사과', '딸기']

• const newFruit = fruit2.concat(fruit);에서 fruit과 fruit2 위치를 바꾸면 배열 안의 아이템 순서가 바뀐다 (output : (4) ['사과', '딸기', '떡볶이', '감자'])

😄 Code 6. 배열 데이터 검색

const fruit = ['사과', '딸기'];
console.log(fruit.indexOf('호랑이')); // output : -1
console.log(fruit.includes('사과')); // output : true

// 배열 맨 뒤에 '사과' 아이템 추가
fruit.push('사과');
console.log(fruit); // output : (3) ['사과', '딸기', '사과']
console.log(fruit.indexOf('사과')); // output : 0
console.log(fruit.lastIndexOf('사과')); // output : 2

• indexOf()는 배열 안의 아이템 위치를 Index로 반환한다. 찾으려는 아이템이 배열 안에 없으면 -1을 반환한다

• indexof()는 동일한 데이터가 배열 안에 있으면 앞에 있는 아이템 Index를 반환한다

• includes()는 아이템이 배열 안에 있는지 확인한다. 반환값은 boolean으로 true or false를 반환한다

• lastIndexOf()는 동일한 데이터가 배열 안에 있으면 맨 뒤에 있는 아이템 Index를 반환한다

😍 코드 지적은 언제나 환영입니다. 읽어주셔서 감사합니다. 😍