일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- 스프링 빈
- java 백준 1차원 배열
- 고잉버스
- 스프링 컨테이너
- 코딩테스트
- 리눅스
- 자바스크립트 코딩의 기술
- JavaScript
- Linux
- 리눅스마스터 1급 정리
- 코테
- Memoir
- Java
- GoingBus
- 명령어
- 개발자 회고록
- Kotlin
- map
- toCharArray
- 문자열
- 리눅스마스터1급
- 자바
- 백준 javascript
- 연습문제
- 카카오
- 프로그래머스
- 백준 java
- 반복문
- 리눅스마스터 3과목
- 월간코드챌린지
- Today
- Total
hoon's bLog
Javascript 자바스크립트 코딩의 기술 2장 배열로 데이터 컬렉션을 관리하라 (1) 본문
2장 배열로 데이터 컬렉션을 관리하라
tip5. 배열로 유연한 컬렉션을 생성하라
이전 자바스크립트에서는 데이터 컬렉션을 다루는 구조로 배열과 객체 만 있었으나,
모던 자바스크립트에 Map, Set, WeakMap, WeakSet, 객체, 배열 을 사용할 수 있다.
컬렉션을 선택할 때는 정보로 어떤 작업을 할지 먼저 생각 해야한다.
이터러블(iterable)이란 컬렉션의 현재 위치를 알고 있는 상태에서 컬렉션의 항목을 한 번에 하나씩 처리하는 방법을 의미한다.
배열은 이터러블(iterable)이 내장되어 있어 다양한 메소드를 활용할 수 있다.
문자열처럼 자체적으로 이터러블이 존재하거나 이터러블로 변환할 수 있는 데이터 형식이면 배열에 사용하는 모든 작업을 동일하게 실행할 수 있다.
아래 코드는 team 배열을 스프레드 연산자(...)를 사용해 배열을 펼치고, sort() 메서드로 오름차순으로 정렬한 코드이다.
const team = ['Lee','Kim','Son'];
function alphabetizeTeam(team) {
return [...team].sort();
}
alphabetizeTeam(team); // ["Kim", "Lee", "Son"]
map(), filter(), reduce()등의 배열 메서드를 이용하면 코드 한줄로 정보를 변경하거나 갱신할 수 있다.
- map() : 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환
- filter() : 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환
- reduce() : 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환
const staff = [
{
name: 'duckhee',
position: 'developer'
},
{
name: 'rain',
position: 'musician'
}];
function getMusician(staff) {
return staff.filter(member => member.position === 'musician')
}
getMusician(staff); // [ {name: "rain", position: "musician"} ]
- 위 코드는 객체 값이 들어있는 staff 배열을 받아 getMusician 함수에서 position의 값이 'musician'인 객체를 return 하고 있다.
- 배열에 이터러블(iterable)이 내장되어 있다. 간단히 말해 컬렉션의 현재 위치를 알고 있는 상태에서 컬렉션의 항목을 한 번에 하나씩 처리하는 방법이다.
- 위와 같은 메서드를 통해 배열을 특별한 컬렉션으로 쉽게 변환하거나 다시 배열로 만들 수 있다.
tip6. includes()로 존재 여부를 확인하라
ES6 이전에는 indexOf()로 배열에 특정 데이터가 존재 여부로 존재하면 해당 위치에 index 값을, 존재하지 않으면 -1을 리턴한다.
그러나 아래 코드와 같이, 배열의 길이가 1인 경우, 리턴값이 0이 나오며,
자바스크립트에서 0은 falsy한 값이므로 거짓으로 체크될 수 있다.
하지만 ES2016에 추가된 includes()라는 배열 메소드를 이용하면 값이 배열에 존재하는지 boolean 값을 반환해준다.
const sections = ['shipping'];
function displayShipping(sections) {
if (sections.indexOf('shipping')) { // 0 를 반환하므로 false로 실행된다.
return true;
}
return false;
}
// false
// 보완코드
function displayShipping(sections) {
return sections.indexOf('shipping') > -1
}
// true
// includes() 를 사용한 코드
function displayShipping(sections) {
return sections.includes('shipping')
}
보완코드와 같이, 실무에서 보통 레거시 코드들은 indexOf의 리턴값을 비교하여, indexOf() < 0 인 경우 예외처리하여 사용한다.
하지만 이보다는 includes를 사용하는 것이 나중에 조건이 여러개가 되어도 훨씬더 가독성이 좋다!
(물론 사람에 따라서 indexOf를 더 많이 사용했다면 이게 눈에 더 잘 들어올지도...ㅎㅎ)
Reference
자바스크립트 코딩의 기술 요약 / 정리
'IT > Javascript' 카테고리의 다른 글
Javascript 자바스크립트 코딩의 기술 3장 특수한 컬렉션을 이용해 코드 명료성을 극대화하라 (1) (0) | 2024.01.04 |
---|---|
Javascript 자바스크립트 코딩의 기술 2장 배열로 데이터 컬렉션을 관리하라 (2) (0) | 2023.11.16 |
Javascript 자바스크립트 코딩의 기술 1장 변수 할당으로 의도를 표현하라 (2) (6) | 2023.11.14 |
Javascript 자바스크립트 코딩의 기술 1장 변수 할당으로 의도를 표현하라 (1) (0) | 2023.10.26 |
Javascript regular expression 정규식 표현 및 사용 (0) | 2023.07.03 |