[JS] forEach(console.log)

들어가며

자바스크립트를 공부하던 중, 예제 1번의 실행결과가 이해되지 않아 forEach()에 대해 찾아보았고, parseInt()와 parseFloat()이 내부적으로 어떻게 실행되는지도 알게 되었다.

 

 

 

forEach()

---

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

 

예제 1

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

forEach는 콜백 함수에 세 개의 인자를 전달한다.

1. 배열 요소 (value)

2. 현재 인덱스 (index)
3. 배열 자체 (array)

 

따라서 위 코드의 실행 결과는 1 2 3이 한 줄씩 출력되는 것이 아니라, 아래와 같은 출력이 나타난다.

// 실행결과
1 0 [ 1, 2, 3 ]
2 1 [ 1, 2, 3 ]
3 2 [ 1, 2, 3 ]

 

value만 출력하고 싶다면, 명시적으로 첫 번째 인자만 받도록 해야 한다.

arr.forEach((value) => console.log(value));

 

 

 

parseInt()

---

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

 

예제 2

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

 

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

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 test = numbers.map(num => parseInt(num, 10))

 

 

 

parseFloat()

---

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

 

예제 3

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

 

따라서 위 코드의 실행 결과는 아래와 같다.

// 실행결과
[ 10.5, 20.8, 30 ]

 

예제 4

console.log(parseFloat("50.7kg"));
console.log(parseFloat("3.14abc"));
console.log(parseFloat("px100"));
console.log(parseFloat("0.5e2"));

// 실행결과
50.7
3.14
NaN  // 숫자로 시작하지 않음
50  // 지수 표기법 해석 가능

 

 

 

참고

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