요즘은 살짝 마음이 뜬 느낌이다. 다잡아야 하는데 조금씩 다시 뭐를 해볼까..? 라는 생각이 들고 있다.
Array.of
ES6 에서 도입된 Array.of 메서드는 전달된 인수를 요소로 갖는 배열을 생성한다. Array.of 는 Array 생성자 함수와 다르게 전달된 인수가 1개이고 숫자이더라도 인수를 요소로 갖는 배열을 생성한다.
Array.of(1); // [1]
Array.of(1, 2, 3); // [1, 2, 3];
Array.of('string'); // ['string']Array.from
ES6 에서 도입된 Array.from 메서드는 유사 배열 객체 또는 이터러블 객체 를 인수로 전달받아 배열로 변환하여 반환한다.
Array.from({length: 2, 0: 'a', 1: 'b'}); // ['a', 'b']
Array.from('hello'); // ['h','e','l','l','o']
Array.from({length: 3}); // [undefined, undefined, undefined]
Array.from({length: 3}, (_ ,i) => i); // [0,1,2]배열 요소의 참조
배열의 요소를 참조할 때에는 대괄호([]) 표기법을 사용한다. 대괄호 안에는 인덱스가 와야 한다.
const arr = [1, 2];
// 인덱스가 0인 요소를 참조
console.log(arr[0]); // 1
// 인덱스가 1인 요소를 참조
console.log(arr[1]); // 2
존재하지 않는 요소에 접근하면 undefined 가 반환된다.
console.log(arr[2]); // undefined배열 요소의 추가와 갱신
객체에 프로퍼티를 동적으로 추가할 수 있는 것처럼 배열에도 요소를 동적으로 추가하는 것이 가능하다.
const arr = [0];
// 배열 요소의 추가
arr[1] = 1;
console.log(arr); // [0, 1]
console.log(arr.length); // 2
만약 현재 배열의 length 프로퍼티 값 보다 큰 인덱스로 새로운 요소를 추가하면 희소 배열이 된다.
arr[100] = 100;
console.log(arr); // [0, 1, empty * 98, 100]
console.log(arr.length); // 101이때 인덱스로 요소에 접근하여 명시적으로 값을 할당하지 않은 요소는 생성되지 않는다는 것에 주의하자
const arr = [];
// 배열 요소의 추가
arr[0] = 1;
arr['1'] = 2;
// 프로퍼티 추가
arr['foo'] = 3;
arr.bar = 4;
arr[1.1] = 5;
console.log(arr); // [1,2 foo:3 , bar :4, '1.1': 5]
console.log(arr.length); // 2
// 프로퍼티는 영향을 주지 않는다(길이)배열 요소의 삭제
배열은 사실 객체이기 때문에 특정 요소를 삭제하기 위해 delete 연산자를 사용할 수 있다.
const arr = [1,2,3];
delete arr[1];
console.log(arr); // [1, empty, 3]
console.log(arr.length) // 3
// length 프로퍼티에 영향을 주지 않는다. 즉, 희소 배열이 된다.
const arr2 = [1,2,3];
arr2.splice(1, 1);
console.log(arr2); // [1, 3]
console.log(arr2.length); // 2배열 메소드
배열 메서드는 결과물을 반환하는 패턴이 두 가지이므로 주의가 필요하다.
배열에는 원본 배열(배열 메서드를 호출한 배열, 즉 배열 메서드의 구현제 내부에서 this 가 가리키는 객체)을 직접 변경하는 메서드 와 원본 배열을 직접 변경하지 않고 새로운 배열을 생성하여 반환하는 메서드가 있다.
const arr = [1];
arr.push(2);
console.log(arr); // [1, 2]
// concat 메서드는 원본 배열 (arr)을 직접 변경하지 않고 새로운 배열을 생성한다.
const result = arr.concat(3);
console.log(arr); // [1, 2]
console.log(result); // [1, 2, 3]Array.isArray
전달된 인수가 배열이면 true, 아니면 false를 반환한다.
// true
Array.isArray([]);
Array.isArray([1, 2]);
Array.isArray(new Array());
// false
Array.isArray();
Array.isArray({});
Array.isArray(null);
Array.isArray(undefined);
Array.isArray(1);
Array.isArray('Array');
Array.isArray(true);
Array.isArray(false);
Array.isArray({0: 1, length: 1});indexOf
indexOf 메서드는 배열에 특정 요소가 존재 하는지 확인할 때 유용하다.
const arr = [1,2,2,3];
arr.indexOf(2); // 1
// 있어서 1반환
arr.indexOf(4); // -1
// 없어서 -1
arr.indexOf(2, 2); // 2
// 두 번째 인수는 검색을 시작할 인덱스다,
indexOf 말고도 includes 도 사용할수 있다.
console.log(arr.includes(1)); // truepush 메소드
push 메서드는 인수로 전달받은 모든 값을 원본 배열의 마지막 요소로 추가하고 변경된 length 프로퍼티 값을 반환한다. push 메서드는 원본 배열을 직접 변경한다.
const arr = [1, 2];
// 인수로 전달받은 모든 값을 원본 배열 마지막에 추가하고 length 를 반환
let result = arr.push(3,4);
console.log(result); // 4
// push 메서드는 원본 배열을 직접 변경한다.
console.log(arr); // [1, 2, 3, 4]push 는 메서드 성능 면에서 좋지 않다. 마지막 요소로 추가할 요소가 하나뿐이면 push 메서드를 사용하지 않고 length 프로퍼티를 사용하여 배열의 마지막 요소를 직접 추가할 수도 있다.
const arr = [1,2];
arr[arr.length] = 3;
console.log(arr); // [1,2,3]push 메서드는 원본 배열을 직접 변경하는 부수 효과가 있다. 따라서 push 메서드 보다는 스프레드 문법을 사용하는 것이 좋다.
const arr = [1,2];
const newArr = [...arr, 3];
console.log(newArr); // [1,2,3]pop
pop은 마지막 요소를 제거한다.
const arr = [1,2];
// 원본 배열에서 마지막 요소를 제거하고 제거한 요소를 반환한다.
let result = arr.pop();
console.log(result); // 2
// pop 메서드는 원본 배열을 직접 변경한다.
console.log(arr); // [1]오늘은 여기까지 작성하겠다! 
