공부한것/JS
절차적 프로그래밍과 함수형 프로그래밍
flyda
2022. 12. 29. 22:26
프롱트 [for, if 둘다 제거해 보세요] 영상을 보다가 코드 결과가 궁금해서 실제로 돌려봤습니다.
const grades = [88.34, 90, -95, -35, 44.4, 100, 213, 33, 22.44, ,3, 5, 4, 44, 53.43, 343, 22.3, 11.22, 120,88.34, 90, -95, -35, 44.4, 100, 213, 33, 22.44, ,3, 5, 4, 44, 53.43, 343, 22.3, 11.22, 120];
//['88점', '90점', '44점', '100점']
/*
1. 0~100 사이의 숫자 인지
2. 소수점 제거하기
3. '점' 문자 추가
4. 출력
*/
//절차적 프로그래밍
console.time("절차")
const validGrades = [];
for(let i = 0; i < grades.length; i += 1){
if(grades[i] >= 0 && grades[i] <=100){
const validGrade = Math.floor(grades[i]) + '점';
validGrades.push(validGrade);
}
}
for (let index = 0; index < validGrades.length; index += 1){
console.log(validGrades[index])
}
console.timeEnd("절차")
//리팩 1
console.time("리1")
const positiveGrades = grades.filter(el => el >=0 && el <=100);
const newGrades = positiveGrades.map(el => Math.floor(el) + '점');
newGrades.forEach(el => console.log(el));
console.timeEnd("리1")
//리팩2
console.time("리2")
grades
.filter(el => el >=0 && el <=100)
.map(el => Math.floor(el) + '점')
.forEach(el => console.log(el));
console.timeEnd("리2")
//리팩3
console.time("리3")
const validScore = el => el > 0 && el <= 100;
const toInteger = el => Math.floor(el);
const plusSuffix = el => el + "점";
const printEl = el => console.log(el);
grades
.filter(validScore)
.map(toInteger)
.map(plusSuffix)
.forEach(printEl)
console.timeEnd("리3")
/**
* 함수형으로 코딩하는 것의 장점
* 사고의 흐름에 따라서 코딩할 수 있고 문장처럼 읽을 수 있다.
* 함수가 생겼으니 다른 곳에서 사용하기쉽다
* test가 쉽다.
*
* 함수형으로 코딩하는 것의 단점
* 성능상 조금 느릴 수 있다.
*/
/**
* 결과
88점
90점
44점
100점
33점
22점
3점
5점
4점
44점
53점
22점
11점
88점
90점
44점
100점
33점
22점
3점
5점
4점
44점
53점
22점
11점
절차: 0.85986328125 ms
88점
90점
44점
100점
33점
22점
3점
5점
4점
44점
53점
22점
11점
88점
90점
44점
100점
33점
22점
3점
5점
4점
44점
53점
22점
11점
리1: 1.452880859375 ms
88점
90점
44점
100점
33점
22점
3점
5점
4점
44점
53점
22점
11점
88점
90점
44점
100점
33점
22점
3점
5점
4점
44점
53점
22점
11점
리2: 1.097900390625 ms
88점
90점
44점
100점
33점
22점
3점
5점
4점
44점
53점
22점
11점
88점
90점
44점
100점
33점
22점
3점
5점
4점
44점
53점
22점
11점
리3: 1.360107421875 ms
*
*/
여러번 돌려본 결과
배열에 값을 많이 넣으면 절차가 리3(함수형)에 비해서 빠르고 배열에 값을 적게 넣으면 대부분 리3이 빨랐다.
이유의 경우 절차적 프로그래밍과 함수형 프로그래밍에 대한 개념이 부족하여 잘 알지 못하겠어서 다음 포스팅에서는 패러다임에 대한 공부를 해야겠다.