Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Some useful JS techniques that you may not know #4

Closed
n0ruSh opened this issue Jun 8, 2017 · 4 comments
Closed

Some useful JS techniques that you may not know #4

n0ruSh opened this issue Jun 8, 2017 · 4 comments

Comments

@n0ruSh
Copy link
Owner

@n0ruSh n0ruSh commented Jun 8, 2017

I complete reading JavaScript Enlightenment recently. The book is more about basics in JavaScript and suitable for beginners. Here are a list of my benefits and extensions from the book.

Math

JavaScript developers often capitalize the constructor name to distinguish the constructors from normal functions. Therefore, some developers may mistake Math as function since the name is capitalized while Math is really just an object.

console.log(typeof Math); // object
console.log(typeof Array); // function

Function

There are two ways to construct a function:

  • Function declaration/expression
function sum(x, y) {
  return x + y;
}
console.log(sum(3, 4)); //7
let multiply = new Function("x", "y", "return x * y;");
console.log(multiply(3, 4)); //12

In development, we often need to use call or apply to switch the function context. E.g.

function print() {
  console.log(this.a);
}

print.call({ a: "hello" }); //hello

Some interview questions will ask why print doesn't define call as its property but print.call() won't throw error. It's because print is an instance from Function constructor so it inherits all the methods defined in Function.prototype through prototype chain.

print.call === Function.prototype.call;

How to do Array check

typeof can be used to determine the types for primitive datatypes. But it won't be able to distinguish between arrays and objects.

console.log(typeof [1, 2]); //object
console.log(typeof {}); //object

There are several wasy to do Array check:

console.log(Array.isArray([1, 2])); //true
console.log(
  Object.prototype.toString.call([1, 2]).toLowerCase() === "[object array]"
); //true

Note here we have to use Object.prototype.toString with call to switch the calling context, as Array.prototype.toString is overriden.

console.log(Object.prototype.toString.call([1, 2])); //[object Array]
console.log([1, 2].toString()); //1,2
[1, 2] instanceof Array === true;

Object.prototype.toString won't work for custom datatypes. In this case we can use instanceof to determine the type.

class Person {}

let mike = new Person();
console.log(Object.prototype.toString.call(mike)); // [object Object]
console.log(mike instanceof Person); // true

undefined vs null

undefined - no value

There are two cases where a variable is undefined.

  • The variable is deifned but not assigned any value.
let s;
console.log(s); //undefined
  • The variable is NOT defined at all.
let obj1 = {};
console.log(obj1.a); //undefined

null - special value

let obj2 = { a: null };
console.log(obj2.a); //null

If we aim to filter out undefined and null, we can use weak comparison with double equality sign(i.e. ==).

console.log(null == undefined); //true
let arr = [null, undefined, 1];
let fil = arr.filter(it => {
  return it != null;
});
console.log(fil); //[1]

Reference

JavaScript Enlightenment

Notice

  • If you want to follow the latest news/articles for the series of reading notes, Please 「Watch」to Subscribe.
@codevvvv9
Copy link

@codevvvv9 codevvvv9 commented Jan 25, 2018

我star啦,我是吴少林~

@n0ruSh n0ruSh changed the title 你可能不知道的JS Some useful js techniques that you may not know Mar 8, 2018
@n0ruSh n0ruSh changed the title Some useful js techniques that you may not know Some useful JS techniques that you may not know Mar 11, 2018
@libook
Copy link

@libook libook commented Mar 12, 2018

Interesting notes.

The Function constructor way is safe for block scope, but it has inject risk.
function a(c){ return (new Function(c))(c); } a('any js code');

I'm thinking about 'null' and 'undefined'. When and how to chose one?

@n0ruSh
Copy link
Owner Author

@n0ruSh n0ruSh commented Mar 12, 2018

@libook

Good point about Function constructor.

In terms of null and undefined, null is a special value that means 'no value' :-). So when you use null, it does have a value that you want to deliberately ignore or view as meaningless, e.g. invalid value.

Think about this use case, I'm doing a questionnaire asking people's age. For people who skip the question, the answer to the question is undefined. For people who answer the question but with an invalid answer e.g. 'abc' (which is invalid as age has to be a number), I will set the answer in the case to be null.

@libook
Copy link

@libook libook commented Mar 14, 2018

@n0ruSh In common, user interaction designing should avoid invalid answers.

In terms of null and undefined, null is a special value that means 'no value' :-). So when you use null, it does have a value that you want to deliberately ignore or view as meaningless, e.g. invalid value.

I think this may be a direction.
I've seen this on StackOverflow:

The difference between null and undefined is: JavaScript will never set anything to null, that's usually what we do. While we can set variables to undefined, we prefer null because it's not something that is ever done for us. When you're debugging this means that anything set to null is of your own doing and not JavaScript. Beyond that, these two special values are nearly equivalent.

If this is true, 'null' and 'undefined' could be very useful at improving code reliability.

@n0ruSh n0ruSh closed this Jun 22, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
3 participants
You can’t perform that action at this time.