JavaScript는 웹 개발에서 가장 많이 사용되는 프로그래밍 언어 중 하나로, 다양한 배열 및 객체 처리 방법을 제공합니다. 특히 배열의 특정 요소를 필터링하거나 추출하는 작업은 매우 자주 사용됩니다. 이와 관련된 메서드로는 forEach()와 filter()가 있으며, 이를 활용하면 배열이나 객체에서 특정 조건에 맞는 값을 간단하게 추출할 수 있습니다. 이번 글에서는 자바스크립트 객체에서 키 이름이 's'로 끝나는 것만을 추출하는 방법을 forEach()와 filter() 메서드를 사용해 설명하겠습니다.
1. 객체와 배열의 관계
자바스크립트에서 객체는 키와 값으로 구성된 데이터를 저장하는 자료 구조입니다. 배열은 객체의 일종으로, 숫자 인덱스를 키로 가지는 특별한 형태의 객체라고 할 수 있습니다. 객체의 키는 문자열이거나 Symbol이며, 그 값은 어떠한 타입도 될 수 있습니다. 객체의 모든 키를 배열로 반환하기 위해서는 Object.keys() 메서드를 사용할 수 있습니다. 이 메서드는 객체의 모든 키를 배열 형태로 반환하므로, 배열 메서드인 forEach()나 filter()를 사용할 수 있게 됩니다.
const studyJSON = {
books: 5,
pens: 10,
tables: 3,
chairs: 7,
computer: 1,
};
위의 예시 객체는 studyJSON이라는 이름의 객체로, 책상, 의자, 컴퓨터 등의 물건과 해당 물건의 수를 나타냅니다. 이 객체에서 키 이름이 's'로 끝나는 키들만을 추출하고자 합니다.
2. forEach() 메서드를 이용한 키 추출
forEach()는 자바스크립트에서 배열의 각 요소에 대해 주어진 함수를 실행하는 메서드입니다. 반복문과 같은 역할을 하지만, 코드가 더 간결하고 직관적입니다. forEach() 메서드는 배열의 각 요소를 하나씩 순회하며, 특정 조건을 만족하는 경우에 해당하는 요소를 처리할 수 있습니다. 하지만 forEach() 메서드는 반환값이 없으며, 단순히 배열의 요소를 순회하면서 콜백 함수를 실행하는 용도로 사용됩니다.
forEach()를 이용한 's'로 끝나는 키 추출
다음 예시에서는 forEach()를 사용하여 키가 's'로 끝나는 모든 키를 배열에 저장하는 방법을 설명합니다.
const keys = Object.keys(studyJSON); // 객체의 모든 키를 배열로 추출
let tempList = []; // 결과를 저장할 빈 배열 생성
keys.forEach((key) => { // 각 키에 대해 반복
if (key.endsWith('s')) { // 키가 's'로 끝나는지 확인
tempList.push(key); // 조건을 만족하는 키를 tempList에 추가
}
});
console.log(tempList); // 출력: ['books', 'pens', 'tables', 'chairs']코드 설명
- Object.keys(studyJSON)는 객체의 모든 키를 배열 형태로 반환합니다. 예를 들어, ['books', 'pens', 'tables', 'chairs', 'computer']라는 배열을 반환합니다.
- forEach() 메서드를 사용하여 각 키에 대해 순회하면서, 키가 's'로 끝나는지 확인합니다. 이를 위해 문자열 메서드 endsWith()를 사용합니다. 이 메서드는 특정 문자열이 주어진 접미사로 끝나는지 확인하는 메서드입니다.
- 조건에 맞는 키는 tempList라는 배열에 push() 메서드를 통해 추가됩니다.
- 마지막으로, tempList를 콘솔에 출력하면 's'로 끝나는 키들만 포함된 배열이 출력됩니다.
forEach()를 사용한 방법은 명확하고 직관적이지만, 배열을 순회하고 별도의 배열에 조건을 만족하는 키들을 추가해야 하므로 약간의 코드가 더 필요합니다.
3. filter() 메서드를 이용한 키 추출
filter() 메서드는 배열을 순회하면서 조건을 만족하는 요소들만 추출하여 새로운 배열을 반환하는 메서드입니다. filter()는 forEach()와 달리 자동으로 새로운 배열을 반환하며, 특정 조건을 만족하는 요소들만 포함됩니다. 따라서 filter()는 간단하게 특정 조건에 맞는 요소들을 추출하는 데 매우 유용합니다.
filter()를 이용한 's'로 끝나는 키 추출
다음은 filter()를 사용하여 's'로 끝나는 키들만을 추출하는 방법입니다.
const keys = Object.keys(studyJSON); // 객체의 모든 키를 배열로 추출
let tempList = keys.filter((key) => key.endsWith('s')); // 조건에 맞는 키들만 필터링
console.log(tempList); // 출력: ['books', 'pens', 'tables', 'chairs']코드 설명
- Object.keys(studyJSON)는 이전 예시와 마찬가지로 객체의 모든 키를 배열로 반환합니다.
- filter() 메서드는 배열의 각 요소를 순회하면서 주어진 조건에 맞는 요소만을 필터링하여 새로운 배열을 반환합니다. 여기서는 키가 's'로 끝나는지 확인하는 조건을 설정했습니다.
- 새로운 배열 tempList에는 조건을 만족하는 키들만 포함됩니다.
- 마지막으로, tempList를 콘솔에 출력하면 's'로 끝나는 키들만 포함된 배열이 출력됩니다.
4. forEach()와 filter()의 비교
forEach()와 filter()는 모두 배열을 순회하면서 특정 작업을 수행하는 메서드이지만, 용도와 반환 방식에서 차이가 있습니다.
- forEach(): 배열의 각 요소에 대해 주어진 작업을 수행하지만, 반환값이 없습니다. 즉, 배열에서 조건을 만족하는 요소를 찾아 처리하는 것은 가능하지만, 이를 수동으로 배열에 추가해야 합니다. 따라서 forEach()를 사용할 때는 별도의 배열을 생성하고, 조건을 만족하는 요소를 해당 배열에 추가하는 방식으로 처리해야 합니다.
- filter(): 배열의 각 요소를 순회하면서 조건을 만족하는 요소들만 새로운 배열로 반환합니다. 조건을 만족하지 않는 요소들은 자동으로 필터링되며, 코드가 간결하고 직관적입니다. filter()는 반환값이 있기 때문에, 조건에 맞는 요소만으로 구성된 배열을 자동으로 생성할 수 있습니다.
5. 성능과 코드 간결성
forEach()와 filter()는 둘 다 성능 면에서 큰 차이는 없으나, 작성하는 코드의 간결성 면에서 차이가 있습니다. forEach()는 배열을 순회하면서 조건을 만족하는 요소를 수동으로 처리해야 하므로 약간 더 많은 코드가 필요하지만, 유연성이 높습니다. 반면, filter()는 조건에 맞는 요소를 자동으로 배열로 반환하므로 코드가 더 짧고 간결합니다.
따라서 간단한 필터링 작업에는 filter()를 사용하는 것이 더 적합하며, 복잡한 로직이 필요하거나 다양한 작업을 수행해야 할 경우에는 forEach()를 사용하는 것이 좋습니다.
결론
JavaScript에서 배열의 요소를 순회하며 특정 조건에 맞는 데이터를 추출하는 작업은 매우 자주 사용됩니다. 특히 객체의 키를 필터링하거나 조건에 맞는 값을 찾아내는 작업은 forEach()와 filter()를 사용하여 쉽게 구현할 수 있습니다. forEach()는 배열을 순회하면서 원하는 작업을 수행할 수 있도록 해주며, filter()는 조건에 맞는 요소를 간단하게 필터링하여 새로운 배열로 반환합니다. 두 메서드는 각각의 장단점이 있으므로, 상황에 맞게 선택하여 사용할 수 있습니다.