Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

JavaScript > Advanced Javascript > Flashcards

Advanced Javascript Flashcards

1
Q

What does ‘use strict’ mean?

A

It turns on a stricter debugging mode.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

How do you enable strict mode?

A

Include:
“use strict”;
at the top of your file or a function. This is ignored by older browsers as it’s just a seemingly random string.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

What does strict mode do?

A
  1. It doesn’t allow you to use variables you haven’t declared.
  2. It prevents you from using keywords reserved for future versions of JavaScript.
  3. It doesn’t allow you to delete variables and functions.
  4. It doesn’t allow you to delete arguments to functions.
  5. It makes eval slightly safer by preventing variables from leaking out.
  6. It prevents the default this value from being assigned to the window object, and instead leaves it undefined.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Does JavaScript pass variables by value or reference?

A

The primitive types (boolean, number and string) are passed by value. Objects are passed by reference.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

What is pass by value?

A

Passing by value passes a copy of the primitive into the function.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

What is pass by reference?

A

Passing by reference means that it passes a pointer to the original object. This means that we can manipulate props on the object inside the function and it will be changed everywhere.

Note, you can point the reference at a new object in the function, which does not overwrite the old object, just redefines what the variable inside the function is pointing at.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

What are the different types in JavaScript?

A 
Primitives:
  Boolean
  Number
  String
  Null - typeof(null) = "object"
  Undefined

Object

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

What is the difference between a dynamically and statically typed language?

A

In dynamically typed languages (like JavaScript) the types of the variables are determined at runtime and are inferred from the value they currently hold.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

What’s the difference between undefined and null?

A

The JavaScript engine uses undefined to flag variable values that haven’t been set and object properties that are unknown.

Null is set by programmers to show a non-value.

The subtle difference here is that programmers set Null and the engine sets Undefined.

null == undefined is true

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

What is the difference between == and ===?

A

=== checks type equality in addition to value

== does type coercion which can give you unintended equalities

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

What is NaN

A

It’s for bogus computations

typeOf(NaN) === "number"
NaN isn't equal to anything, including itself
(NaN === NaN) === false
isNaN(NaN) === true
isNaN("A") === true (ugh)
so to check if something is NaN...
var a = NaN;
(a !== a) === true

Because NaN is the only thing not equal to itself.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

What are the different scopes in JavaScript?

A 
Global scope (available everywhere)
window.foo
Function, or local scope (only available in the function)
function moo() {
  var foo;
}

Block scope exists with let and const in ES6 (only in the block)
if (true) {
let foo;
}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

What is hoisting?

A

Hoisting is the automatic hoisting of variable and function declarations to the top of its enclosing scope.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

What is the scope chain?

A

When variable is referenced and it’s not inside the current function scope, it will continually look up through containing scopes to find a definition.

These are lexically defined, so the the function must be contained within the other function or must be passed in.

For instance, this will return variable not defined:

function foo() {
  console.log(myvar);
}
function goo() {
  var myvar = 1;
  foo();
}

goo();

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

What is an IIFE and why might you use it?

A

Immediately Invoked Function Expression

(function() {
var myCode;
})();

Wraps a section of code in a function to create a scope so variables don’t end up in global scope. We immediately invoke the function, so it will run just as usual but not pollute the rest of our runtime.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

What are function closures?

A

Closures are the scopes created by functions. Each closure has access to its containing closure all the way up the window variable, and can access variables in them.

But, note that those variables can change relative to when the inner function is invoked:

var f= [];

for (var i=0; i<3; i++) {
  f[i] = function() { return i; };
}

console. log(f[0]);
console. log(f[1]);
console. log(f[2]);

// 3
// 3
// 3

Instead, to get the desired functionality, use an IIFE and variables passed by value:

var f= [];

for (var i=0; i<3; i++) {
  (function(y) {
    f[y] = function() { return y; };
  })(i);
}

console. log(f[0]);
console. log(f[1]);
console. log(f[2]);

// 0
// 1
// 2
17
Q

What will this output?

var salary = “$1000”;

(function () {

console.log(“Original salary was “ + salary);

var salary = “$5000”;

console.log(“My New Salary “ + salary);

})();

A

“Original salary was undefined.”

The variable is redefined in the IIFE and hoisted to the top with no value set until it hits the definition.

18
Q

What does this point to in a globally defined function?

A

The window object, unless you’re in strict mode, in which case it’s undefined.

19
Q

How is this determined?

A

this is determined by the calling context.

For example:

var asim = {
  checkThis: function() {
    console.log(this);
  }
}

var func = asim.checkThis;

asim.checkThis();
func();
// Object
// Window
20
Q

What is will log from this example?

var asim = {
  checkThis: function() {
    console.log(this);
    function checkAgain() {
      console.log(this);
    }
checkAgain();   } }

asim.checkThis();

A 
// Object
// Window

or, in Strict mode:

// Object
// undefined

A way around this is to assign a reference to your this variable:

var asim = {
  checkThis: function() {
    var that = this;
console.log(that);
    function checkAgain() {
      console.log(that);
    }
checkAgain();   } }

asim.checkThis();

// Object
// Object
21
Q

How do call and () relate to one another?

A

() is just call with the current context passed in.

So…

asim = {
  logStuff: function(a,b,c) {
    console.log(this);
    console.log(a);
    console.log(b);
    console.log(c);
  }
}
asim.logStuff(1,2,3);
// Object
// 1
// 2
// 3
asim.logStuff.call(asim, 1, 2, 3);
// Object
// 1
// 2
// 3

or…

asim.logStuff.apply(asim, [1, 2, 3]);
// Object
// 1
// 2
// 3
22
Q

Why would you use apply instead of call?

A

You would use apply instead of call when the number of arguments is variable.

23
Q

How do you create a new object with another object as its prototype?

A

var lion = Object.create(animal);

24
Q

What is the difference between classical and prototypal inheritance?

A

In classical languages, the class is a blueprint for how to build an object. In prototypal languages, new objects are built on the back of the existing prototype.

This is confusing, because there’s the psuedo-classical pattern in JavaScript, which looks like class based inheritance, but is really just sugar on top of prototypal inheritance.

25
Q

What is the constructor pattern?

A

Pseudo-classical inheritance.

function Person(first_name, last_name) {
  this.first_name = first_name;
  this.last_name = last_name;
}

Person.prototype.full_name = function() {
return this.first_name + ‘ ‘ + this.last_name;
}

var dude = new Person(‘asim’, ‘hussain’);

26
Q

How do you implement private variables with the constructor pattern?

A 
function Person(first_name, last_name) {
  this.full_name = function() {
    return first_name + ' ' + last_name;
  }
}

var dude = new Person(‘asim’, ‘hussain’);

first_name and last_name are now inside the closure of the constructor and can’t be modified. The downside to this is that by moving the functions that access those variables off of the prototype we’ll use additional memory for every instance of the class.

27
Q

How do you extend a class using the constructor pattern?

A

“use strict”;

function Person(first, last) {
    this.first = first;
    this.last = last;
}

Person.prototype.full_name = function() {
return this.first + ‘ ‘ + this.last;
}

function Professional(honorific, first, last) {
    Person.call(this, first, last);
    this.honorific = honorific;
}

Professional.prototype = Object.create(Person.prototype);

Professional.prototype.professional_name = function() {
return this.honorific + ‘ ‘ + this.first + ‘ ‘ + this.last;
}

var dude = new Professional(‘Dr’, ‘Asim’, ‘Hussain’);

28
Q

How does the prototype pattern work?

A

Instead of using constructor functions, we just extend objects with Object.create()

var Person = {
  init: function(first_name, last_name) {
    this.first_name = first_name;
    this.last_name = last_name;
    return this;
  },
  full_name: function() {
    return this.first_name + ' ' + this.last_name;
  }
}
var asim = Object.create(Person);
asim.init('Asim', 'Hussain');
29
Q

How can you use a factory instead of an init function in the prototype pattern?

A 
var Person = {
  full_name: function() {
    return this.first_name + ' ' + this.last_name;
  }
}
function PersonFactory(first_name, last_name) {
  var person = Object.create(Person);
  person.first_name = first_name;
  person.last_name = last_name;

return person;
}

var asim = PersonFactory(‘Asim’, ‘Hussain’);

30
Q

How can you chain prototypes using the prototype pattern?

A

Simply by extending the prototype with Object.create.

var Person = {
  init: function(first_name, last_name) {
    this.first_name = first_name;
    this.last_name = last_name;
    return this;
  },
  full_name: function() {
    return this.first_name + ' ' + this.last_name;
  }
}

var Professional = Object.create(Person);

Professional.init = function(honorific, first_name, last_name) {
Person.init.call(this, first_name, last_name);
this.honorific = honorific;
};

Professional.professional_name = function() {
return this.honorific + ‘ ‘ + this.first_name + ‘ ‘ + this.last_name;
}

var asim = Object.create(Professional);
asim.init('Mr.', 'Asim', 'Hussain');
31
Q

What is CORS?

A

Cross Origin Resource Sharing - Allows you to break the Same Origin Policy and request content or actions from a server with a different origin.

For Put, Post, Delete, etc:

32
Q

How does CORS work for a GET requeset?

A
  • From visiting moo.com a request is sent from the browser to foo.com with the Origin header set to moo.com
  • The response from foo.com comes back with the Access-Control-Allow-Origin header set to moo.com or *
  • If not, the response is blocked by the browser
33
Q

How does CORS work for a PUT, POST, DELETE, etc?

A
  • From visiting moo.com, a Pre-Flight Options request is sent to foo.com with the Origin set to moo.com, and the Access-Control-Request-Method header set to Put, Post, Delete, or whatever you want to do.
  • Foo.com responds with Access-Control-Allow-Origin set to moo.com or *, and the Access-Control-Allow-Methods set to Put, Post, Delete or whatever other methods are allowed.
  • Then moo.com issues its Put request with the origin set to moo.com, and foo.com responds with it’s Access-Control-Allow-Origin set to moo.com or *
34
Q

What is JSONP?

A

JSONP takes advantage of browsers having no restriction on the origin of scripts, so you can request JSON from another server and it will send you a function call with the JSON as a parameter. A poor man’s GET request.

So, for instance, on your site your would create a function:

function callBack(JSON) {
  console.log(JSON);
}

and then include a script tag asking for the JSON you want:

Which would return something like:

callBack({
some: ‘sweet JSON’,
and: ‘It’s sweet function call’
});

35
Q

What is the difference between event bubbling and event capturing?

A

When a click event takes place there’s an initial events capturing phase that bubbles from the body element down to the button or where the click took place, and then an event bubbling phase were the event travels from what was clicked back up to the body element.

By default, event listeners operate on the bubbling phase, so:

node.addEventListener(‘click’, function() { console.log(node); });

will capture bubbling.

But! if you add an additional argument:

node.addEventListener(‘click’, function() { console.log(node); }, true);

It will instead trigger on the capture phase.

36
Q

What does event.stopPropagation() do?

A

It prevents the event from moving any further through the event capture or event bubbling phase.

37
Q

What does event.preventDefault() do?

A

It prevents the default action from taking place on whatever element the event listener is placed on.

JavaScript (10 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions