[JS] 배열 메소드 1탄

bomhada·2022년 2월 23일
0

JS

목록 보기
1/3
post-thumbnail

배열 생성하기

🤓 Array 생성자

  1. 수 타입의 인수가 하나 주어질 때는 해당 수 만큼의 길이를 갖는 비어있는 배열을 만들어낸다.
  2. 이 외에 다른 모양으로 인수가 주어지면 그 인수들을 요소로 갖는 배열을 생성한다.
new Array(1); // [empty]
new Array(1000) // [empty x 1000]
new Array(1, 2, 3); // [1, 2, 3]

🤓 Array.of()

이 메소드는 위의 두번째 방식으로만 동작한다.
Array 생성자를 사용할 때에는 1번 방식으로만 사용하고, 2번 방식의 코드를 작성할 때는 생성자 대신 Array.of 정적 메소드를 사용하세요.

new Array(1, 2, 3); // 1번 X
Array.of(1, 2, 3); // 2번 O
Array.of(1); // [1]

🤓 Array.isArray()

이 메소드는 인자에 들어가는 객체가 배열인지 확인할 때 사용합니다.

new Array(1, 2, 3);
Array.isArray({a: 1, b: 2, c: 3}); // false
Array.isArray([1, 2, 3]); // true

🤓 Array.from()

JS에는 유사 배열 객체(array-like object)와 iterable이라는 개념이 있어서, 이에 해당하는 값들은 Array.from 정적 메소드를 통해 배열로 쉽게 변환될 수 있다.
string 타입은 래퍼 객체를 통해 iterable로 다루어질 수 있습니다.

Array.from('hello'); // ['h', 'e', 'l', 'l', 'o']

🤓 fill()

한꺼번에 많은 요소를 같은 값으로 바꿀 수 있다.

const arr = [1, 2, 3, 4, 5];

// 전체를 0으로 채우기
arr.fill(0);
console.log(arr); // [ 0, 0, 0, 0, 0 ];

// 인덱스 2와 4 사이를 1로 채우기
arr.fill(1, 2, 4); // 변경할 값, 시작할 인덱스, 끝 인덱스
console.log(arr); // [ 0, 0, 1, 1, 0 ];

Array 생성자와 fill의 활용

new Array(3); // [empty x 3]
new Array(1000).fill('🥰'); ['🥰', '🥰', '🥰']

배열 수정하기

🤓 push()

배열의 끝 부분에 요소를 추가하고, 추가 된 후의 길이 리턴

const arr = [];
arr.push('one'); // ['one']
arr.push('two', 'tree'); // ['one', 'two', 'tree']
console.log(arr.push('two', 'tree')); // 3

🤓 pop()

배열의 끝 부분에 요소를 제거하고, 제거 된 요소를 리턴

const arr = ['one', 'two', 'tree'];
arr.pop(); // ['one', 'two']
console.log(arr.pop()); // tree

🤓 unshift()

배열의 앞 부분에 요소를 추가하고, 추가 된 후의 길이를 리턴

const arr = [];
arr.unshift(1); // [1]
arr.unshift(2, 3); // [2, 3, 1]
console.log(arr.unshift(2, 3)); // 3

🤓 shift()

배열의 앞 부분에 요소를 제거하고, 제거 된 요소를 리턴

const arr = ['one', 'two', 'tree', 'four', 'five'];
arr.shift(); // ['two', 'tree', 'four', 'five']
arr.shift(); // ['tree', 'four', 'five']
console.log(arr.shift()); // two

배열 중간에 삽입하기

🤓 splice()

배열에 속해있는 연속 된 여러요소 즉, 배열의 일부분을 통째로 바꿀 수도 있다.

const arr = [1, 2, 3, 4, 5];

// 인덱스 1인 요소부터 3개를 바꿔치기
// (시작할 인덱스 번호, 삭제할 인덱스 갯수, 삭제한 자리에 넣을 요소(삭제한 인덱스 갯수와 상관없음))
arr.splice(1, 3, 'two', 'three', 'four');
// [1, 'two', 'tree', 'four', 5]

삭제 후 추가할 인수를 생략하면 요소를 제거할 뿐 배열에 아무것도 삽입되지 않는다.

arr.splice(1, 1); // [1, 2, 3, 4, 5]

두번째 인수로 0을 입력하면 삭제없이 그 위치에 요소를 삽입할 수 있다.

const arr = [1, 2, 3];
arr.splice(1, 0, '🍨', '🎨');
// [1, '🍨', '🎨', 2, 3]

🤓 reverse()

메소드를 호출 하면 해당 배열을 거꾸로 뒤집는다.

const arr = [1, 2, 3, 4, 5];
arr.reverse(); // [5, 4, 3, 2, 1]

배열의 길이

🤓 length

배열에 속해있는 연속 된 여러요소 즉, 배열의 일부분을 통째로 바꿀 수도 있다.

const arr = [1, 2, 3, 4, 5];
console.log(arr.length); // 5

0개의 댓글