배열이란
- 배열은 1개의 변수에 여러개 값을 순차적으로 저장할 때 사용
- 자바스크립트의 배열은 객체이며 유용한 내장 메서드를 포함
- Array 생성자로 생성된 Array타입의 객체
배열의 생성
배열 리터럴
[ ];- 0개 이상의 값을 쉼표로 구분, 첫번째 값은 index ' 0 '
- 존재하지 않는 요소에 접근 시 undefined 반환
- 배열 리터럴로 생성한 배열요소 접근하기
: 대괄호 표기법만을 사용하여 접근하고자 하는 요소의 인덱스를 넣어준다. - 어떤 데이터 타입의 조합이라도 요소에 포함 가능
//변수에 배열 리터럴 할당
const arr = ['zero', 'one', 'two', 'three'];
//변수에 객체 리터럴 형식의 배열
const obj = {'0': 'zero', '1': 'one', '2': 'two','3': 'three'}
Array()생성자 함수
- 배열 리터럴 방식도 결국 내장 함수 Array() 생성자 함수로 배열을 생성하는 것을 단순화시킨 것
- 매개변수 1개 일 때 : length 값으로 가지는 빈 배열 생성
- 그 외의 경우 : 매개변수로 전달된 값들을 요소로 가지는 배열 생성
//매개변수 1개일 때
const arr = new Array(2);
console.log(arr); // (2) [empty × 2]
//그 외
const arr = new Array(1, 2, 3);
console.log(arr); // [1, 2, 3]배열 요소의 추가와 삭제💩
배열요소의 추가
- 인덱스를 사용하여 필요한 위치에 값을 할당한다.
- 값이 할당되지 않은 인덱스 위치의 요소는 생성되지 않으며
존재하지 않는 요소를 참조하면 undefined 반환
배열요소의 삭제
delete연산자 사용- 단, 요소를 삭제해도 배열의 length에는 변함이 없다
그래서 삭제할 시 delete 사용은 자제하는 것이 좋음 - splice() 메소드를 사용하면 length에도 반영됨
//배열 리터럴
const fruits = ['🍌', '🍎', '🍇', '🍑'];
// 배열 아이템을 참조하는 방법
console.log(fruits[0]); //🍌
console.log(fruits[1]); //🍎
console.log(fruits[2]); // 🍇
console.log(fruits[3]); //🍑
//배열객체의프로퍼티
console.log(fruits.length); //4
// 좋지 않은 방식 💩
//추가 - 인덱스를 이용해서 추가하는 것은 좋지 않은 방식
fruits[6] = '🍓';
console.log(fruits); //[ '🍌', '🍎', '🍇', '🍑', <2 empty items>, '🍓' ]
//삭제 - 삭제를 해도 텅빈 배열이 남겨져서 안좋음💩
delete fruits[1];
console.log(fruits); //[ '🍌', <1 empty item>, '🍇', '🍑', <2 empty items>, '🍓' ]배열의 순회
forEach(),for문,for..of문- for..in문 : 불필요한 프로퍼티까지 출력되며 요소들의 순서를 보장하지 않아 적합하지 않음
Array 프로퍼티
Array.length
- length 프로퍼티는 요소의 개수(배열의 길이)
- length값은 가장큰 인덱스에 1을 더한것과 같음
- 배열 요소의 개수와 length 프로퍼티의 값이 반드시 일치하지는 않는다
- 희소배열 : 배열요소의 개수와 length값이 일치하지 않는 배열
일반 배열보다 느리며 메모리를 낭비한다
Array 메서드
- 🔗
static(= 클래스레벨) - ✏️
this(원본배열 =인스턴스레벨)변경 - 🔒
this(원본배열 =인스턴스레벨)변경하지 않음
🔗 isArray( )
static정적 메서드는 인수가 배열이면 true, 배열이 아니라면 false
// true
Array.isArray([]);
Array.isArray([1, 2]);
Array.isArray(new Array());
// false
Array.isArray();
Array.isArray({});🔗 Array.from()
- 유사 배열 객체 (array-like-object) 또는
- 이터러블 객체 (iterable object)를 변환하여 새로운 배열 생성
// 문자열은 이터러블이다.
const arr1 = Array.from('Hello');
console.log(arr1); // [ 'H', 'e', 'l', 'l', 'o' ]
// 유사 배열 객체를 새로운 배열을 변환하여 반환한다.
const arr2 = Array.from({ length: 2, 0: 'a', 1: 'b' });
console.log(arr2); // [ 'a', 'b' ]
// Array.from의 두번째 매개변수에게 배열의 모든 요소에 대해 호출할 함수를 전달할 수 있다.
const arr3 = Array.from({ length: 5 }, function (v, i) { return i; });
console.log(arr3); // [ 0, 1, 2, 3, 4 ]🔒indexOf( )
- 원본 배열에서 인수로 전달된 요소를 검색하여 인덱스 반환
- 배열에 요소가 존재하는지 여부를 확인할 때 유용
- 중복 요소 있는경우, 첫번째 인덱스 반환
- 해당요소 없는 경우 -1 반환
- 두번째 인수는 검색을 시작할 인덱스, 생략한다면 처음부터 검색 시작
const arr = [1, 2, 2, 3];
arr.indexOf(2); // -> 1
arr.indexOf(2, 2); // 2
arr.indexOf(4); // -1
const foods = ['apple', 'banana'];
// foods 배열에 'orange' 요소가 존재하는지 확인
if (foods.indexOf('orange') === -1) {
// foods 배열에 'orange' 요소가 존재하지 않으면 'orange' 요소를 추가
foods.push('orange');
}
console.log(foods); //[ 'apple', 'banana', 'orange' ]🔒 includes( )
- 배열에 특정 요소가 있는지 확인하고 있으면 true, 없으면 false
- indexOf보다 가독성이 좋음
const arr = ['hello','hi']
if(!arr.includes('bye')){
arr.push('bye');
}
console.log(arr); //['hello','hi','bye']🔒 concat( )
- 인수로 전달된 값들을 원본 배열의 마지막 요소로 추가한 새로운 배열을 반환
- 인수로 전달한 값이 배열인 경우, 배열을 해체하여 새로운 배열의 요소로 추가
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = arr1.concat(arr2);
const result = arr2.concat(3);
console.log(arr1); //[ 1, 2, 3 ]
console.log(arr2); //[ 4, 5, 6 ]
console.log(arr3); //[ 1, 2, 3, 4, 5, 6 ]
console.log(result); //[4,5,6,3]✏️ push( )
- 인수로 전달받은 모든 값은 원본 배열의 마지막 요소로 추가 후 변경된 length 값 반환
- 원본 배열 자체를 직접수정함
const arr=[1,2];
let result = arr.push(0,5);
console.log(result); // 4
console.log(arr); //[1,2,0,5]- push()와 concat()의 차이는 원본배열을 직접변경하냐 변경하지 않고 새로운 배열을 반환하냐의 차이
const arr1 = [1, 2];
// 인수로 전달받은 배열을 그대로 원본 배열의 마지막 요소로 추가한다
arr1.push([3, 4]);
console.log(arr1); // [1, 2, [3, 4]]
const arr2 = [1, 2];
// 인수로 전달받은 배열을 해체하여 새로운 배열의 마지막 요소로 추가한다
const result = arr2.concat([3, 4]);
console.log(result); // [1, 2, 3, 4]✏️ pop( )
- 원본배열에서 마지막 요소 제거하고 제거한 요소 반환
- push()와 사용하면 스택을 쉽게 구현 가능
- 스택이란? 후입 선출 (Last in First Out)방식의 자료 구조
스택은 언제나 가장 마지막에 밀어 넣은 최신 데이터를 취득
푸시(push)=추가 : 스택에 데이터 밀어넣기
팝(pop)=삭제 : 스택에서 데이터 꺼내기
- 스택이란? 후입 선출 (Last in First Out)방식의 자료 구조
// 스택 자료 구조를 구현하기 위한 배열
const stack = [];
// 스택의 가장 마지막에 데이터를 밀어 넣는다.
stack.push(1);
console.log(stack); // [1]
// 스택의 가장 마지막에 데이터를 밀어 넣는다.
stack.push(2);
console.log(stack); // [1, 2]
// 스택의 가장 마지막 데이터, 즉 가장 나중에 밀어 넣은 최신 데이터를 꺼낸다.
let value = stack.pop();
//제거한 요소 반환, 제거되어진 스택 배열
console.log(value, stack); // 2 [1]
// 스택의 가장 마지막 데이터, 즉 가장 나중에 밀어 넣은 최신 데이터를 꺼낸다.
value = stack.pop();
console.log(value, stack); // 1 []✏️ reverse( )
- 배열의 순서를 반대로 변경, 변경된 배열 반환
- 원본 배열 변경
const a = ['a','b','c'];
const b =a.reverse();
console.log(a); // [ 'c', 'b', 'a' ]
console.log(b); // [ 'c', 'b', 'a' ]✏️ shift( )
- 배열에서 첫요소 제거, 제거된 요소 반환
- 만약 빈 배열일 경우 undefined 반환
- 원본 배열 변경
- push와 함께 배열을 큐(선입 선출 First In First Out)처럼 동작하게 한다.
- 자료구조 스택과 큐
const a =['a','b','c'];
const b = a.shift();
console.log(a); //['b','c']
console.log(b); //'a'✏️ unshift( )
- 배열에서 첫요소 앞에 요소 추가
- 반환값은 변경된 원본 배열의 길이
const a =['a','b','c'];
const b = a.unshift(3);
console.log(a); //[3,'a','b','c']
console.log(b); //4
✏️ splice( )
- 일반적인 사용은 배열의 요소 삭제
- 기존 배열의 요소를 제거하고 그 위치에 새로운 요소 추가
- 배열 중간에 새로운 요소 추가할 때도 사용
- 반환값은 삭제한 요소들을 가진 배열
arr.slice( start [, deleteCount, items])start: 배열의 start 위치부터 모든 요소를 제거deleteCount: 시작위치부터 제거할 요소의 수, 0인경우 아무런 요소 제거되지 않음items: 삭제한 위치에 추가될 요소, 아무런 요소 지정하지 않을 경우 삭제만 됨
const items1 = [1, 2, 3, 4];
//제거 ( start, deleteCount )
const res1 = items1.splice(1, 2);
console.log(items1); // [ 1, 4 ]
console.log(res1); // [ 2, 3 ]
//제거 및 추가 (start, deleteCount, items )
const items = [1, 2, 3, 4];
const res = items.splice(1, 2, 20, 30);
console.log(items); // [ 1, 20, 30, 4 ]
console.log(res); // [ 2, 3 ]
//추가 ( start , delteCount=0, items)
const items = [1, 2, 3, 4];
const res = items.splice(1, 0, 100);
console.log(items); // [ 1, 100, 2, 3, 4 ]
// 제거한 요소가 배열로 반환된다.
console.log(res); // [ ]
🔒 slice( )
- 인자로 지정된 배열의 요소를 복사하여 반환
- 시작인덱스 포함 종료인덱스 직전까지 반환
arr.slice(start [, end])
-start: 복사를 시작할 인덱스 , 음수인 경우 배열의 끝에서의 인덱스end: 옵션이며 기본값은 length값
const items = ['a', 'b', 'c'];
let res = items.slice(0, 1);
console.log(res); // [ 'a' ]
res = items.slice(1, 2);
console.log(res); // [ 'b' ]
res = items.slice(1);
console.log(res); // [ 'b', 'c' ]
res = items.slice(-1);
console.log(res); // [ 'c' ]
res = items.slice(-2);
console.log(res); // [ 'b', 'c' ]
// 모든 요소를 반환 (= 복사본(shallow copy) 생성)
res = items.slice();
console.log(res); // [ 'a', 'b', 'c' ]
// ✨✨✨✨원본은 변경되지 않는다.
console.log(items); // [ 'a', 'b', 'c' ]
console.log( res === items ) //false배열을 아무리 복사해서 수정해도 그 안의 오브젝트 프로퍼티 값은 변하지 않는다 = 원본은 변하지 않는다.
왜냐?
💡얕은복사가 일어났기 때문~ 그게 뭐임
: 오브젝트 자체가 저장된것이 아닌 오브젝트가 지정된 메모리 주소를 복사한 것이다.
=> 즉, 복사된 배열들은 서로 다른 배열의 메모리지만
그 안의 오브젝트 프로퍼티 값은 같은 메모리 주소인 것.
🔒 string()
- 원본배열의 모든 요소를 문자열로 변환 후
- 인수로 전달받은 값, 즉 구분자로 연결한 문자열 반환
- 구분자 생략가능, 기본 구분자
,
const arr = [1, 2, 3, 4];
let result = arr.join();
console.log(result); // '1,2,3,4';
// ✨원본 배열 arr의 모든 요소를 문자열로 변환한 후, 빈문자열로 연결한 문자열을 반환
result = arr.join('');
console.log(result); // '1234'🔒 flat( )
- 중첩된 배열을 하나의 배열로 평탄화한 뒤 반환
- 숫자로 받은 인수는 몇개의 배열을 평탄화 할 것인지의 값
// 중첩 배열을 하나의 배열로 쫙 펴기
let arr = [[1, 2, 3],[4, [5, 6, [3, 4]]],];
console.log(arr); //[ [ 1, 2, 3 ], [ 4, [ 5, 6, [Array] ] ] ]
console.log(arr.flat(3));
// [
// 1, 2, 3, 4,
// 5, 6, 3, 4
// ]
result = arr.flat(1);
console.log(result); //[ 1, 2, 3, 4, [ 5, 6, [ 3, 4 ] ] ]✏️ fill( )
- 원하는 요소로 수정할 수 있다
- 시작인덱스포함 종료인덱스 직전까지
arr.fill(items, start, end)
arr=[1,2,3,4,5,6];
arr.fill(0); // 특정한 값으로 수정
console.log(arr);
// [
// 0, 0, 0, 0,
// 0, 0, 0, 0
// ]
arr.fill('s', 1, 3);//원하는 인덱스 구간 수정
console.log(arr);
// [
// 0, 's', 's', 0,
// 0, 0, 0, 0
// ]
arr.fill('a', 1);//시작인덱스부터 끝까지 수정
console.log(arr);
// [
// 0, a, a, a,
// a, a, a, a
// ]🔒 join( )
- 배열 안의 모든 요소를 문자열로 반환
- 인수로 받은 문자열은 요소 사이를 구분짓는 구분자로 사용
- 인수 전달받지 않으면 기본값
,을 구분자로 사용
const arr =[1,2,3,'0'];
let text = arr.join();
console.log(text); //1,2,3,0
text = arr.join(' | ');
console.log(text); //1 | 2 | 3 | 0
console.log(typeof text); //string
console.log(typeof text[0]); //string
냠소현 개발일지