코린이[코딩 어린이]

concat() 메서드

concat() 메서드는 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새로운 배열을 반환합니다.

• 기존배열이 변경되지 않습니다.
• 추가된 새로운 배열을 반환합니다.

const array1 = ['안녕', '하세요', '저는'];
const array2 = ['junhyeok', '입니다.', '잘부탁드려요!'];
const array3 = array1.concat(array2);

console.log(array3); // ['안녕', '하세요', '저는', 'junhyeok', '입니다.', '잘부탁드려요!']

array.concat([value1[, value2], ...[, valueN]]);

매개변수

• 배열 또는 값
• 만약 value1 ~ valueN 인자를 생략하면 기존배열의 얕은 복사를 반환.

반환값

새로운 Array 객체.

여러가지 예제

배열 두 개 이어붙이기

const a = ['a', 'b', 'c'];
const b = [1, 2, 3];

console.log(a.concat(b)); // ['a', 'b', 'c', 1, 2, 3]

배열 세 개 이어붙이기

const a = [1, 2, 3];
const b = [4, 5, 6];
const c = [7, 8, 9];

console.log(a.concat(b, c)); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

배열에 값 이어붙이기

const a = ['a', 'b', 'c'];

console.log(a.concat(1, [2, 3])); // ['a', 'b', 'c', 1, 2, 3]

Array.prototype.concat() 바로가기

at() 메서드

at() 메서드는 정수 값을 받아, 배열에서 해당 값에 해당하는 인덱스 요소를 반환합니다.

양수, 음수 모두 지정할 수 있고, 음수의 경우 배열의 뒤에서부터 인덱스를 셉니다.

at() 메서드는 배열의 마지막 요소를 가져올 때, 사용하게 되면 array[array.length - 1]에서 array.at(-1)처럼 짧게 사용할 수 있습니다.

const array = [12, 34, 56, 78, 90];

let arrIndex = 2;

console.log(array.at(arrIndex)); // 56

index = -2;

console.log(array.at(arrIndex)); // 78

첫번째 console은 앞에서부터 3번째인 56을 불러옵니다. ( 배열은 0부터 시작하기 때문에 3번째인 56을 가져옵니다. )

두번째 console은 뒤에서부터 2번째인 78을 불러옵니다.

at(index)

매개변수 ( index )

배열에서 반환할 요소의 index입니다. 음수 값을 지정할 경우 배열의 마지막을 기준으로 index를 찾아옵니다.

반환 값

주어진 index에 위치한 배열 요소입니다. 주어진 index가 배열에 없으면 undefined를 반환합니다.

여러가지 방법 비교

Array의 뒤에서 두 분째 요소를 가져오는 방법들을 비교했습니다. 모든 방법들이 유효하지만 at() 메서드의 간결성과 가독성을 확인할 수 있습니다.

const colors = ['빨강', '초록', '파랑'];

// length 속성을 사용한 방법
const leng = colors[colors.length - 2];
console.log(leng); // 초록

// slice() 메서드를 사용한 방법
const sliceWay = colors.slice(-2, -1);
console.log(sliceWay[0]); // 초록

// at() 메서드를 사용한 방법
const atWay = colors.at(-2);
console.log(atWay); // 초록

Array.prototype.at() 바로가기