티스토리 뷰
함수에는 입력과 출력이 있습니다.
입력은 함수가 계산을 하기 위한 외부정보입니다.
출력은 함수 밖으로 나오는 정보나 어떤 동작입니다.
입력과 출력은 명시적이거나 암묵적일 수 있습니다.
-명시적 입력 :인자
-암묵적 입력 : 인자 외 다른 입력
ex) 전역변수 읽기
-명시적 출력 : 리턴값
-암묵적 출력 : 리턴값 외 다른 출력
ex) 전역변수 값 변경
액션에서 계산을 빼내기 (계산 추출)
1. 계산 코드를 찾아 빼낸다 (리팩토링)
2. 새 함수에 암묵적 입력과 출력을 찾는다.
3. 암묵적 입력은 인자로 암묵적 출력은 리턴값으로 바꾼다.
예시문제
// 전역변수 : shopping_cart_total
function update_shipping_icons(){
var buy_buttons = get_buy_buttons_dom()
for(var i = 0; i < buy_buttons.length; i++) {
var button = buy_buttons[i];
var item = button.item;
if(item.price + shopping_cart_total >=20) // 이 부분이 다른 팀에서 사용하려는 비즈니스 규칙이다
button.show_free_shipping_icon();
else
button.hide_free_shipping_icon();
}
위 계산 추출하기 3단계를 진행한다.
1. 계산 코드를 찾아 빼내고 새로운 함수를 만든다
function get_free_shipping(item_price){ // 새로운 함수
return item_price + shopping_cart_total >=20 // 계산 코드
}
function update_shipping_icons(){
var buy_buttons = get_buy_buttons_dom()
for(var i = 0; i < buy_buttons.length; i++) {
var button = buy_buttons[i];
var item = button.item;
if( get_free_shipping(item_price) ) // 새로운 함수를 입력
button.show_free_shipping_icon();
else
button.hide_free_shipping_icon();
}
2.새 함수에 암묵적 입력과 출력을 찾는다.
function get_free_shipping(item_price){ // 새로운 함수
return item_price + shopping_cart_total >=20 // shopping_cart_total 전역변수를 가져와서 읽음 (암묵적 입력)
}
// 암묵적 출력은 전역변수 값을 업데이트 하는 것
3. 암묵적 입력은 인자로 암묵적 출력은 리턴값으로 바꾼다.
function update_shipping_icons(){
var buy_buttons = get_buy_buttons_dom()
for(var i = 0; i < buy_buttons.length; i++) {
var button = buy_buttons[i];
var item = button.item;
if(get_free_shipping(shopping_cart_total, item_price ) ) // 전역변수를 새로운 함수의 인자로 넣어준다
button.show_free_shipping_icon();
else
button.hide_free_shipping_icon();
}
// 암묵적입력(전역변수)를 없애고, 출력은 리턴값으로 바꾼다.
// 암묵적 입력 -> 인자(명시적 입력)
function get_free_shipping( total, item_price ){ // 전역변수를 새로운 함수의 인자로 넣어준다
return item_price + total >=20 // 출력은 return값으로 변경
}
get_free_shipping() 함수 체크리스트
- DOM 업데이트와 비즈니스 규칙이 분리되었는가?
- 전역변수가 없는가? 의존하지 않는가?
- 함수가 결괏값을 리턴하는가?
모두 Yes
'개발공부 > 함수형코딩' 카테고리의 다른 글
함수형 코딩 - #Chapter 3 (2) | 2023.12.07 |
---|---|
함수형 코딩- #Chapter 2 (0) | 2023.12.07 |
함수형 코딩 - #Chapter 1 (0) | 2023.12.07 |
- Total
- Today
- Yesterday
- promise
- 함수형코딩
- react
- 비동기
- JSX
- 대괄호표기법
- 태스크큐
- 미들웨어위치
- unique "key" prop.
- 문자열
- 리액트 이미지경로
- .catch()
- 객체속성 추가 삭제
- 상속
- unexpected character
- universal rendering
- .then()
- .finally()
- 머리아프다..
- 객체리터럴
- 함수
- 동등비교연산자
- Props
- 프로토타입 체이닝
- 배열내특정요소찾기
- 전역변수
- cors위치
- 에이블스쿨2일차
- 조대곤교수님
- null과 undefined
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 31 |