Develop Reference

Why does splice method works on const (constant) array in JavaScript? [duplicate]

I know that ES6 is not standardized yet, but a lot of browsers currently support const keyword in JS.
In spec, it is written that:
The value of a constant cannot change through re-assignment, and a
constant cannot be re-declared. Because of this, although it is
possible to declare a constant without initializing it, it would be
useless to do so.
and when I do something like this:
const xxx = 6;
xxx = 999;
xxx++;
const yyy = [];
yyy = 'string';
yyy = [15, 'a'];
I see that everything is ok: xxx is still 6 and yyy is [].
But if I do yyy.push(6); yyy.push(1); , my constant array has been changed. Right now it is [6, 1] and by the way I still can not change it with yyy = 1;.
Is this a bug, or am I missing something? I tried it in the latest chrome and FF29

The documentation states:
...constant cannot change through re-assignment
...constant cannot be re-declared
When you're adding to an array or object you're not re-assigning or re-declaring the constant, it's already declared and assigned, you're just adding to the "list" that the constant points to.
So this works fine:
const x = {};
x.foo = 'bar';
console.log(x); // {foo : 'bar'}
x.foo = 'bar2';
console.log(x); // {foo : 'bar2'}
and this:
const y = [];
y.push('foo');
console.log(y); // ['foo']
y.unshift("foo2");
console.log(y); // ['foo2', 'foo']
y.pop();
console.log(y); // ['foo2']
but neither of these:
const x = {};
x = {foo: 'bar'}; // error - re-assigning
const y = ['foo'];
const y = ['bar']; // error - re-declaring
const foo = 'bar';
foo = 'bar2'; // error - can not re-assign
var foo = 'bar3'; // error - already declared
function foo() {}; // error - already declared

This happens because your constant is actually storing a reference to the array. When you join something into your array you are not modifying your constant value, but the array it points to. The same would happen if you assigned an object to a constant and tried to modify any property of it.
If you want to freeze an array or object so it can't be modified, you can use the Object.freeze method, which is already part of ECMAScript 5.
const x = Object.freeze(['a'])
x.push('b')
console.log(x) // ["a"]

Came through this article while searching on why I was able to update an Object even after defining it as const. So the point here is that it is not the Object directly but the attributes it contains which can be updated.
For example, my Object looks like:
const number = {
id:5,
name:'Bob'
};
The above answers correctly pointed out that it's the Object which is const and not its attribute. Hence, I will be able to update the id or name by doing:
number.name = 'John';
But, I will not be able to update the Object itself like:
number = {
id:5,
name:'John'
};
TypeError: Assignment to constant variable.

This is consistent behavior with every programming language I can think of.
Consider C - arrays are just glorified pointers. A constant array only means that the value of the pointer will not change - but in fact the data contained at that address is free to.
In javascript, you are allowed to call methods of constant objects (of course - otherwise constant objects would not serve much purpose!) These methods might have the side effect of modifying the object. Since arrays in javascript are objects, this behavior applies to them as well.
All you are assured of is that the constant will always point to the same object. The properties of the object itself are free to change.

The keyword const is a little misleading.
It does not define a constant value. It defines a constant reference to a value.
Because of this you can NOT:
Reassign a constant value
Reassign a constant array
Reassign a constant object
But you CAN:
Change a constant array
Change a constant object

I think this would give you more clarity on the issue : https://codeburst.io/explaining-value-vs-reference-in-javascript-647a975e12a0 .
Basically it boils down to the const always pointing to the same address in memory. You can change the value stored in that address but cannot change the address the const is pointing too.
The definition of const you mentioned will hold true when the const is pointing to an address that holds a primitive value . This is because you cannot assign a value to this const without changing its address (because this is how assigning primitive values work) and changing the address of a const is not allowed.
Where as if the const is pointing to non-primitive value , it is possible to edit the value of the address.

The const declaration creates a read-only reference to a value. It does not mean the value it holds is immutable, just that the variable identifier cannot be reassigned. For instance, in the case where the content is an object, this means the object's contents (e.g., its parameters) can be altered.
In addition, an also important note:
Global constants do not become properties of the window object ...
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const

The value of a const can't be changed through reassignment, and it can't be redeclared.
const testData = { name:"Sandeep",lastName:"Mukherjee",company:"XYZ"}
First case
testData = {name:"hello"}
console.log(testData);//throws an Error:Assignment to constant variable
Here we are reassigning testData again
Second case
const testData = {name:"Sandeep",lastName:"Mukherjee",company:"ABC"}
console.log(testData); //throws an Error: Identifier 'testData' has already been declared
Here we are redeclaring testData again
When a variable is declared using const it means it points to some memory location the
behaviour of const is we can manipulate the value stored in that memory location but not
the memory location,when we reassign/redeclare the const variable it
does not allow to change the memory location
We can change the value of a specific key
testData.company = "Google"
console.log(testData);
//{ name: 'Sandeep', lastName: 'Mukherjee', company: 'Google' }
We can add any new key value pair to it
testData.homeTown = "NewYork"
console.log(testData)
//{name: 'Sandeep',lastName:'Mukherjee',company:'Google',homeTown: 'NewYork'}

Because in const you can change the values of an object, so the object does not actually store the assignment data but instead, it points to it.
so there is a difference between primitives and objects in Javascript.

const variable stores the address (memory address such as 0xFF2DFC) that is constant.
The constant is NOT the content at the memory.
constant is memory address ONLY
Thank you for reading.

const MY_OBJECT = {'key': 'value'};
// Attempting to overwrite the object throws an error
// Uncaught TypeError: Assignment to constant variable.
MY_OBJECT = {'OTHER_KEY': 'value'};
// However, object keys are not protected,
// so the following statement is executed without problem
MY_OBJECT.key = 'otherValue';
// Use Object.freeze() to make object immutable
// The same applies to arrays
const MY_ARRAY = [];
// It's possible to push items into the array
MY_ARRAY.push('A'); // ["A"]
// However, assigning a new array to the variable throws an error
// Uncaught TypeError: Assignment to constant variable.
MY_ARRAY = ['B'];

In your constant is saved not the object, but link to the object.
You can't change this link, because it is constant.
But object you can change.

What is a principle behind designing const variable in javascript?

I'm wondering about the principle of const variable in javascript.
I know that const is mean constant variable. It means const a = 1 and a will be unable to reassign a value. But, if I assign a object to const variable (const a = { x: 1}), i still can update value of fields inside the object, but cannot reassign the object. Because, assigning object to const is assigning reference of object to a variable, not a value inside them.
But, If I tell someone who doesn't know anything about coding that const is unable reassign variable. I think they may understand that const a = { x: 1 } and a.x = 2 should be failed.
So, I'm wondering what is the abstract idea behind designing the const variable. Why in the first place, they think const be only apply on reference, not on value inside them too.
P.S. Sorry for my broken english grammar. I'm not native speaker.

Maybe there is a misconception about const, in fact it doesn't creates immutable variables instead it creates immutable binding.
example:
const myconst = YourObjectInstance;
myonst = AnotherInstanceOfObject // we will have an error here
in other hand:
myconst.myProperty = 3 // will work fine because is a valid code
So const creates a binding to that particular object and assures that variable myconst won't have any other object's Binding.

Number one - there is nothing called "constant variables". The correct terminology is "constants".
The reason why the properties of the object you declared as a constant can be changed is that the object is referenced.
var i = 200;
const c = 300;
const o = {foo: "bar"}
Now, in the above example,
The symbol i is understandably a variable which has the value of 200.
The symbol c is a constant whose value is fixed to 300.
The symbol o is a constant which refers to an object. The value of o is a memory address which points to an object. What cannot be changed is this memory address, not what is in the address itself.
const o = {foo: "bar"};
o.bar = "foo"; //The object properties, whats in the memory location the constant points to, can be changed
console.log(o);
try {
o = {bar: "foo"}
console.log('I changed the value of a constant')
}
catch(e) {
console.log('I cannot change the value of a constant. But whatever in the memory where the value is pointing to')
}

Is array.push a form of reassignment?

I'm working in a project with several javascript files and part of what I'm doing right now is both migrating existing code to use newer ES6+ features as well as making sure we're abiding by the AirBnB Eslint Rules.
So, given that context, this is the specific situation:
let meta = [a.platform];
And right below that:
meta.push(a.browserName ? a.browserName : 'any');
So now the linter is giving me a warning: 'meta is never reassigned. Use const instead'.
I understand that meta = somethingNew would be reassigning the variable. But in this case, isn't this variable also something different than what it used to be when it was created?
or, to make it even more clear
Can I use a const to define an array that will receive new items? If not, why?
Also, if not: why is the linter throwing a warning?

The only thing you have to know is that const has nothing to do with immutability. const simply allows you to prevent reassignment, which means that you cannot do that:
// OK
const foo = '';
const bar = [];
const baz = {};
// WTF are we doing!?
foo = 'Foo';
bar = ['Bar'];
baz = {baz: 'Baz'};
However, in JavaScript, object values are mutable ; contrary to primitive values that are immutable. So if you put a string in a const, you will not be able to modify it at all, even with String.prototype methods (which return new strings).
const str = 'Lorem ipsum';
console.log(str.slice(6)); // This is actually a new string...
console.log(str); // The original string has not been modified!
It is quite different with arrays or object literals, though:
const arr = [];
const obj = {};
arr.push('Foo');
arr.push('Bar');
obj.foo = 'Foo';
obj.bar = 'Bar';
console.log(arr); // Modified!
console.log(obj); // Modified!
At this point, it should be clear: the linter shows this warning because, indeed, meta is never reassigned... A mutation is not a reassignment.

meta.push() doesn't reassign the variable, it just modifies the array that the variable refers to -- it's still the same array, but with different contents. So you can use const for the variable declaration, since you never make it refer to a different array.
The same is true if you assign to array elements. This is OK:
const meta = [a.platform];
meta[1] = somethingNew;
The second assignment doesn't change meta, it changes the array.

What is difference between assigning value to variable and storing value into variable

I was reading a book about object oriented javascript and I found this:
Reference types do not store the object directly into the variable to which it is assigned, so the
object variable in this example doesn’t actually contain the object instance. Instead, it holds
a pointer (or reference) to the location in memory where the object exists. This is the primary
difference between objects and primitive values, as the primitive is stored directly in the variable.
My question is
what is the meaning of this ?
"Reference types do not store the object directly into the variable to which it is assigned, so the object variable in this example doesn’t actually contain the object instance." ??

In the image you provided you can see
var object1 = new Object();
var object2 = object1;
In this case, you have two variables that both store a reference (think of a pointer) to another place in your memory. In this place the object is stored. If you change your object via one of the references, and access it via the other one you will see it has changed.
object1.someVariable = 'asdf';
object2.someVariable = 'newValue';
console.log(object1.someVariable); // will give 'newValue'
console.log(object2.someVariable); // will also give 'newValue'
If you have scalar values, they will not store references, they will store the value itself.
Think of another example:
var primitiveString = 'asdf';
var anotherPrimitiveString = primitiveString;
Since both store the value it self, you can change one of the two strings, but the other one will still contain asdf, since they do not reference something.
anotherPrimitiveString = 'newValue';
console.log(primitiveString); // will give 'asdf'
console.log(anotherPrimitiveString); // will give 'newValue'
Here you have a jsfiddle with the explained example.

It could be clearer with an example:
var obj1 = { name: "John" };
var obj2 = obj1;
obj1 and obj2 point to the same location in memory.
It can be proved by changing name property:
obj2.name = "Bob";
console.log(obj1.name); // "Bob"
Another behaviour with primitives:
var string1 = 'string';
var string2 = string1;
string1 and string2 point to different locations in memory. So changing string2 won't affect string1
string2 = 'new string';
console.log(string1); // 'string'

You have a house. You = variable. House = value. Now, you have to prove you own that house. You get a paper, stating that you are the owner.
When you go around, you don't have to carry your house. You can just show people the paper.
House = heavy, hard to move.
Paper = small, light, easy to move.
That paper does what storing a reference does. It does not actually hold the real object, but it tells the rest of the system where it is.

In computer science in general there is two type of variables types, pointers and values.
Pointers don't hold anything but an address so the computer can find where the real value is stored, while values store the real data.
The power of pointers is you can define one value and have multiple pointers use that same value. This is a huge gain in memory management and bidirectional communication from one section of code and another.
This is an example of a pointer in javascript.
var foo = { value : 1};
var goo = foo;
goo.value = 4;
//now both goo.value and foo.value are both 4.
A value is something like this.
var foo = 2;
var goo = foo;
goo = 4;
//now foo is 2 and goo is 4.

Object1 refers to some memory location (for example 2002). Object2 is also refered to the same memory location but by referring Object1.

In js it is best to think that variables are pointers to objects & when assign directly to a variable you are not modifying any object , but pointing your variable to an object.
Let us take this example
var a= b ={}
So here a & b are pointer to same object.
Now set a.someProp = 'value'
it sets b.someProp as well since a & b point to same object
Where as storing a value in a variable is called variable initialization

Why can I change a constant object in javascript

I know that ES6 is not standardized yet, but a lot of browsers currently support const keyword in JS.
In spec, it is written that:
The value of a constant cannot change through re-assignment, and a
constant cannot be re-declared. Because of this, although it is
possible to declare a constant without initializing it, it would be
useless to do so.
and when I do something like this:
const xxx = 6;
xxx = 999;
xxx++;
const yyy = [];
yyy = 'string';
yyy = [15, 'a'];
I see that everything is ok: xxx is still 6 and yyy is [].
But if I do yyy.push(6); yyy.push(1); , my constant array has been changed. Right now it is [6, 1] and by the way I still can not change it with yyy = 1;.
Is this a bug, or am I missing something? I tried it in the latest chrome and FF29

The documentation states:
...constant cannot change through re-assignment
...constant cannot be re-declared
When you're adding to an array or object you're not re-assigning or re-declaring the constant, it's already declared and assigned, you're just adding to the "list" that the constant points to.
So this works fine:
const x = {};
x.foo = 'bar';
console.log(x); // {foo : 'bar'}
x.foo = 'bar2';
console.log(x); // {foo : 'bar2'}
and this:
const y = [];
y.push('foo');
console.log(y); // ['foo']
y.unshift("foo2");
console.log(y); // ['foo2', 'foo']
y.pop();
console.log(y); // ['foo2']
but neither of these:
const x = {};
x = {foo: 'bar'}; // error - re-assigning
const y = ['foo'];
const y = ['bar']; // error - re-declaring
const foo = 'bar';
foo = 'bar2'; // error - can not re-assign
var foo = 'bar3'; // error - already declared
function foo() {}; // error - already declared

This happens because your constant is actually storing a reference to the array. When you join something into your array you are not modifying your constant value, but the array it points to. The same would happen if you assigned an object to a constant and tried to modify any property of it.
If you want to freeze an array or object so it can't be modified, you can use the Object.freeze method, which is already part of ECMAScript 5.
const x = Object.freeze(['a'])
x.push('b')
console.log(x) // ["a"]

Came through this article while searching on why I was able to update an Object even after defining it as const. So the point here is that it is not the Object directly but the attributes it contains which can be updated.
For example, my Object looks like:
const number = {
id:5,
name:'Bob'
};
The above answers correctly pointed out that it's the Object which is const and not its attribute. Hence, I will be able to update the id or name by doing:
number.name = 'John';
But, I will not be able to update the Object itself like:
number = {
id:5,
name:'John'
};
TypeError: Assignment to constant variable.

This is consistent behavior with every programming language I can think of.
Consider C - arrays are just glorified pointers. A constant array only means that the value of the pointer will not change - but in fact the data contained at that address is free to.
In javascript, you are allowed to call methods of constant objects (of course - otherwise constant objects would not serve much purpose!) These methods might have the side effect of modifying the object. Since arrays in javascript are objects, this behavior applies to them as well.
All you are assured of is that the constant will always point to the same object. The properties of the object itself are free to change.

The keyword const is a little misleading.
It does not define a constant value. It defines a constant reference to a value.
Because of this you can NOT:
Reassign a constant value
Reassign a constant array
Reassign a constant object
But you CAN:
Change a constant array
Change a constant object

I think this would give you more clarity on the issue : https://codeburst.io/explaining-value-vs-reference-in-javascript-647a975e12a0 .
Basically it boils down to the const always pointing to the same address in memory. You can change the value stored in that address but cannot change the address the const is pointing too.
The definition of const you mentioned will hold true when the const is pointing to an address that holds a primitive value . This is because you cannot assign a value to this const without changing its address (because this is how assigning primitive values work) and changing the address of a const is not allowed.
Where as if the const is pointing to non-primitive value , it is possible to edit the value of the address.

The const declaration creates a read-only reference to a value. It does not mean the value it holds is immutable, just that the variable identifier cannot be reassigned. For instance, in the case where the content is an object, this means the object's contents (e.g., its parameters) can be altered.
In addition, an also important note:
Global constants do not become properties of the window object ...
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const

The value of a const can't be changed through reassignment, and it can't be redeclared.
const testData = { name:"Sandeep",lastName:"Mukherjee",company:"XYZ"}
First case
testData = {name:"hello"}
console.log(testData);//throws an Error:Assignment to constant variable
Here we are reassigning testData again
Second case
const testData = {name:"Sandeep",lastName:"Mukherjee",company:"ABC"}
console.log(testData); //throws an Error: Identifier 'testData' has already been declared
Here we are redeclaring testData again
When a variable is declared using const it means it points to some memory location the
behaviour of const is we can manipulate the value stored in that memory location but not
the memory location,when we reassign/redeclare the const variable it
does not allow to change the memory location
We can change the value of a specific key
testData.company = "Google"
console.log(testData);
//{ name: 'Sandeep', lastName: 'Mukherjee', company: 'Google' }
We can add any new key value pair to it
testData.homeTown = "NewYork"
console.log(testData)
//{name: 'Sandeep',lastName:'Mukherjee',company:'Google',homeTown: 'NewYork'}

Because in const you can change the values of an object, so the object does not actually store the assignment data but instead, it points to it.
so there is a difference between primitives and objects in Javascript.

const variable stores the address (memory address such as 0xFF2DFC) that is constant.
The constant is NOT the content at the memory.
constant is memory address ONLY
Thank you for reading.

const MY_OBJECT = {'key': 'value'};
// Attempting to overwrite the object throws an error
// Uncaught TypeError: Assignment to constant variable.
MY_OBJECT = {'OTHER_KEY': 'value'};
// However, object keys are not protected,
// so the following statement is executed without problem
MY_OBJECT.key = 'otherValue';
// Use Object.freeze() to make object immutable
// The same applies to arrays
const MY_ARRAY = [];
// It's possible to push items into the array
MY_ARRAY.push('A'); // ["A"]
// However, assigning a new array to the variable throws an error
// Uncaught TypeError: Assignment to constant variable.
MY_ARRAY = ['B'];

In your constant is saved not the object, but link to the object.
You can't change this link, because it is constant.
But object you can change.