Reread JavaScript advanced programming and reverse crush your interviewer?

The fourth chapter is about variables and scope. I thought this chapter was so basic that I could skip it quickly. It turns out to be both a business mistake and a key interview question. Read it again!

What are raw and reference values?

ECMAScript variables can contain two different types of data: raw and reference values.

The raw value is the simplest data

There are six types of raw values:

  • Undefined
  • Null
  • Boolean
  • Number
  • String
  • Symbol

A reference value is an object made up of multiple values

When you manipulate an object, you’re actually manipulating a reference to that object.

Variable assignment

When assigning an original value to another variable from a variable:

  • The original value is copied to the new location, creating a completely separate copy.
  • The reference value is also copied to the new location, but all it copies is a pointer to an object stored in heap memory. Both variables actually refer to the same object.

When a function passes a parameter, the value is assigned to a local variable in the function. The effect is the same as the variable assignment. The book says that functions take arguments by value. But it’s not very clear at all.)

The examples in the book are clear:

const obj = new Object()
obj.name = 'nick'
function test(target) {
    target.name = 'jack'
    target = new Object()
    target.name = 'tony'
}
test(obj)
console.log(obj.name) // jack
Copy the code

Determine the data type

There are four primitive value types suitable for typeof determination

  • string
  • The numerical
  • Boolean value
  • undefined

The pit of typeof

There is a Null type… This is a “feature” of JS

typeof null // "object"
Copy the code

instanceof

  • Checking the original value with Instanceof always returns false
  • All referenced values are instances of Object

Depth copy

Due to the nature of the original and reference values, if we want to copy a completely independent copy of the reference value, once the object has more than two levels, it cannot be copied in the normal way. This raises the issue of deep copy

obj = {
	a: {
		b: [{
			c: 1}},d: undefined.e: Symbol()}Copy the code

The “regular copy” approach that might be problematic

  • The slice and concat methods of arrays return a new array without altering the original array, but if the elements of the original array are objects, the elements of the new array still point to references to the original object.
  • The same goes for object. assign and extension operators
  • JSON. Stringify and JSON. The parse. This works for most scenarios, copying basic data such as Number, String, Boolean, Array, Object. The stringify procedure ignores undefined, function, and Symbol
function clone(jsonObj) {
    return JSON.parse(JSON.stringify(jsonObj))
}
clone(obj)
/ / {
// a: {
// b: [{
// c: 1
/ /}]
//	}
// }
Copy the code

Recursive deep copy

function clone(jsonObj) {
  let buf;
  if (jsonObj instanceof Array) {
      buf = [];
      let i = jsonObj.length;
      while (i--) {
          buf[i] = clone(jsonObj[i]);
      }
      return buf;
  } else if (jsonObj instanceof Object) {
      if (typeof jsonObj === 'function') {
          return jsonObj
      }
      buf = {};
      for (let k in jsonObj) {
          buf[k] = clone(jsonObj[k]);
      }
      return buf;
  } else {
      returnjsonObj; }}Copy the code
  • The original values are assigned directly, and the reference values are divided into arrays and ordinary objects to iterate over
  • Parse supports undefined, Symbol, and function
  • There can still be problems: if an instance of an object is mixed in, for in iterates through properties on the chain containing the prototype. If we expect the corresponding instance of copy, the result will become uncontrollable

conclusion

When we operate on a reference value in JS, we need to consider whether the modification of the reference value can cause unintended side effects