배열
- 하나의 변수에 여러 값을 저장할 수 있는 자료 구조
- 여러개의 값을 묶음 처리하여 저장된 값을 조회하거나 연산을 편리하게 해줌
배열 생성
- 심볼 이용 방식
const 배열명 = new Array('아이템1', '아이템2', ...) - 리터럴 방식
const 배열명 = ['아이템1', '아이템2', ...]
배열 접근 방법
- 배열의 값은 인덱스로 구분
- 배열명[인덱스] 로 접근
-
인덱스의 시작은 0번 부터
배열명[0] // 첫번째 아이템 배열명[배열명.length -1] // 마지막 아이템
-
배열 원소의 데이터 타입
- 배열의 원소가 될 수 있는 데이터 타입은 문자열, 숫자 등 한가지 종류로 구성될 수도, 섞여 있는 경우도 가능
- 심지어 함수도 가능, 단 함수의 경우 인덱스 호출시 뒤에 () 붙여줘야함
- 배열명2
const 배열명 = ['문자열', 123, function(){alert('함수')}]
배열의 속성과 메서드
- 객체는 정적인 값의 저장을 위한 속성과 동적인 연산을 위한 메서드로 구성
- 배열은 객체이며 기본적으로 제공되는 속성과 메서드가 있음
- 다양한 속성과 메서드
-
.length ⇒ 배열의 길이 리턴
-
.toString() ⇒ 배열의 모든 요소를 ,로 연결해 리턴
1, 2, 3 -
.toString(’구분자’) ⇒ 배열의 모든 요소를 구분자로 연결해 리턴
1:2:3 -
push(), pop()
- 원소 추가/제거
-
splice(), slice()
-
원소 변경/추출
배열명.splice(start, deleteCount, item1, item2, ...) -> start : 변경 시작할 인덱스 (음수 시 배열 끝 부터의 인덱스) -> deleteCount : 배열에서 제거할 요소의 수 (0이면 제거 X, deleteCount가 주어지지않으면 모두 삭제) -> item1, item2, ... : 배열에 추가할 요소들 배열명.slice(시작 인덱스, 마지막 인덱스) -> 시작 인덱스 ~ 마지막 인덱스 -1 에 대한 값을 복사하여 새로운 배열 반환
-
-
indexOf(item, start)
- start인덱스부터 item이 존재하면 index를 반환
-
concat()
-
배열 합치기
배열명1.concat(배열명2, 배열명3, ...)
-
-
valueOf()
- 배열의 아이템들을 출력함 (구분자 포함X)
-
join(’구분자’)
- 배열의 아이템들을 구분자로 구분해 출력함
-
sort(), reverse()
- 배열 정렬
-
forEach(), map()
-
배열 순회 or 조작
-
forEach() → 배열의 요소를 각각 한 번씩 순회하는 반복 문
-
map() → 배열의 요소를 각각 한 번씩 순회하면서 실행하는 연산의 결과로 새로운 배열을 생성하는 메서드
배열명.forEach(function(item, index){ console.log(item, index)}) let array1 = 배열명.map(function(item, index){ return item })
-
-
filter(), reduce()
-
filter() → 배열의 요소를 한 번씩 순회하며 특정 조건을 통과하는 원소로만 구성된 새로운 배열을 생성
-
reduce() → 배열의 요소를 각각 한 번씩 순회하면서 실행하는 연산의 결과를 반환
- 이를 위해 total 변수와 초기값이 있다는 특징const 배열명 = 배열명.filter(function(value, index){ return (value % 3) == 1 // 3으로 나눈 나머지가 1인 변수만 리턴 }) const sum = numbers.reduce(function(total, item){ return total + item }, 0)
-
-
구조 분해 할당
-
배열이나 객체의 속성을 해체하여 그 값의 전부 혹은 일부를 개별 변수에 담을 수 있게 하는 표현식
const cats = ['노르웨이숲', '코리안숏헤어', '샴', '러시안블루'] cats[0], cats[1], cats[2] // 인덱스 접근 법 const [cat1, cat2, cat3, cat4] = cats // 구조분해 할당 방식 // 기본적으로 배열의 순서에 따라 변수를 할당, // 필요 없다면 , 를 통해 배제 가능 혹은 나머지 연산자를 이용할 수도 있음 const [cat1, , cat2, cat3] const [cat1, cat2, ...restcat] // 객체에 구조 분해 할당 적용하려면 속성명을 변수명으로 하는 형태로 가능 const {name, species} = {name : '망고', species : '노르웨이숲'} cat1 // 노르웨이숲 cat2 // 코리안숏헤어 cat3 // 샴 cat4 // 러시안 블루
-
-
스프레드 연산자와 나머지 연산자
- 스프레드 연산자와 나머지 연산자는 동일한 형태이나 다르다
- 스프레드 연산자 : 배열을 엘리먼트로 확장하나 나머지 연산자는 여러 엘리먼트를 수집하여 하나의 엘리먼트로 압축
- 스프레드 연산자 : 배열이나 객체를 전부 복사하거나 그 일부를 다른 배열이나 객체로 만드는 연산자
- 나머지 연산자 : 구조 분해 할당에서 분해하고 남은 부분을 하나의 변수에 할당하는 연산자// 스프레드 연산자 const array1 = [1,2,3] const array2 = [4,5,6] const array12 = [...array1, ...array2] // 나머지 연산자 const array3 = [1, 2, 3, 4, 5, 6] const [a, b, ...rest] = array3 console.log(a,b) => 1, 2 console.log(rest) => [3,4,5,6]
-
