본문 바로가기
패스트캠퍼스/프론트엔드 아카데미 : 제 1강 JavaScript & TypeScrip

패스트캠퍼스 환급챌린지 29일차 : 김민태의 프론트엔드 아카데미 : 제 1강 JavaScript & TypeScript Essential 강의 후기

by Tan- 2025. 7. 29.

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.
https://fastcampus.info/4n8ztzq


250729(화) 29일차

문법 - 배열

 

배열

자바스크립트에서 하나의 변수에는 하나의 값만 들어갈 수 있지만

실무에서는 여러 개의 값을 함께 다루어야 하는 경우가 많아

그럴 때 사용하는 데이터 구조가 객체와 배열

객체 : 각 데이터에 이름(키)이 붙어 있는 구조 - 누가 누구인지가 중요한 경우

배열 : 이름 없이 위치(index)로 데이터를 구분하는 구조 - 순서만 중요하고 이름이 필요 없는 경우

 

배열 생성과 기본 접근

const books = [];
books[0] = '헨리 6세 1부';
books.push('헨리 6세 2부'); // 맨 뒤에 추가

[ ] 대괄호로 생성하고 빈 배열도 만들 수 있고 생성과 동시에 데이터를 넣을 수 있음

배열은 0부터 인덱스를 시작하며 .length 속성으로 현재 크기를 확인할 수 있음

인덱스의 마지막 값은 항상 length -1

 

배열 조작 메소드
- push: 맨 뒤에 원소 추가
- pop: 맨 뒤 원소 제거 (리턴도 함)
- shift: 맨 앞 원소 제거
- unshift: 맨 앞에 원소 추가

인덱스를 일일이 신경 쓰지 않아도 되어 배열 조작이 훨씬 안전하고 직관적이다.

 

slice(start, end)
- 특정 구간의 배열 값을 "복사해서" 새 배열로 리턴
- 원본 배열은 변경되지 않음
- end는 포함하지 않음

splice(start, count, ...items)
- 특정 구간의 값을 "잘라내고" 다른 값으로 대체 가능
- 원본 배열을 직접 수정함
- 제거 대상은 count로 지정, 추가는 뒤에 나열

const arr = ['a', 'b', 'c'];
arr.slice(0, 2); // ['a', 'b']
arr.splice(1, 1, 'x'); // arr = ['a', 'x', 'c']

 

join
배열을 하나의 문자열로 합쳐줌. 기본 구분자는 ,지만 원하는 문자열도 가능

books.join(' / ');

 

split
문자열을 특정 구분자로 나눠 배열로 변환.

'book1/book2/book3'.split('/');

 

concat
기존 배열에 다른 배열을 뒤에 이어 붙여 새로운 배열 생성.

 

전개 연산자 (...)
가독성 좋고 표현력이 높다. 배열을 직접 펼쳐서 새로운 배열을 만들 수 있다.

const a = [1, 2];
const b = [3, 4];
const c = [...a, ...b];

 

이번 강의는 배열

배열은 단순한 데이터 묶음이 아닌

순서를 기준으로 데이터를 다루고, 가공하고, 추출하는 매우 유연한 구조