JavaScript Basics

Functions of JavaScript

• HTML & CSS

  • Define the structure and appearance of Web documents

• JavaScript

  • Defines the functionality of documents

ES2015 (ES6)

• Having solved many of JavaScript's chronic problems in ES2015, the standard has now been published up to ES2019

Vanilla JS (Pure JavaScript)

• Many libraries emerged for cross-browsing and convenient usage (most notably jQuery)

• Recent standardized browsers and the emergence of various tools after ES6 have increased the use of pure JavaScript

What Browsers Can Do

• Global object window

  • DOM manipulation

  • BOM manipulation

Node.js based on the V8 engine

Characteristics of JavaScript

1. It is a Script Language

   • Executed directly through an Interpreter

   • Easy Data type and type casting

   • Slower speed

   • Limited by the execution environment

     • Only works in programs that have a JavaScript Interpreter installed

1. It is a Functional Language

   • A method based on functions

   • Declarative programming

     • Can dynamically process HTML elements

   • First-class functions

     • Functions themselves can be used like data

   • Variable scope == Function scope

1. It is a completely different programming language from Java

   • Netscape licensed the Java name for marketing purposes

   • JavaScript == ECMA-262

1. It is not a beginner's language

   • While easy at the beginning of learning, it is powerful enough to build complex services

2. It is a Web standard

   • HTML5: HTML5 + CSS3 + JavaScript

   • HTML5 has a high dependency on JavaScript

JavaScript is well-suited for functional programming!!!

Pros of JavaScript

1. Programming is possible with just a text editor and a web browser

2. Easy to learn and use due to easy data types and type-casting

3. Testing written code is convenient because there is no compilation process

Data Types & Variables

JavaScript Syntax

JavaScript Basic Syntax

• Interpretation order

  • Interpreted and executed from top to bottom by the Interpreter

    • Interpreter

      : A program that converts a program written in a programming language into machine code

• Case sensitivity

  • Variables, methods, keywords, etc. must be entered with exact case distinction

  • HTML is not case-sensitive

• End of statement

• Whitespace and indentation

• Comments

Data Type Classification (typeof)

1. Primitive Types

Immutable values

• boolean

• null

• undefined

• number (NaN is also a number type)

• string

• symbol (ES6)

2. Object Types

• object: plain object, function, array

Data Type

Number

• It is not that the integer number system does not exist, but rather that there is no separate Integer Type

String

• Template strings

null vs undefined

• undefined

• null

  • When declared but no value has been assigned

  • typeof null => shows as object

Object

• In JavaScript, everything except primitive types is an object

• JavaScript objects are collections of properties consisting of keys and values

• Value == Function?

  • Called a method

Variable Scope

• Has function-level scope

• Variables declared inside a function are local variables, and the rest are used as global variables

• If a keyword (var) is not used when declaring a variable, it is implicitly set to global

  • Note: Created as a property of the global object (window), not a variable

    • It is not assigned to a variable but becomes window.global!

  • Always use a keyword!

Hoisting and let, const (ES6)

• In JavaScript, all declarations are hoisted

• The let and const keywords newly introduced in ES6 can prevent this

  • It is not that hoisting itself does not occur; var declares and initializes (undefined) simultaneously,

  • while let and const have separated declaration and initialization stages

• Has block-level scope

JavaScript Syntax

== vs ===

• Equality operator (==)

  • Value comparison and unexpected conversions

• Strict equality operator (===)

  • Strict equality

  • Type comparison

  • Same as Python's ==!

Conditional Statements

• else if

• {}

Loops

• {}

JavaScript Object

An object is a collection of properties consisting of keys and values

Basic Object Creation Methods

1. Object literal

   var cat1 = {}
   var cat2 = {name:'nero', age:3}

2. Object constructor function

   var dog1 = new Object()
   dog1.name = 'cherry'
   dog1.name = 5

Object Creation Methods

• When creating with an object literal, if the key can be expressed as a string, implicit type conversion occurs

  • If not, you must use quotes to make it a string!

  var OBJ = {
      name: 'chloe',
      'e-mail': '[e-mail]'
  }

  • Here, name undergoes implicit type conversion to a string!

• If you create and use a constructor function, you can create objects with identical properties like a class

  function Person(name, age){
      this.name = name;
      this.age = age
  }
  var p1 = new Person('chloe', 25)

Object Property Access

• Properties can be accessed with . or []

  • However, there are cases where you must use []

    • ex) When the key is not composed of a simple string

      var OBJ = {
          name: 'chloe',
          'e-mail': '[e-mail]'
      }
      
      OBJ['e-mail']