More about JavaScript closures

From my understanding closures is extremely important concept in JavaScript. Let’s learn it in details:

Closures are functions that refer to independent (free) variables (variables that are used locally, but defined in an enclosing scope). In other words, these functions ‘remember’ the environment in which they were created.

Lexical Scooping

Lexical scooping is a type of closure.

function init() {
var name = “Mozilla”; // name is a local variable created by init
function displayName() { // displayName() is the inner function, a closure
alert (name); // displayName() uses variable declared in the parent function
}
displayName();
}
init();

Here you can notice that init() has function inside. Then when init is called, that function is called too.

Git: how to use cherry pick using smartgit

If you have have multiple git branches and you have pushed your code to branch x, but you also want it to be available on other branch too ex.: branch Y, then perform following steps:

  1. Checkout the branch Y, the place where you want to push your code
  2. Then from toolbar above, Branch->Cherry Pick
  3. Click Branches, and un-select the Head. Then select the branch X. Choose the commit you want to add to branch Y.
  4. Select and press Cherry pick and commit
  5. then press Push
  6. Done

Now branch Y has commit from branch X.

Let’s learn JS! Reading the “JS Good Parts book”

I’ve decided to start learning Javascript because I want understand how it works.

Let’s start with Functions:

Function invocation:

In addition to the declared parameters, every function receives two additional parameters: this and arguments. The this parameter is very important in object oriented programming, and its value is determined by the invocation pattern. There are four patterns of invocation in JavaScript: the method invocation pattern, the function invocation pattern, the constructor invocation pattern, and the apply invocation pattern. The patterns differ in how the bonus parameter this is initialized.

Note: if too many or too little parameters passed to function they will be ignored or set to undefined. There is no type checking. Also this will not throw any runtime errors.

1.Method invocation pattern

// Create myObject. It has a value and an increment
// method. The increment method takes an optional
// parameter. If the argument is not a number, then 1
// is used as the default.
var myObject = {
value: 0,
increment: function (inc) {
this.value += typeof inc === ‘number’ ? inc : 1;
}
};
myObject.increment( );
document.writeln(myObject.value); // 1
myObject.increment(2);
document.writeln(myObject.value); // 3

2. Function invocation pattern

 

3. Constructor invocation pattern

 

4. Apply invocation pattern

 

JS: function inside () followed by (). ~ inside the if statment

if the function is inside the () and followed by () ex:

( fucntion(){

})

()

This means that we declared the function and run it immediately

~ inside if statement means “not”, and works similar to !. ex:
if(~tagsArray.indexOf(item)) {

something;
}

means if no items inside the array do something

JS lesson 2: CSS pseudo class

We can use CSS pseudo class to select items we need.

<select>
<optgroup>
<option selected>1</option>
<option>2</option>
<option>3</option>
</optgroup>
</select>
select option:selected === select > optgroup > option:selected

select option:myproperty  // this is wrong

Javascrint and Jquery way of finding elements
select option:first-child === $(select).find(option).first();
select option:last-child === $(select).find(option).first();

JS lesson 1: var self=this, $.extend, CSS selector

var self=this;

In JS ‘this’ refers to current object where it’s used. However, sometimes we want to use objects that are outside scope. In below example we will do just that:

Note: self is being used in manner of pointer to object that we need

var userItem = {
name: “Yan”,
init: function() {
var self = this; // this == userItem;
$(“#btn”).on(“click”, function(event) {
alert(this.name); // error: this == btn
alert(self.name); // self.name == btn
});
}
};
userItem.init();

JQuery $.extend

$.extend is used to clone add one object to another. This provides sort of expanding the target object with other object.

Object a:

var user = {
name: “Yan”,
address: “Clementi”
}

Object b:

var engineer = $.extent({}, user, {
level: “beginner”
});

Note: engineer now will have it’s on fields and fields from user.

Note2: $.extent({}, user, {——}); means that everything inside {——} and user will be cloned to empty object {} , later it will be assigned to engineer

engineer == {
name: “Yan”,
address: “Clementi”,
level: “beginner”
}

Note 3:  if we don’t use {} but use some other object, new object will be overwritten, see example below:

var manager = $.extent(user, engineer , {
salary: “1”
});

manager == user     // true

Note4: since JQuery api for $.extend overwrites the target, in our case it’s user here, then when we compare user==manager it’s true, because we assigned user with new fields to manager. https://api.jquery.com/jquery.extend/

 CSS selector

<X div class=”question question-enhanced another-class”>
    <X div class=”body”>
       <X div class=”options”>
           <X div id = #1 class=”option”>
           </div>
       </div>
   </div>
</div>
<X div class=”question”>
   <X div class=”body”>
      <X div id = #2 class=”option”>
      </div>
   </div>
</div>

Example1:   .question .body .option (e.g. .option) == #1 and #2
Example2:   .question > .body > .option == #2
Example3:   .question.question-enhanced .body

Note that there is space before . and another version doesn’t have space.
If there is space it means that class are on the same level, but if got no space before . means it belongs to that class. Here is the example

.question.question-enhanced .body          represents

<X div class=”question question-enhanced body”>

.question.question-enhanced.body             represents

<X div class=”question question-enhanced”>

<X div class=”<body”>  </div> </div>

https://www.w3schools.com/cssref/css_selectors.asp

#id   – selects specific id
.class  – selects specific class