2021-12-06 TIL

🦁 Day27

📢 이 글은 모던 자바스크립트 딥다이브 책을 정리한 글입니다.

📖 오늘 공부한 것

배열

자바스크립트에서의 배열은 희소 배열! 동일한 데이터타입의 연속된 메모리공간을 차지하는 배열이 아니다.

배열과 객체의 차이

• 객체와 달리 배열에는 값의 순서, length 프로퍼티가 있다. 반복문 통해 순차적으로 값에 접근하기 적합한 자료 구조

Array 생성자 함수

전달된 인수가 1개이고 숫자인 경우, length 프로퍼티 값이 인수인 배열 생성

const arr = new Array(10);

console.log(arr); // [empty * 10 ]
console.log(arr.length); // 10
//  length 프로퍼티 값은 0이 아닌 10이지만 실제 배열의 요소는 존재하지 않는다.

전달된 인수가 없는 경우 빈 배열 생성

new Array(); // []

전달된 인수가 2개 이상이거나 숫자가 아닌 경우 인수를 요소로 갖는 배열을 생성

new Array(1, 2, 3); // [1, 2, 3]

//전달된 인수가 1개지만 숫자가 아니면 인수를 요소로 갖는 배열 생성
new Array({}); // [{}]

Array.of

전달된 인수가 1개이고 인수를 요소로 갖는 배열 생성

Array.of(1) // [1]

Array.of(1,2,3) // [1,2,3]
Array.of('string') // ['string']

Array.from

//유사 배열 객체 변환하여 배열 생성
Array.from({ length: 3, 0: a, 1: b, 2: c }) // [a, b, c]

// length 프로퍼티만 있는 유사배열 객체를 인수로 주면 undefined 요소로 배열을 채운다
Array.from({length: 3}); // [undefined, undefined, undefined]

// 이터러블 변환하여 배열 생성
Array.from('hello') // ['h', 'e', 'l', 'l', 'o']

// 두번째 인수로 콜백 함수 전달 시 콜백함수의 반환값으로 새 배열 생성하여 반환
Array.from({ length: 3}, (_, i) => i) // 

배열 요소의 추가와 갱신

배열 인덱스에는 0이상의 정수 또는 정수 형태의 문자열 사용해야 된다. 그 이외의 값을 넣으면 요소가 아니고 프로퍼티가 생성된다

const arr = [];

// 배열 요소의 추가
arr[0] = 1;
arr['1'] = 2; // 인덱스에 문자열 정수를 넣어도 숫자 정수로 자동 형변환한다

// 프로퍼티 추가
arr['foo'] = 3; // arr.foo = 3
arr.bar = 4;
arr[1.1] = 5;
arr[-1] = 6;

console.log(arr) // [1, 2, foo: 3, bar: 4, '1.1': 5, '-1': 6]

// 프로퍼티는 length에 영향을 주지 않는다(!)
console.log(arr.length); // 2

배열 요소의 삭제

배열의 특정 요소를 삭제 하기 위해 delete 연산자를 사용할 수 있다.

const arr = [1,2,3];

//배열 요소의 삭제
delete arr[1];
console.log(arr); // [1, empty, 3]

//length에 영향을 주지 않는다. 희소 배열이 된다.
console.log(arr.length); // 3

희소 배열을 만들지 않으면서 특정 요소 완전 삭제를 위해서는 splice() 메소드를 사용하면 된다.

배열 메소드

배열 메소드의 결과물을 반환하는 패턴은 두 가지이다.

1. 원본 배열을 직접 변경하는 메소드 ex) push()
2. 원본 배열 변경않고 새로운 배열 생성하여 반환하는 메소드 ex) concat()

원본 배열 직접 변경하는 메소드의 경우 외부 상태를 직접 변경하는 부수 효과가 있으므로 사용에 주의! 가급적 원본 배열 변경하지 않는 메소드 사용이 권장된다.

Array.isArray

메소드에 전달된 인수가 배열이면 true, 아니면 false 반환

Array.prototype.indexOf

원본 배열에서 인수로 전달된 요소를 검색하여 인덱스 반환

const arr = [1, 2, 2, 3]

// 배열 arr에서 요소 2를 검색. 중복된 요소 있으면 첫번째로 검색된 요소의 인덱스 반환
arr.indexOf(2); // 1

// 배열에 인수로 전달된 요소가 없으면 -1 반환
arr.indexOf(5); // -1

// 두번째 인수는 검색을 시작할 인덱스. 생략하면 처음부턱 검색.
arr.indexOf(2, 2) // 요소 2를 검색하는데 arr[2] 부터 검색한다
		  // 2

// indexOf() 메소드를 사용하여 배열에 특정 요소가 존재하는지 확인하기
const color = ['red', 'yellow', 'green'];

if(color.indexOf('yellow') === -1 ){ // 배열에 'yellow'가 없으면 
	color.push('yellow') // 'yellow' 요소 추가
}

console.log(color); // ['red', 'yellow', 'green'];

1. 원본 배열을 직접 변경하는 메소드

Array.prototype.push

인수로 전달받은 값을 원본 배열의 가장 마지막에 추가

const arr = [1, 2];

// 인수로 전달받은 값을 배열의 가장 마지막 요소로 추가하고  length 프로퍼티 값을 반환한다.
let result = arr.push(3,4);
console.log(result); // 4

// 원본 배열을 직접 변경한다.
console.log(arr) // [1, 2, 3, 4]

Array.prototype.pop

원본 배열의 마지막 요소를 제거

const arr = [1, 2];

// 원본 배열에서 마지막 요소 제거하고 제거한 요소 반환
let result = arr.pop(); // 2

// pop 메소드는 원본 배열 직접 변경한다
console.log(arr); // [1]

Array.prototype.unshift

인수로 전달받은 모든 값을 원본 배열의 가장 맨 앞에 추가

const arr = [1, 2];

console.log(arr.length); // 2

// 인수로 전달받은 모든 값을 원본 배열의 가장 맨 앞 요소로 추가
let result = arr.unshift(3,4);

// 변경된 length 값을 반환
console.log(result) // 4

// 원본 배열 직접 변경됨
console.log(arr) // [3,4,1,2]

Array.prototype.shift

배열의 맨 첫번째 요소를 제거.

const arr = [1, 2];

let result = arr.shift();
console.log(result); // 1
										// 빈 배열이면 undefined를 반환한다

// 원본 배열 직접 변경됨
console.log(arr); // [2]

2. 원본 배열 변경않고 새로운 배열 생성하여 반환하는 메소드

Array.prototype.concat

인수로 전달받은 배열을 해체하여 새로운 배열의 마지막 요소로 추가

concat() 메소드는 새 배열을 반환하기 때문에 반드시 변수에 담아 사용해야 한다.

---

💭 오늘 느낀점

아... 공부할 것이 너무 많다..
이력서도 써야하고 리액트도 공부해야 하고..
머릿속이 복잡하다 좀 지친다..

일단 내일 할일을 우선순위로 정리하고 하나씩 차근차근 해나가야겠다