Rangle.io: React Training
gitbook
gitbook
  • Introduction
  • Setup
  • Functional JavaScript
  • ES6 constructs
    • Default Params
    • Template Literals
    • Destructuring
    • Arrow Functions
    • Promises
    • let and const
    • Modules
  • Thinking in Components
    • Atomic Design
    • Atomic Component Principles
    • Benefits of This Approach
    • The Process
    • Task #1
  • React Components
    • Stateless Components
    • Stateful Components
    • Stateful vs Stateless Components
    • Composition
    • Task #2
    • Task #3
    • Task #4
    • Task #5
  • Immutable
    • What Is Immutability?
    • The Case for Immutability
    • JavaScript Solutions
      • Object.assign
      • Object.freeze
    • Immutable.js Basics
      • Immutable.Map
        • Map.merge
      • Nested Objects
        • Deleting Keys
        • Maps are Iterable
      • Immutable.List
      • Performance
      • Persistent and Transient Data Structures
      • Official Documentation
    • Exercises
      • Task #1
      • Task #2
      • Task #3
      • Task #4
      • Task #5
      • Task #6
      • Task #7
  • Redux
    • Review of Reducers and Pure Functions
    • Redux Reducers
    • Redux Actions
    • Configuring your Application to use Redux
    • Using Redux with Components
    • Redux and Component Architecture
  • Routing
    • React Router
    • Router Redux
  • Forms
    • Redux Form
  • Testing
    • Setup
    • Components
    • Reducers
    • Actions
Powered by GitBook
On this page
  • Old ES5 way to set default params
  • ES6 way to write default params

Was this helpful?

  1. ES6 constructs

Default Params

PreviousES6 constructsNextTemplate Literals

Last updated 6 years ago

Was this helpful?

Old ES5 way to set default params

Approach 1: easy way.

// This is what people normally do in ES5 to set default params
function link(height, color, callbackFn) {
  var height = height || 50;
  var color = color || 'red';
  var callbackFn = callbackFn || function() {};

  // function content...
}

It works well, but in the above implementation we didn't account for falsy values. For example: 0, '', null, NaN, false are .

Approach 2: Better way.

// So there is a better way to do this, it checks param is actually undefined or not:
function link(height, color, callbackFn) {
  var height = typeof height !== 'undefined' ?  height : 50;
  var color = typeof color !== 'undefined' ?  color : 'red';
  var callbackFn = typeof callbackFn !== 'undefined' ?  callbackFn : function() {};

  // function content...
}

ES6 way to write default params

Approach 3: ES6 way, it gets just so much better.

function link(height = 50, color = 'red', callbackFn = () => {}) {
  // function content...
}

// or using ES6 const and let
const noop = () => {};
const link = (height = 50, color = 'red', callbackFn = noop) => {
  // function content...
};

Further reading:

falsy values
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/default_parameters
http://tc39wiki.calculist.org/es6/default-parameter-values/
http://exploringjs.com/es6/ch_parameter-handling.html
https://dorey.github.io/JavaScript-Equality-Table