자바스크립트 배열(Array)

자바스크립트 배열에 대해서 공부해봤다

프론트엔드를 공부하면서 자바스크립트에서 자주 쓰이는 배열에 대해서 정리해봤다. 배열은 여러 개의 데이터를 한 번에 저장할 수 있는 자료형으로, 리스트처럼 생긴 형태다.

let fruits = ['사과', '바나나', '포도'];
console.log(fruits); // ['사과', '바나나', '포도']

이렇게 대괄호 [] 안에 값을 넣어주면 배열이 된다. 각각의 값은 쉼표로 구분해준다.

배열의 특징을 알아봤다

• 순서(index): 배열은 순서가 있어서, 각 요소에 번호가 매겨진다. 번호는 0부터 시작한다.

  console.log(fruits[0]); // '사과'
  console.log(fruits[2]); // '포도'

• 길이(length): 배열에 몇 개의 요소가 들어있는지 .length로 알 수 있다.

  console.log(fruits.length); // 3

배열에 값을 추가하거나 제거해봤다

• push()를 쓰면 맨 뒤에 값 추가가 가능했다.

  fruits.push('오렌지');
  console.log(fruits); // ['사과', '바나나', '포도', '오렌지']

• pop()은 맨 뒤의 값을 제거해줬다.

  fruits.pop();
  console.log(fruits); // ['사과', '바나나', '포도']

• unshift()는 맨 앞에 추가, shift()는 맨 앞을 제거했다.

  fruits.unshift('딸기');
  console.log(fruits); // ['딸기', '사과', '바나나', '포도']
  
  fruits.shift();
  console.log(fruits); // ['사과', '바나나', '포도']

반복문과 함께 써봤다

배열은 반복문이랑 같이 자주 쓰인다. for문으로 배열을 하나씩 출력해봤다.

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

또는 for...of 문을 써서 더 간단하게도 가능했다.

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

배열 관련 메서드를 조금 더 써봤다

• includes()는 배열에 특정 값이 있는지 확인할 수 있었다.

  console.log(fruits.includes('사과')); // true
  console.log(fruits.includes('수박')); // false

• indexOf()는 값이 어느 위치(index)에 있는지 알려줬다.

  console.log(fruits.indexOf('바나나')); // 1

• join()을 쓰면 배열을 하나의 문자열로 바꿔줬다.

  console.log(fruits.join(', ')); // '사과, 바나나, 포도'

---

마무리

자바스크립트 배열은 생각보다 자주 쓰이면서도 유용한 기능이 많았다. push, pop부터 반복문까지 익숙해지면 코드 짜는 게 훨씬 편해질 것 같다. 다음에는 배열 관련 고차함수들(map, filter, forEach 등)도 정리해봐야겠다.