Skip to content

Latest commit

 

History

History
311 lines (192 loc) · 5.6 KB

01_JavaScript101.md

File metadata and controls

311 lines (192 loc) · 5.6 KB

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': 'chloe@test.com'
}
    • 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': 'chloe@test.com'
}

OBJ['e-mail']