[JS] forEach(console.log)

const arr = [1, 2, 3];
arr.forEach(console.log);

 

1 2 3 이 한 줄씩 출력되겠지 ?

 

 

어라 ? 와이 ??

 

 

 

forEach()

• forEach() 함수는 반복문을 통해 배열의 요소를 접근하지 않고도 콜백 함수로 간편하게 배열 요소들을 처리할 수 있는 함수이다.
• 각 요소의 값뿐만 아니라 인덱스와 배열 자체도 콜백 함수에서 사용할 수 있다.
• forEach는 콜백 함수에 세 개의 인자를 전달한다.
  • value
  • index
  • array

 

따라서 위 코드의 실행 결과는 value, index, array가 한 줄씩 출력된 결과가 나오는 것이다. value만 출력하고 싶다면, 명시적으로 첫 번째 인자만 받도록 해야 한다.

 

 

 

 

 

 

const numbers = [273, 52, 103];
const test = numbers.map(parseInt);
console.log(test);

 

그렇다면 이 코드는 ?

 

 

아니 왜요 ;;

 

 

 

parseInt()

• parseInt() 함수는 문자열 인자를 파싱해 특정 진수의 정수를 반환한다.
• 첫 번째 요소로 value, 두 번째 요소로 radix를 전달한다.

따라서 위 코드는 내부적으로 아래와 같이 실행된다.

parseInt(273, 0)
parseInt(52, 1)
parseInt(103, 2)

 

(1) parseInt(273, 0)

• radix가 0이면 10진수로 해석된다.

 

(2) parseInt(52, 1)

• radix 1은 유효하지 않은 진수이므로 NaN을 반환한다.

 

(3) parseInt(103, 2)

• parseInt는 숫자 해석을 가능한 부분까지만 하고, 이후 잘못된 문자가 나오면 무시한다.
• 따라서 parseInt(103, 2)는 103을 2진수로 해석하려고 시도하지만, 103의 세 번째 숫자인 '3'이 2진수에서 유효하지 않기 때문에 103에서 유효한 부분인 10까지 해석해 2가 된다.

 

따라서 [273, NaN, 2]가 출력되는 것이다. 10진수로 받고 싶다면 parseInt를 직접 전달하는 대신, 명확한 콜백 함수를 제공해야 한다.

 

 

 

 

 

 

const values = ["10.5", "20.8", "30px"];
const result = values.map(parseFloat);
console.log(result);

 

이건 쉽지예

 

 

 

 

parseFloat()

• parseFloat() 함수는 radix 개념이 없으며, 무조건 10진수 부동소수점 값으로 변환한다.
• parseFloat()은 앞에서부터 숫자로 해석할 수 있는 부분을 읽고, 숫자가 아닌 문자가 나오면 해석을 멈춘다.
• 유효한 숫자로 시작하지 않으면 NaN을 반환한다.

 

 

 

 

참고

• array.forEach(console.log)의 출력
• 자바스크립트 forEach() 함수 - 개념 정리 및 사용 예제
• parseInt() - JavaScript