boseok-note
  • README
  • javascript
    • 함수형 자바스크립트
    • core
      • 이벤트루프 (Event Loop)
      • boxing, unboxing
      • prototype
      • 실행컨텍스트
      • hoisting
      • 클로져(Closure)
      • arguments
      • Scope - 스코프 - 유효범위
    • api
      • Promise
      • Fetch API
      • worker-api
      • Web API
    • lib
      • rxjs
        • rxjs
    • 호스트객체?
    • es6
      • var-let-const
      • template-literals
      • async-await
    • tip
      • array-like
      • Object literal, new Object
    • dom-api
      • HTML Element get Text
      • get-size
      • scrollToBottom
    • for in, for of 차이
    • storage
    • Constructor (생성자)
    • Javascript
    • module
  • front-end
    • vuejs
      • vue-rx
      • README
        • 1-start
        • 2-basic-component
        • 3-add-component
        • 4-advanced-component
        • 5-dynamic-methods-event
        • 6-internal-process
      • next-tick
      • compare-react
      • v-model-with-props
      • v-for
      • vuejs
      • vuex
    • browser
      • dom
      • cssom
      • reflow, repaint
      • 렌더링 트리(Rendering Tree)
      • web-standard
    • css
      • text-ellipse
      • white-space
      • css layout
    • Pre-render
    • react-native
      • react-native
    • 최적화 관련
    • reactjs
      • performance
      • reactjs
    • CSR, SSR
  • server-side
    • letsencrypt
    • auto-deploy
    • nlb
    • Certbot, aws https setting with wildcard
    • mysql
    • node.js
      • npm
        • npm install
      • node-dynamodb
      • node에서 간편하게 letsencrypt를 사용하여 https 구현하는 방법
    • Docker
    • nginx
    • Amazon Web Service
    • nginx https 설정
  • design-pattern
    • observer
    • flux
    • README
  • coop
    • git
      • gitignore
      • remote
      • ssh key 사용하기
      • password
      • credential
      • git
  • cs
    • port
    • data-structure
      • tree
      • binary-tree
    • network
      • home-router
      • tcp-udp
      • http
    • process
  • etc
    • sync-async
    • seo
      • seo
      • SEO Check Point
    • rest
    • unity
      • methods
Powered by GitBook
On this page
  • 첫번째 사례
  • 두번째 사례
  1. design-pattern

README

좋은 소프트웨어에는 다양하고 공통적인 디자인패턴들이 적용되어있는데,

나쁜 소프트웨어도 마찬가지로 다양하고 안 좋은 패턴들이 있다.

여기에선 구조상 좋지 않고 피해야할 패턴들을 소개한다.

첫번째 사례

var a = 1;
console.log(a);

// some code

function someAddFunc(b) {
  a = a + b;
}

// ...some code

console.log(a);

위 코드는 함수내에 선언된 변수나 파라미터변수가 아닌 외부 변수의 값을 변경하고 있다.

위와 같은 구조의 코드는 상당히 나쁜 패턴이고 피해야한다.

변수 선언과 함수선언 사이에 a값을 변경하거나,

나중에 a 값을 사용하려고 했을때 함수 선언과 그 변수의 사용하는 시점 사이의 코드가 많다면

결과값을 예측하기가 쉽지 않고 사이드이펙트 우려가 크다.

두번째 사례

function someAddFunc2(a, b) {
  a = a || 1;
  b = b || 2;
  return a + b;
}

console.log(someAddFunc2()); //3
console.log(someAddFunc2(2, 2)); //4

예제에서는 괜찮아 보일 수 있지만, 가독성이 떨어지고 사이드이펙트 우려도 있습니다.

(paramter 변수가 primitive type이 아닌 경우를 생각해보세요.)

es6에서는 default paramter를 제공합니다.

function someAddFunc2(a = 1, b = 2) {
  return a + b;
}

console.log(someAddFunc2()); //3
console.log(someAddFunc2(2, 2)); //4

코드가 훨씬 간결하고 가독성도 더 좋으며,

사이드이펙트에 대한 우려도 줄어들었습니다.

PreviousfluxNextcoop

Last updated 5 years ago