_언더스코어 연구소,,

김현중·2024년 5월 9일

TIL

연구소

목록 보기

4/34

자바스크립트에서 _(언더스코어)는 특별한 기능이 있는 내장 심볼이나 키워드는 아니지만, 개발자들이 함수의 매개변수 중 사용하지 않거나 '무시할 값'에 대해 사용한다.

이런 사용법은 코드의 가독성을 높이고 의도를 명확히 전달하는 데 도움을 준다.

언더스코어의 사용 예시 :

1. Array.prototype.map

map() 메서드는 배열의 각 요소에 대해 주어진 함수를 실행하고, 결과를 새 배열로 반환한다. 이 메서드는 원본 배열을 변경하지 않고, 각 요소에 대해 동일한 인덱스의 새 요소를 생성한다.
map() 메서드의 콜백 함수는 최대 3개의 인자를 받을 수 있다.

1) 첫 번째 인자는 현재 처리하고 있는 요소의 값
2) 두 번째 인자는 그 요소의 인덱스
3) 세 번째 인자는 원본 배열 자체

const newArray = ['a', 'b', 'c'].map((_, index) => index * 2);
console.log(newArray); // 결과 [0, 2, 4]

여기서 _는 각 요소의 값을 대신하는 더미 변수로 사용된다.
요소의 값인 'a', 'b', 'c'는 사용하지 않고 오직 인덱스만을 사용해서 새 배열을 생성하였다.

2. Array.prototype.forEach

forEach() 메서드는 배열의 각 요소에 대해 주어진 함수를 한 번씩 실행한다.
이 메서드는 배열을 변형하지 않고, 주로 각 요소에 대해 특정 작업을 수행할 때 활용된다.
forEach() 메서드의 콜백 함수는 최대 3개의 인자를 받을 수 있다.

1) 첫 번째 인자는 현재 처리하고 있는 요소의 값
2) 두 번째 인자는 그 요소의 인덱스
3) 세 번째 인자는 원본 배열 자체

['a', 'b', 'c'].forEach((_, index) => {
  	console.log(`Index: ${index}`);
});

// 결과
Index: 0
Index: 1
Index: 2

여기서 _는 배열의 각 요소('a', 'b', 'c')를 나타내지만 실제로 코드 내에서는 사용되지 않는다.
_는 무시될 값으로 표기되어 있어, 이 매개변수가 필요하지 않음을 명시적으로 나타낸다.
여기서도 forEach()는 배열의 모든 요소를 방문하지만, 실제 작업은 인덱스에만 관련하였다.

3. Array.prototype.reduce

reduece() 메서드는 배열의 각 요소에 대해 주어진 '리듀서' 함수를 실행하고, 하나의 결과값을 반환한다. 이 메서드는 배열을 값 하나로 축소하는데 사용된다.
reduce() 메서드의 콜백 함수는 최대 4개의 인자를 받을 수 있다.

1) 첫 번째 인자는 누적값이며, 이는 이전 콜백의 반환값이고 최초 호출 시에 초기값으로 설정되는 값
2) 두 번째 인자는 현재 처리하고 있는 요소의 값
3) 세 번째 인자는 그 요소의 인덱스
4) 네 번째 인자는 원본 배열 자체

const sumOfIndices = ['a', 'b', 'c'].reduce((acc, _, index) => acc + index, 0);

// 결과
3 (0 + 1 + 2)

여기서 초기값으로 0을 제공하고, _는 각 요소의 값을 대신하는 더미 변수로 사용되어 무시되었다.
리듀서 함수는 각 호출마다 인덱스 값을 누적 값에 더하며, 최종적으로 인덱스의 총합인 3을 출력하였다.

4. Array.prototype.filter

filter() 메서드는 배열의 각 요소에 대해 특정 조건을 만족하는 요소만을 새로운 배열로 반환한다.
filter() 메서드의 콜백 함수는 최대 3개의 인자를 받을 수 있다.

1) 첫 번째 인자는 현재 요소의 값
2) 두 번째 인자는 그 요소의 인덱스
3) 세 번째 인자는 원본 배열 자체

const activeIndices = [true, false, true, false].filter((_, index) => index % 2 === 0);
console.log(activeIndices);

// 결과 : [true, true]

여기서 _는 각 요소의 값을 나타내지만, 실제 필터 조건은 요소의 인덱스에 기반한다.
짝수 인덱스의 요소만을 새 배열로 반환하므로, 0과 2의 값인 true만을 필터링하여 새로운 배열로 만들었다.

5. 객체 구조 분해

객체의 속성 중 일부만 필요할 때, 구조 분해 할당을 사용하여 필요한 속성들을 변수에 할당하고 나머지는 무시할 수 있다.

const { first: _, second: secondItem, ...others } = { first: 10, second: 20, third: 30 };
console.log(secondItem); // 결과 : 20
console.log(others); // 결과: { third: 30 }

여기서 first 속성은 _를 사용하여 무시하고, second 속성은 secondItem에 할당한다. 나머지 속성들은 스프레드 연산자(...)를 사용해 others 객체에 저장한다.

6. Promise 처리

Promise에서 결과가 중요하지 않고, 단지 비동기 작업이 완료된 시점만을 감지하고 싶을 때 _를 사용한다.

Promise.resolve('Success').then(_ => {
  console.log('실행 성공');
});

이 경우, Promise가 성공적으로 해결되면, 결과 값은 무시되고 성공했다는 로그만 출력된다.
_를 통해 무시할 의도를 보여준다.

7. 콜백 함수에서 무시

Node.js의 'fs.readFile' 같은 API에서 오류 처리를 명시적으로 하지 않을 때 사용한다.

fs.readFile('path/to/file', (_, data) => {
  console.log(data);
});

여기서 첫 번째 매개변수는 오류를 나타내지만 _로 무시하고, 두 번째 매개변수 data만을 사용해 파일의 내용을 출력한다.
오류가 발생하지 않았다고 가정하고 처리하는 경우에 이런 방식을 사용한다.

8. 매개변수 초과 처리

함수에 여러 매개변수가 전달될 때, 필요한 것들만 사용하고 나머지는 무시하려면 ..._를 사용한다.

const logFirstTwoArgs = (first, second, ..._) => {
  console.log(`퍼스트 : ${first}, 세컨드 : ${second}`);
};

logFirstTwoArgs(1, 2, 3, 4, 5);	
// 결과 :
// 퍼스트 : 1, 세컨드 2