Section 2: Base Syntax & Features - Diving Right Into JavaScript

The goals

💪🏻Dive into Core Syntax

✌🏻Understand Variables & Data Types

👍🏻Work with Operators

👏🏻Explore & Use Functions

 

Variables & Constants

Var

Before the advent of ES6, var declarations ruled. There are issues associated with variables declared with var, though. That is why it was necessary for new ways to declare variables to emerge. First, let's get to understand var more before we discuss those issues.

Scope of var

Scope essentially means where these variables are available for use. var declarations are globally scoped or function/locally scoped.

The scope is global when a var variable is declared outside a function. This means that any variable that is declared with var outside a function block is available for use in the whole window.

var is function scoped when it is declared within a function. This means that it is available and can be accessed only within that function.

To understand further, look at the example below.

    var greeter = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }

Here, greeter is globally scoped because it exists outside a function while hello is function scoped. So we cannot access the variable hello outside of a function. So if we do this:

    var tester = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined

We'll get an error which is as a result of hello not being available outside the function.

var variables can be re-declared and updated

This means that we can do this within the same scope and won't get an error.

    var greeter = "hey hi";
    var greeter = "say Hello instead";

and this also

    var greeter = "hey hi";
    greeter = "say Hello instead";

Hoisting of var

Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution. This means that if we do this:

    console.log (greeter);
    var greeter = "say hello"

it is interpreted as this:

    var greeter;
    console.log(greeter); // greeter is undefined
    greeter = "say hello"

So var variables are hoisted to the top of their scope and initialized with a value of undefined.

Problem with var

There's a weakness that comes with  var. I'll use the example below to explain:

    var greeter = "hey hi";
    var times = 4;

    if (times > 3) {
        var greeter = "say Hello instead"; 
    }
    
    console.log(greeter) // "say Hello instead"

So, since times > 3 returns true, greeter is redefined  to "say Hello instead". While this is not a problem if you knowingly want greeter to be redefined, it becomes a problem when you do not realize that a variable greeter has already been defined before.

If you have used greeter in other parts of your code, you might be surprised at the output you might get. This will likely cause a lot of bugs in your code. This is why let and const are necessary.

 

Let

let is now preferred for variable declaration. It's no surprise as it comes as an improvement to var declarations. It also solves the problem with var that we just covered. Let's consider why this is so.

let is block scoped

A block is a chunk of code bounded by {}. A block lives in curly braces. Anything within curly braces is a block.

So a variable declared in a block with let  is only available for use within that block. Let me explain this with an example:

   let greeting = "say Hi";
   let times = 4;

   if (times > 3) {
        let hello = "say Hello instead";
        console.log(hello);// "say Hello instead"
    }
   console.log(hello) // hello is not defined

We see that using hello outside its block (the curly braces where it was defined) returns an error. This is because let variables are block scoped .

let can be updated but not re-declared.

Just like var,  a variable declared with let can be updated within its scope. Unlike var, a let variable cannot be re-declared within its scope. So while this will work:

    let greeting = "say Hi";
    greeting = "say Hello instead";

this will return an error:

    let greeting = "say Hi";
    let greeting = "say Hello instead"; // error: Identifier 'greeting' has already been declared

However, if the same variable is defined in different scopes, there will be no error:

    let greeting = "say Hi";
    if (true) {
        let greeting = "say Hello instead";
        console.log(greeting); // "say Hello instead"
    }
    console.log(greeting); // "say Hi"

Why is there no error? This is because both instances are treated as different variables since they have different scopes.

This fact makes let a better choice than var. When using let, you don't have to bother if you have used a name for a variable before as a variable exists only within its scope.

Also, since a variable cannot be declared more than once within a scope, then the problem discussed earlier that occurs with var does not happen.

Hoisting of let

Just like  var, let declarations are hoisted to the top. Unlike var which is initialized as undefined, the let keyword is not initialized. So if you try to use a let variable before declaration, you'll get a Reference Error.

 

Const

Variables declared with the const maintain constant values. const declarations share some similarities with let declarations.

const declarations are block scoped

Like let declarations, const declarations can only be accessed within the block they were declared.

const cannot be updated or re-declared

This means that the value of a variable declared with const remains the same within its scope. It cannot be updated or re-declared. So if we declare a variable with const, we can neither do this:

    const greeting = "say Hi";
    greeting = "say Hello instead";// error: Assignment to constant variable. 

nor this:

    const greeting = "say Hi";
    const greeting = "say Hello instead";// error: Identifier 'greeting' has already been declared

Every const declaration, therefore, must be initialized at the time of declaration.

This behavior is somehow different when it comes to objects declared with const. While a const object cannot be updated, the properties of this objects can be updated. Therefore, if we declare a const object as this:

    const greeting = {
        message: "say Hi",
        times: 4
    }

while we cannot do this:

    greeting = {
        words: "Hello",
        number: "five"
    } // error:  Assignment to constant variable.

we can do this:

    greeting.message = "say Hello instead";

This will update the value of greeting.message without returning errors.

Hoisting of const

Just like let, const declarations are hoisted to the top but are not initialized.

So just in case you missed the differences, here they are:

• var declarations are globally scoped or function scoped while let and const are block scoped.
• var variables can be updated and re-declared within its scope; let variables can be updated but not re-declared; const variables can neither be updated nor re-declared.
• They are all hoisted to the top of their scope. But while var variables are initialized with undefined, let and const variables are not initialized.
• While var and let can be declared without being initialized, const must be initialized during declaration.

 

Variable Naming

Allowed

let username;

-> Best Practice: camelCase

let ageGroup5; 

-> only letters and digits

let $kindOfSpecial;

-> Starting with $ is allowed

let _internalValue;

-> Starting with _ is allowed

 

Not Allowed / Not Recommended

let user_name;

-> Allowed but bad practice

let 21Players;

-> Starting digits not allowed

let user-b;

-> No special characters!

let let;

-> Keywords not allowed

 

Operators

Mathmatical

+: Add two numbers

-: Subtract two numbers

x: Multiply two numbers

/ : Divide two numbers

%: Divide two numbers, yield remainder

**: Exponentiation (e.g. 2**3 = 8)

 

=: Assign value to variable

+=, -=, ... : Perform calculation and re-assign result to variable

++, --: Increment / Decrement variable value + re-assign

 

 

Template Literals

Template literals are literals delimited with backtick (`) characters, allowing for multi-line strings, string interpolation with embedded expressions, and special constructs called tagged templates.

Template literals are sometimes informally called template strings, because they are used most commonly for string interpolation (to create strings by doing substitution of placeholders). However, a tagged template literal may not result in a string; it can be used with a custom tag function to perform whatever operations you want on the different parts of the template literal.

Syntax

`string text`

`string text line 1
 string text line 2`

`string text ${expression} string text`

tagFunction`string text ${expression} string text`

 

 

JavaScript Variable Scope

Scope determines the accessibility (visibility) of variables.

JavaScript has 3 types of scope:

• Block scope
• Function scope
• Global scope

Block Scope

Before ES6 (2015), JavaScript had only Global Scope and Function Scope.

ES6 introduced two important new JavaScript keywords: let and const.

These two keywords provide Block Scope in JavaScript.

Variables declared inside a { } block cannot be accessed from outside the block:

Example

{
  let x = 2;
}
// x can NOT be used here

Variables declared with the var keyword can NOT have block scope.

Variables declared inside a { } block can be accessed from outside the block.

Example

{
  var x = 2;
}
// x CAN be used here

 

Local Scope

Variables declared within a JavaScript function, become LOCAL to the function.

Example

// code here can NOT use carName

function myFunction() {
  let carName = "Volvo";
  // code here CAN use carName
}

// code here can NOT use carName

 Since local variables are only recognized inside their functions, variables with the same name can be used in different functions.

Local variables are created when a function starts, and deleted when the function is completed.

 

Function Scope

JavaScript has function scope: Each function creates a new scope.

Variables defined inside a function are not accessible (visible) from outside the function.

Variables declared with var, let and const are quite similar when declared inside a function.

They all have Function Scope:

function myFunction() {
  var carName = "Volvo";   // Function Scope
}
function myFunction() {
  let carName = "Volvo";   // Function Scope
}

 

 

“그림자(Shadow) 변수”

로컬("함수 내부") 변수와 전역 변수에 대해 배웠습니다.

다음의 코드를 실행하면 어떻게 될까요?

let userName = 'Max';
function greetUser(name) {
  let userName = name;
  alert(userName);
}
userName = 'Manu';
greetUser('Max');

사실 이 코드를 실행하면 'Max'('Manu'가 아닌)라는 경고가 표시될 겁니다.

userName을 두 번 이상 사용하고 선언해서 오류가 발생한 것이라 생각하셨을 수도 있습니다 - 그리고 배우신 바와 같이, 이는 허용되지 않죠.

이는 실제로 동일한 수준/동일한 범위에서는 허용되지 않습니다.

다음의 코드도 작동하지 않을 겁니다.

let userName = 'Max';
let userName = 'Manu';

왜 처음 코드 스니펫은 작동을 했을까요?

아래의 코드로

먼저 전역 변수 userName을 생성하기 때문입니다.

let userName = 'Max';

 그러나 그런 다음에는, 전역 수준에서는 이를 다시 선언하지 않습니다(허용되지 않음).

함수 내에서만 다른 변수를 선언하죠. 그러나 함수의 변수는 자체 범위를 갖기 때문에 JavaScript는 "섀도잉"이라는 작업을 수행합니다.

이 작업은 다른 범위에 새 변수를 생성합니다 - 이런 변수는 전역 변수를 덮어쓰거나 제거하지 않습니다 - 둘은 공존하죠.

그러면 greetUser 함수 내에서 userName을 참조할 때 항상 로컬 섀도우 변수를 참조합니다. JavaScript는 해당 지역 변수가 존재하지 않는 경우에만 전역 변수로 폴백합니다.

 

 

We can't return more than one data in one function!

 

 

 

“간접적” vs “직접적” 함수 실행 - 요약

 

함수를 실행하는 데에 두 가지 방법이 있는 것으로 보여 혼란스러우실 수 있습니다.

1. function add() {
2. something = someNum + someOtherNum;
3. }

add() vs add

왜 이러한 "두 가지 방법"이 있는지를 이해하는 것이 중요합니다!

보통, 이름으로 정의된 함수(예: add)를 호출할 때 괄호를 추가합니다. (함수가 필요한 모든 매개변수가 괄호 안에 들어가거나 위의 예시처럼 매개변수가 필요하지 않은 경우 빈 괄호를 추가합니다).

=> add()

이게 바로 코드의 함수를 실행하는 방법입니다. JavaScript는 이 문장이 나올 때마다 함수의 코드를 실행합니다. 이상입니다!

하지만 가끔은, 함수를 바로 실행하고 싶지 않을 때가 있습니다. JavaScript에 미래의 어느 시점에(예: 일부 이벤트가 발생할 때) 어떤 기능이 실행되길 원할 수도 있습니다.

이 경우에 함수를 직접 호출하는 대신 JavaScript에 함수 이름을 제공합니다.

=> someButton.addEventListener('click', add);

이 스니펫은 JavaScript에게 이렇게 지시합니다. "이 버튼이 클릭되면 add를 실행해.".

someButton.addEventListener('click', add()); 는 이 경우에는 오답이 될 겁니다.

그 이유는 무엇일까요? JavaScript는 스크립트를 분석/실행하고 이벤트 리스너를 등록하는 즉시 add를 실행하기 때문입니다 - 괄호를 추가했기 때문이죠 => 위를 참조해 주세요. "함수를 실행해!".

아래와 같이 코드의 어딘가에 add를 추가하는 것만으로는 아무 효과가 없습니다.

1. let someVar = 5;
2. add
3. alert('Do something else...');

Why?

왜냐하면 함수의 이름만 있고 JavaScript에 다른 정보를 제공하지 않았기 때문입니다. 그러면 JavaScript는 그 함수 이름으로 무엇을 해야 하는지 알지 못해서("클릭이 발생할 때 실행해야 하나요? 어느 정도의 시간이 지나면? 모르겠습니다...") 그리고 결과적으로 JavaScript는 이 문장을 무시하게 됩니다.

 

 

 

 

 

 

 

Sources

https://www.freecodecamp.org/news/var-let-and-const-whats-the-difference/

Var, Let, and Const – What's the Difference?

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

Template literals (Template strings) - JavaScript | MDN

https://www.w3schools.com/js/js_scope.asp

JavaScript Scope