배열
순서가 있는 값
참조형 자료형으로 변수에 선언했을 때 값이 아닌, 배열의 주소가 담긴다.
요소(element) : 각 인덱스에 담겨 있는 값
인덱스(index) : 배열의 순서, 0부터 시작
let arr = ['apple', 'banana', 'cherry'];
// # 배열은 0번 인덱스 부터 시작한다
console.log(arr[0]); // 'apple'
console.log(arr[3]); // undefined
// # 배열에 재할당이 가능하다
arr[1] = lemon; // arr = ['apple', **'lemon'**, 'cherry'];배열의 타입
1. typeof
배열의 특이한 점은 typeof 로 확인했을 때 object
로 나온다는 점이다.
console.log(typeof arr); // object
2. Array.isArray()
배열의 정확한 타입을 알고 싶다면 Array.isArray() 를 사용해야한다.
괄호안의 값이 배열이라면 true, 아니라면 false를 반환한다.
console.log(Array.isArray(arr)); // true
배열 메서드
1. 원본배열을 변경하는 메서드
배열 안의 값을 삭제하거나 추가하는 명령어로 원본 배열을 직접 변경하는 Mutable method 이다.
push / pop
배열.push(추가할요소) : 배열의 끝에 하나 이상의 요소를 추가, 변경된 배열의 길이를 반환
배열.pop() : 배열의 마지막 값을 삭제, 삭제된 요소를 반환
let arr = [1, 2]
// # 변경된 배열의 길이를 반환
let newLength = arr.push(3, 4, 5)
console.log(newLength); // 5
// # 원본 배열이 변경
console.log(arr); // arr = [1, 2, 3, 4, 5]
// # 삭제된 요소를 반환
let delEl = arr.pop()
console.log(delEl); // 5
// # 원본 배열이 변경
console.log(arr); // arr = [1, 2, 3, 4]unshift / shift
배열.unshift(추가할요소) : 배열의 맨 앞에 하나 이상의 요소를 추가, 변경된 배열의 길이를 반환
배열.shift() : 배열의 첫번째 값을 삭제, 삭제된 요소를 반환
let arr = [1, 2]
// # 변경된 배열의 길이를 반환
let newLength = arr.unshift(3, 4)
console.log(newLength); // 4
// # 원본 배열이 변경
console.log(arr); // arr = [3, 4, 1, 2]
// # 삭제된 요소를 반환
let delEl = arr.shift()
console.log(delEl); // 3
// # 원본 배열이 변경
console.log(arr); // arr = [4, 1, 2]splice
배열.splice(기준인덱스, 제거할 개수, 추가할요소) : 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가, 제거된 값이 있다면 제거한 요소를 배열로 반환
let arr = [1, 2, 3, 4]
// # 마지막 배열의 요소 삭제
let delEl = arr.splice(-1)
console.log(delEl); // [4]
// arr = [1, 2, 3]
// # 하나도 제거하지 않고, 2번 인덱스에 8추가
delEl = arr.splice(2, 0, 8)
console.log(delEl); // []
// arr = [1, 2, 8, 3]
// # 2번 인덱스에서 2개 요소 제거
delEl = arr.splice(2, 2)
console.log(delEl); // [8, 3]
// arr = [1, 2]
// # 1번 인덱스에서 1개 제거하고, ['apple', 'banana', 'cherry'] 추가
delEl = arr.splice(1, 1, 'apple', 'banana', 'cherry')
console.log(delEl); // [2]
// arr = [1, 'apple', 'banana']
// # 뒤에서 3번째 자리에서 2개 제거
delEl = arr.splice(-3, 2)
console.log(delEl) // ['apple', 'banana']
// arr = [1, 'cherry']
// # 기준인덱스 포함 모든 요소 제거
delEl = arr.splice(0); // 0번 자리부터 끝까지
console.log(delEl) // [1, 'cherry']
// arr = []2. 원본배열을 유지하는 메서드
원본을 대체하지 않고 유지하는 메서드 Immutable method
slice
배열.slice(시작 인덱스, 끝 인덱스) : 배열을 입력한 시작인덱스 부터 끝인덱스의 앞까지 자른 후, 배열을 반환한다. 이때 기존의 배열은 바뀌지 않는다. 복사 붙여넣기로 이해
let arr = [0, 1, 2, 3, 4,]
console.log(arr.slice(1, 2));
// [1] ---> 1번인덱스 [1] ~ 2번인덱스의 앞[1]
console.log(arr.slice(1));
// [1, 2, 3, 4] ---> 1번인덱스 [1] ~ 끝까지
console.log(arr.slice());
// [0, 1, 2, 3, 4] ---> 복사
console.log(arr.slice(-3)) // arr.length - 3
// [2, 3, 4] ---> 뒤에서 3개
console.log(arr.slice(-3, -1)) // arr.length - 3, arr.length - 1
// [2, 3] ---> 5-3 인덱스[2] ~ 5-1 인덱스 앞[3]
console.log(arr) // [0, 1, 2, 3, 4,]
// 기존의 arr는 변하지 않는다concat
배열1.concat(배열2) : 배열1의 뒤에 배열2를 붙인다. 배열1과 2는 변하지 않는다
let arr1 = [0, 1, 2]
let arr2 = ['영', '일', '이']
let arr3 = ['zero', 'one', 'two']
// # 배열 이어붙이기
console.log(arr1.concat(arr2)); // [0, 1, 2, '영', '일', '이']
console.log(arr1.concat(arr2, arr3)); // [0, 1, 2, '영', '일', '이', 'zero', 'one', 'two']
// # 값 이어붙이기
console.log(arr1.concat(arr2, '문자열')); // [0, 1, 2, '영', '일', '이', '문자열']
console.log(arr1.concat(arr2, 0)); // [0, 1, 2, '영', '일', '이', 0]
// # 기존의 arr들은 모두 변하지 않는다.
console.log(arr1) // [0, 1, 2]
console.log(arr2) // ['영', '일', '이']
console.log(arr3) // ['zero', 'one', 'two']join / split
배열.join(구분자) : 배열의 값들을 하나의 문자열로 만든다. 배열 → 문자열
배열.slict(구분자) : 문자열을 배열로 만든다 문자열 → 배열
let arr = ['apple', 'banana', 'cherry']
console.log(arr.join()); // apple,banana,cherry
console.log(arr.join('')); // applebananacherry
console.log(arr.join('-')); // apple-banana-cherry
console.log(arr.join(' + ')); // apple + banana + cherry
console.log(arr.join('\n'));
// apple
// banana
// cherry
console.log(arr) // ['apple', 'banana', 'cherry']
// 기존의 arr는 변하지 않는다.let str = 'Lorem Ipsum is simply dummy text'
// # str를 배열로 변환
console.log(str.split()); // ['Lorem Ipsum is simply dummy text']
// # 공백 포함 모든 문자열을 배열로 변환
console.log(str.split('')); // ['L', 'o', 'r', 'e', 'm', ' ', 'I' ...]
// # 공백(' ') 기준으로 구분해서 변환
console.log(str.split(' ')); // ['Lorem', 'Ipsum', 'is', 'simply', 'dummy', 'text']3. 기타 메서드
indexOf
배열.indexOf(찾는 요소) : 지정한 요소의 인덱스를 반환한다. 찾는 요소가 없다면 -1 반환
let arr = [0, 1, 2, '영', '일', '이']
// # 지정 요소의 인덱스 반환
console.log(arr.indexOf(0)) // 0
console.log(arr.indexOf('영')) // 3
// # 찾고자 하는 값이 배열에 없을 때
console.log(arr.indexOf('하하')) // -1includes
배열.includes(찾는 요소) : 지정한 요소가 배열에 존재하는지 여부를 반환한다. (true / false)
let arr = ['cat', 'dog', 'rabbit']
console.log(arr.includes('cat')) // true
console.log(arr.includes('ca')) // false
console.log(arr.includes(0)) // false반복문 for...of
