Javascript에서 배열 요소에 접근하는 방법

자바스크립트를 사용하면서 배열 값에 접근하는 방법은 여러 가지가 있습니다. 자바스크립트에서 배열 값에 접근하는 몇 가지 방법을 소개하고, 가독성을 좀 더 높여주는 at()에 대해서도 알아보겠습니다.

배열 요소에 접근하기

1. 인덱스를 사용하여 배열 요소에 직접 접근하기

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

 

2. for 루프를 사용하여 모든 배열 요소에 접근하기

let arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

 

3. forEach() 메소드를 사용하여 모든 배열 요소에 접근하기

let arr = [1, 2, 3, 4, 5];
arr.forEach(function(item) {
  console.log(item);
});

 

4. map() 메소드를 사용하여 배열 요소를 변환하고 새 배열을 생성하기

let arr = [1, 2, 3, 4, 5];
let newArr = arr.map(function(item) {
  return item * 2;
});
console.log(newArr); // [2, 4, 6, 8, 10]

 

5. filter() 메소드를 사용하여 조건에 따라 배열 요소를 필터링하기

let arr = [1, 2, 3, 4, 5];
let filteredArr = arr.filter(function(item) {
  return item % 2 === 0;
});
console.log(filteredArr); // [2, 4]

 

6. reduce() 메소드를 사용하여 배열 요소를 하나의 값으로 축소하기

let arr = [1, 2, 3, 4, 5];
let sum = arr.reduce(function(acc, item) {
  return acc + item;
}, 0);
console.log(sum); // 15

 

위와 같이 다양한 방법을 javascript의 배열 값에 접근할 수 있습니다.

여기에 한가지 더해 ES2019(ES10)부터 추가된 at() 메서드도 추가로 알아보겠습니다.

 

javascript at()

JavaScript에서 at()은 배열에서 특정 인덱스에 해당하는 요소를 반환하는 메소드입니다. at() 메서드는 ES2019(ECMAScript 10)부터 추가되었습니다.

at() 메소드는 index를 기반으로 배열 요소에 접근하며, 인덱스가 음수인 경우 배열의 끝에서부터 역순으로 접근합니다. index가 배열의 범위를 벗어나는 경우 undefined를 반환합니다.

다음은 at() 메서드의 예시입니다.

let arr = ['a', 'b', 'c', 'd', 'e'];

console.log(arr.at(0)); // 'a'
console.log(arr.at(-1)); // 'e'
console.log(arr.at(3)); // 'd'
console.log(arr.at(5)); // undefined
console.log(arr.at(-6)); // undefined

 

위 예시에서는 배열의 첫 번째 요소를 at(0)으로 접근하고, 마지막 요소를 at(-1)로 접근합니다. 또한 at(3)으로 배열의 네 번째 요소에 접근하고, at(5)와 at(-6)은 배열의 범위를 벗어나므로 undefined를 반환합니다.

at() 메소드는 일반적으로 배열의 특정 인덱스에 해당하는 요소를 간단하게 가져와야 할 때 사용됩니다. 개인적으로는, arr[0] 또는 arr[1] 형태로 접근하는 것보다 좀 더 간결하고 가독성 있게 느껴집니다.

배열 요소에 접근하는 다른 방법으로는 위에 소개한 방법들처럼 인덱스를 사용하여 배열 요소에 직접 접근하거나, for 루프나 forEach() 메소드를 사용하여 모든 배열 요소에 접근하는 방법 등이 있습니다.