Javascript gotchas

Javascript truly is the most universal language as it runs in your browser and your phone('s browser) and also serverside. People nowadays can't stand types and don't like compiling and just obsessed with javascript frameworks. Decades ago it was mostly used for a little onclick event handler of your button or some annoying alert() or do some simple form validation.

I was astonished to find out that the computer science classic MIT textbook Structure and Interpretation of Computer Programs now has a Javascript version in placce of its original Scheme version which I have used in college!

New versions of Javascript come out every year See https://www.w3schools.com/js/js_versions.asp. It is hard to keep up and its caveats can be confusing.

Copy objects

Consider this little code, suppose you have a car object, then make a copy of it. change something in the copy, do you expect the original change?

let car = {
    model: 'Corolla',
    make: 'Toyota'
};
let car2 = car;
car2.model = 'Camry';
console.log(car);
console.log(car2);
console.log(car==car2);  

The output is

{ model: 'Camry', make: 'Toyota' }
{ model: 'Camry', make: 'Toyota' }
true

You changed the original car by modifying the copy and they are same object! This works like a pointer in C++. Now how do you actually make a distinct copy of an object? There are few ways to do this and there is shallow copy and deep copy. See this excellent tutorial: https://www.javascripttutorial.net/object/3-ways-to-copy-objects-in-javascript/

Let, var, const

In the beginning there was "var" and the "function", probably derived from Pascal as it faded into oblivion. Now there is this "let" and "const". "const" is a bit more straight forward, which is constant like other languages, to make you feel more secure that your variables aren't changing.

const a=1
a =2; // boom error trying to modify constant

But wait, redifining variable is not allowed but you can still change things within the variable

const mycar = {
    model: 'Corolla',
    make: 'Toyota'
};
mycar.model = 'RAV4'  // valid to change things inside the const myvar
console.log(mycar) 
mycar = {     // error: assignment to constant variable
    model:'Focus', 
    make:'Ford'
}

What's difference between "let" and "var"? "let" is local scope and "var" is global scope. "var" can be redeclared but "let" does not.

var a = 1
let b = 2
var a = "John" // ok
let b = "Mary" // not ok

Number type coersion

// adding is concat, if you have a string adding number both are like strings
console.log("10"+5); //105
console.log(10+"5");  //105
// but this only apply to add, other math operations treat it as number
console.log(10 - '5'); //5
console.log(10 * '5'); //50
console.log(10 / '5'); //2
console.log(10 % '5'); //0

//convert string to number
var a = '10';
var b = 5
var c = a-'0' + 5 // to convert string to number so you can do a add, one way is minus '0'
console.log(c) // 15
var d = Number(a)+b // or be explicit about it, or do parseInt
console.log(d) // 15

//boolean is coverted to 1 for true, 0 for false
console.log(true + 2);  // 3
console.log(false + 2); // 2
// string and number are considered double equal, but not triple equal
console.log(10 == '10') // true
console.log(10 === '10') // false