
![Javascript lexical scoping](what-javascript-lexical-scope.png)

## Introduction

JavaScript scope is basically the accessibility of variables or values within specific sections of your code during its execution. This is to provide security, reduce errors and make your code predictable, which is a principle applied to most programming paradigms (aka Principle of Least Privilege).

### There are two types of scope in JavaScript:

- Global Scope
- Block/Function Level Scope

## Global Scope

Just as the name implies, values or variables declared within this scope are available throughout the code and can be accessed anywhere.

**See an example below**

```js
let name = 'Fortune';
let age = 22;

function func() {
  // Both name and age can be accessed here
  console.log(`The name is ${name}, and I'm ${age} years old`);
}

func(); // -> 'The name is Fortune, and I'm 22 years old'
```

The code above shows that the variables name and age are declared in the global scope, which makes them accessible everywhere including inside the function called `func`.

The global scope can be the window or document object of your browser, it can also be the process object on a Node.js environment.

## Block/Function Level Scope

This is also called the local scope, values or variables declared within a function cannot be accessed outside that function.

Even though functions can access variables in their outer scope, the reverse is not the case. Any value or variable that is not declared within a function is a global variable and can be accessed anywhere in that program file.

**Example**

```js
let name = 'Fortune';

function func() {
  let age = 22;
  console.log(name, age);
}

func(); // 'Fortune 22'

// Accessing age here throws
console.log(age); // Uncaught ReferenceError: age is not defined

/**
 * Variable declared without the var, let or const keyword
 * gets thrown into the function's outer scope
 */
function withoutVarLetOrConst() {
  out = 'Acessible within the outer scope';
}
withoutVarLetOrConst();
console.log(out); // -> 'Accessible within the outer scope'

// Variable "name" can be changed within a function scope
function changeName() {
  name = 'Rose';
}
// Calling the function modifies the global variable "name"
changeName();

console.log(name); // -> 'Rose'
```

The variable age was declared within the `func` function which means it cannot be accessed anywhere outside that function.

However, it’s worth noting that variables declared within a function without the `var`, `let` or `const` keywords becomes accessible from the outer scope when that function is called as seen with the `out` variable above.

Also, global variable values defined without the `const` keyword can be changed within a local scope by just reassigning that variable, as shown in the function `changeName` which changes the value of the global variable `name`.

Most developers consider setting variables within the global scope as a bad practice as it leads to confusions and makes fixing bugs difficult.

## Block Statements

Blocks statements are `if`, `switch`, `for` and `while` loops, variables declared within them using the `var` can be accessed from their outer scope. When I create a variable with the `var` keyword within a block statement such as `if`, then that variable is also accessible from the outer scope.

A block statement is not a scope but if a variable is declared with the [ES6](https://www.w3schools.com/js/js_es6.asp) `let` or `const` keywords, then it's only accessible within that block statement.

**Example**

```js
for (var i = 1; i <= 5; i++) {
  console.log('Number: ' + i);
}

// variable i is accessible here
console.log(i); // -> 6 - which is the last value of i incremented by 1

/**
 * However, using the ES6 let or const keyword to declare the variable
 * makes it behave like a scope as it's only accessible within the for
 * loop block.
 */
for (let x = 1; x <= 5; x++) {
  console.log('Number: ' + x);
}

// Access variable j outside the block throws
console.log(x); // -> ReferenceError: x is not defined
```

The variable `i` defined with the `var` keyword within the first `for` loop block is accessible within its surrounding scope (The global scope in this case), but using the `let` or `const` keyword prevents that as seen in the second `for` loop block.

## Hoisting

Consider the code below

```js
console.log(age); // -> undefined
var age = 22;
console.log(age); // -> 22

console.log(location); // throws -> Uncaught ReferenceError: location is not defined
location = 'Lagos, Nigeria';
```

I tried to log `age` before assigning it to a value but I got `undefined` and not an error as you'd expect. This is so because when a variable is declared with the `var` keyword then that variable is automatically initialised to `undefined` and by default hoisted to the top of its available scope.

The JavaScript engine sort of restructures the code behind the scenes before execution, which mean it first declares the variables right before they're assigned a value.

However, variables declared without the `var`, `let` or `const` keywords are not hoisted as is the case with the `location` variable in the example code above.

On the other hand, functions are hoisted a little differently from variables.

Consider the code below.

```js
console.log(func1);
console.log(func2);

let func1 = function () {
  // do something
};

function func2() {
  // do another thing
}
```

The first function `func1` is initialized to `undefined` just as expected but `func2` is hoisted in its entirety, which means that it’s completely accessible right at the top unlike `func1` which is only but `undefined` at the top.

In a given Javascript turn, functions are initialized first before variables, the JavaScript engine parses all the syntax, allocates memory to the functions first then the variables. Hence, making `func2` accessible before it was defined.

## Conclusion

Understanding how the JavaScripts scope works will improve the efficiency of your code and help you track bugs easily. I really hope this article has helped you understand it much better.

If you spot something that needs correction or better explanation, please tweet me @fortune_ik.

Checkout my article on how [the concept of `this` keyword works](/blog/understanding-the-rules-of-the-this-keyword-in-javascript).

Happy Coding!


What is JavaScript lexical scope?


To properly understand how the `this` keyword works in JavaScript you first need to understand its rules, and in this post I’ll go over them with some examples.

For better explanation, I've written most of the example code in ES5.

## Rule #1

When an object is called with a `new` keyword the value of `this` becomes an empty JavaScript object (`{}`)

```js
// Rule #1 example
function RuleOne() {
  this.value = 'Some value for rule #1';
  this.printValue = function () {
    console.log('Rule one value >>>>', this.value);
  };
}

// using the new keyword here creates a brand new object for "this"
const ruleOneInstance = new RuleOne();
ruleOneInstance.printValue();

// without the "new" keyword here, no new object is created for "this"
// and whatever "this" value is has no "printValue" method
const anotherRuleOneInstance = RuleOne();

anotherRuleOneInstance.printValue(); //->TypeError:Cannot read property 'printValue' of undefined
```

In the example above, I created a class function with a constructor that initializes a property called `value` and a method called `printValue`.

When the instance of the `RuleOne` class is created with the `new` keyword the value of the `this` becomes an empty object (`{}`) thereby allowing us to set the initializations (`value` and `printValue`) and when we call the method printValue we get the expected output.

But when the instance is created without the `new` keyword the value of `this` is the global `this` value where the instance is created.

## Rule #2

When a method/function is called with `bind`, `apply` or `call` the value of `this` becomes the argument object that was passed to them.

```js
// Rule #2 example
function RuleTwo() {
  this.value = 'Some value for rule #2';
  this.printValue = function () {
    console.log('Rule two value >>>>', this.value);
  };
}

const ruleTwoInstance = new RuleTwo();

// Original value of 'this' used here
ruleTwoInstance.printValue();

// Bounded value is used here
ruleTwoInstance.printValue.bind({ value: 'Bound value' })();
```

In the example above I used `bind` to alter the value of `this` which is passed as an object into `bind` and invoked afterward. This can also be done with `apply` or `call`.

## Rule #3

When a method/function is called with a dot (`.`) notation the value of `this` becomes the caller object by the left, as in `person.sing()` here, the value of `this` to `sing()` becomes the `person` object.

```js
// Rule #3 example
function RuleThree() {
  this.value = 'Some value for rule #3';
  this.printValue = function () {
    console.log('Rule three value >>>>', this.value);
  };
}

const ruleThreeInstance = new RuleThree();
const ruleThreePrintValue = ruleThreeInstance.printValue;
ruleThreePrintValue();
```

The value of `this` passed to `printValue` is the `ruleThreeInstance` object.

## Rule #4

When a function is called as a free function invocation (FFI) the value of `this` becomes the global object (ie. the `window` object in a browser environment or the `process` object in a node server environment)

```js
// Rule #4 example
this.value = 'Some value';

function ruleFour() {
  console.log('Rule four value >>>>', this.value);
}

// Refers to the global "this" value
ruleFour();
```

## Rule #5

When two or more of these rules apply, the higher rule takes precedence.

```js
// Rule #5 example
function RuleFive() {
  this.value = 'Some value for rule #5';
  this.printValue = function () {
    console.log('Rule five value >>>>', this.value);
  };
}

const ruleFiveInstance = new RuleFive();

/**
 * Rule #2 call method takes precedence here
 * even though dot notation of rule #3 applies
 */
ruleFiveInstance.printValue.call({ value: 'Another bounded val' });

// Rule #1 new keyword takes precedence even tho rule #3 applies
new ruleFiveInstance.printValue();
```

## Rule #6

The birth of ES6 arrow functions introduced the 6th rule which is:
When a method/function is defined with an arrow function it copies the value of `this` into its immediate surrounding scope ignoring all of the rules above.

```js
// Rule #6 example (arrow functions)
function RuleSix() {
  this.value = 'Some value for rule #6';
  this.printValue = () => {
    console.log('Rule six value >>>>', this.value);
  };
}

const ruleSix = new RuleSix();
const printRuleSixVal = ruleSix.printValue;

// the this of parent scope is still in use unlike in RuleThree eg
printRuleSixVal();
```

## Conclusion

Thanks for reading, if you find anything confusing or need me to clarify/correct something please send me a tweet via [@fortune_ik](https://twitter.com/@fortune_ik)


Understanding the rules of the "this" keyword in JavaScript


![SSH](ssh.jpeg)

To setup a Github SSH connection these two things must be done

- Generate SSH public and private keys
- Add the generated public key to Github

## Generate SSH public and private keys

To set up SSH we first need to generate the keys for our local computer and we do that via the command line terminal.

Open up the command line and type the following command into the terminal and press enter .

```sh
cd ~/.ssh
```

This navigates you to a private directory called .ssh on your computer, most of the time these keys are generated for us already and to confirm that we type `ls` and press enter to see the content of the directory.

If you already have these keys generated you should see the files similar to `id_rsa` and `id_rsa.pub`.

However, if you don't already have the keys or the .ssh dirctory then you should create it using the following command.

```sh
mkdir ~/.ssh && cd ~/.ssh
```

The command above will create an `.ssh` private directory and navigate into it.

Next, we’ll generate the public and the private keys using the following command

```sh
ssh-keygen -C “youremail@whatever.com”
```

This will prompt you to enter a name and path to save the keys but you can just press enter to use a default name (`id_rsa`) and the `.ssh` private directory as the path.

The next prompt will ask you to enter a passphrase which is optional and you can leave it empty pressing enter a couple of times.

## Add SSH public key to Github

Now that we have the keys generated ie. the `id_rsa` which is the private key that should never be shared with anyone and the `id_rsa.pub` which is the public that can be shared, and this is the one we’ll be adding to our Github account.

Use the following command to copy the public key.

```sh
pbcopy < ~/.ssh/id_rsa.pub
```

The public key will be copied to the clipboard and we can head over to Github.

Log into your Github account and navigate to the [settings](https://github.com/settings/profile) page from your profile at the top right corner. See attached screenshot

![Github settings](github-1.png)

On the settings click on the [SSH and GPG key](https://github.com/settings/keys) from the sidebar navigation. See attached screenshot

![SSH and GPG key](github-2.png)

Click on the on the button new SSH key, fill out the title field eg. Personal Macbook then paste the key you copied earlier from the terminal in the key field and click the button Add SSH key, and voila! You’re done.

Going forward you’ll no longer be required to enter your password when you're pushing or pulling from a repository you have rights to provided the repository is cloned with ssh and not HTTP.

If you're **NOT** interested in the more geeky stuff about SSH then you should **STOP READING HERE**.

## What SSH (Secure Shell) is

Secure shell (SSH) is a protocol just like HTTP, FTP, etc. It is basically a way for computers to communicate with one another in a more secure way. With SSH you can remotely execute commands, move and copy files around from another computer, mostly by using the terminal (shell).

The significant advantage of SSH over other protocols is it offers the use of encryption to provide a way to securely transfer data from one computer to another.

## SSH is designed using these three main techniques

1. **Symmetric Encryption:**

   This is basically a way for data sent between a client (your local computer) and a server (a remote computer) to be encrypted such that it can only be decrypted and read by either of both computers using a secret key that is shared between the client and the server. If the secret key gets into the public then all the encrypted data is compromised because it can be decrypted and read by anybody and that is the challenge with Symmetric encryption. However, the exchange of this secret key is done using a **key exchange algorithm** to ensure it’s security.

2. **Asymmetric Encryption:**

   This is needed by the key exchange algorithm, and unlike the symmetric encryption, for the client and the server to initiate a connection they both have to generate a private and a public key, the private key is only specific to its computer and is never shared while the public key can be shared. It is based on the Diffie Hellman’s key exchange algorithm which basically uses bits of information from the public and private keys to encrypt and decrypt data between both computers. The private and the public key both work hand in hand, this is to say that a message that was encrypted by a client’s public key can only be decrypted by the same client’s private key which was never ever shared with anyone. More on Diffie Hellman’s key exchange algorithm [here](https://www.youtube.com/watch?v=NmM9HA2MQGI) and [here](https://www.khanacademy.org/computing/computer-science/cryptography/modern-crypt/v/diffie-hellman-key-exchange-part-2).

3. **Hashing:**

   This is a form of cryptography that is used in SSH and so far we can deduce that SSH uses both symmetric and asymmetric encryption, asymmetric encryption is mostly used to share the keys and because it’s more time consuming it happens once during initialization but going forward it uses the symmetric encryption for further communication because it’s fast. So to further ensure a secure communication with the symmetric encryption hashing is used to verify the authentication of the messages between both computers. More on hashing [here](https://www.youtube.com/watch?v=2BldESGZKB8) and [here](https://www.youtube.com/watch?v=t21O-EiwzKI)


What is JavaScript lexical scope?

Understanding the rules of the "this" keyword in JavaScript

How to setup Github SSH connection