I followed a tutorial on meteorjs here:

One of the code is using const. const text = ReactDOM.findDOMNode(this.refs.textInput).value.trim();

As far as I know from my reading on SO website other site, const value can't be changed. However when I keyin any text in my application input box, there is no error thrown for reassigning const value.

Why is this happening and did I understand const wrong? I hope someone can explain to me and thanks in advance.

Example code:

import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { createContainer } from 'meteor/react-meteor-data';

import { Tasks } from '../api/tasks.js';
...some lines skipped...

// App ponent - represents the whole app
class App extends Component {
  handleSubmit(event) {
    event.preventDefault();

    // Find the text field via the React ref
    const text = ReactDOM.findDOMNode(this.refs.textInput).value.trim();

    Tasks.insert({
      text,
      createdAt: new Date(), // current time
    });

    // Clear form
    ReactDOM.findDOMNode(this.refs.textInput).value = '';
  }

  renderTasks() {
    return this.props.tasks.map((task) => (
      <Task key={task._id} task={task} />

I followed a tutorial on meteorjs here: https://www.meteor./tutorials/react/forms-and-events

One of the code is using const. const text = ReactDOM.findDOMNode(this.refs.textInput).value.trim();

As far as I know from my reading on SO website other site, const value can't be changed. However when I keyin any text in my application input box, there is no error thrown for reassigning const value.

Why is this happening and did I understand const wrong? I hope someone can explain to me and thanks in advance.

Example code:

import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { createContainer } from 'meteor/react-meteor-data';

import { Tasks } from '../api/tasks.js';
...some lines skipped...

// App ponent - represents the whole app
class App extends Component {
  handleSubmit(event) {
    event.preventDefault();

    // Find the text field via the React ref
    const text = ReactDOM.findDOMNode(this.refs.textInput).value.trim();

    Tasks.insert({
      text,
      createdAt: new Date(), // current time
    });

    // Clear form
    ReactDOM.findDOMNode(this.refs.textInput).value = '';
  }

  renderTasks() {
    return this.props.tasks.map((task) => (
      <Task key={task._id} task={task} />

• javascript
• reactjs
• meteor
• constants

4 Answers 4

That const is being used to define a local variable inside a function that gets called every time you enter input. When the function finishes executing it no longer "exists", so next time the function is called you aren't overwriting it, you are creating it again.

Both let and const create variables that are block-scoped – they only exist within the innermost block that surrounds them.

function func() {
  if (true) {
    const tmp = 123;
  }
  console.log(tmp); // ReferenceError: tmp is not defined
}

In your case, every time you run the handleSubmit function, text is the newly created variable in the function's scope and not the old, destroyed texts.

More on this here.

@epiqueras provided a good answer, but it's also important to know that const is not about immutability. good info here: https://mathiasbynens.be/notes/es6-const

ES6 const does not indicate that a value is ‘constant’ or immutable. A const value can definitely change.

The only difference between const and let is that const makes the contract that no rebinding will happen.

Your assumptions for the const keyword are correct!

This function is a handleSubmit() function, so it will only get called when the form (I presume) is submitted. In that instance the const variable is created, populated, used, and then out of scope once the function pletes.

If handleSubmit() is called again it will create a new variable.