JavaScript Series 1: Language Fundamentals

JavaScript Series 1: Language Fundamentals

"Code tailor" provides technical-related information and a series of basic articles for front-end developers. Follow the "Novices of Xiaohe Mountain" public account on WeChat to get the latest articles in time.

Preface

Before we start learning, what we want to tell you is that this article is correct

JavaScript
A summary of the "Language Fundamentals-Grammar and Variables" part of the language knowledge . If you have mastered the following knowledge items, you can skip this section and go directly to the exercises

  • JavaScript syntax
  • Declare variables and assign values

Summary

The first code

Start learning

JavaScript
Time, let s take a look
JavaScript
code show as below:

Console .log ( 'the JavaScript the Hello!' ) copying the code

Can you guess the result of this code? The operation of this code is to output the result in the console is

Hello JavaScript!
, Here the first piece of code is over.

JavaScript syntax

case sensitive

You need to know,

ECMAScript
Everything in is case sensitive. Whether it is a variable, function name, or operator, all are case sensitive. For example, the variable
XHS
And variables
xhs
Are two different variables.

Identifier

The so-called identifier is the name of a variable, function, attribute or function parameter. The identifier can consist of one or more of the following characters:

  • The first character must be a letter, underscore (
    _
    ) Or dollar sign (
    $
    );
  • The remaining characters can be letters, underscores, dollar signs, or numbers.

The letters in the identifier can be extended

ASCII (Extended ASCII)
The letters in can also be
Unicode
Alphabetic characters.

By convention,

ECMAScript
Identifiers use camel case, that is, the first letter of the first word is lowercase, and the first letter of each subsequent word is uppercase, such as:

xhsRookies xhsRookiesBoy Copy code

Although this writing method is not mandatory, but because this form is

ECMAScript
The built-in functions and objects have the same naming method, so it is considered a best practice.

Pay attention to keywords, reserved words,

true
,
false
with
null
Cannot be used as an identifier.

Code comment

JavaScript
There are two ways of commenting: single-line comments and multi-line comments.

The commented code will not be executed in the program

Single-line comments begin with two slash characters, such as:

//Single line comment copy code

Multi-line comments start with a slash and an asterisk (

/*
) Begins with their reverse combination (
*/
) At the end, such as:

/* This is multiple lines Comment*/ Copy code

Strict mode

ECMAScript 5
Added strict mode (
strict mode
)the concept of. Strict mode is a different
JavaScript
Parsing and executing the model,
ECMAScript 3
In this mode, some irregular writing will be handled, and errors will be thrown for unsafe activities. To enable strict mode for the entire script, add this line at the beginning of the script:

'use strict' Copy code

Although it looks like a string that is not assigned to any variable, it is actually a preprocessing instruction. Any support

JavaScript
The engine will switch to strict mode when it sees it. The purpose of choosing this grammatical form is not to destroy
ECMAScript 3
syntax.

You can also specify a function to execute in strict mode, as long as you put the preprocessing instruction at the beginning of the function body:

function doSomething () { 'use strict' //Function body } Copy code

Strict mode affects

JavaScript
In many aspects of implementation, all modern browsers support strict mode.

Statement

ECMAScript
The statement in ends with a semicolon. Omitting the semicolon means that the parser determines where the statement ends, as shown in the following example:

var sum = a + b //It is valid without a semicolon, but it is not recommended var diff = a-b //It is valid with a semicolon, it is recommended to copy the code

Even if the semicolon at the end of the statement is not required, it should be added. Remember to add a semicolon to help prevent problems caused by omission, for example, to avoid incomplete input. In addition, adding a semicolon also makes it easy for developers to compress the code by deleting blank lines (if there is no trailing semicolon, only deleting blank lines will cause syntax errors). Adding a semicolon can also help improve performance in some cases, because the parser will try to add a semicolon at the right place to correct grammatical errors.

Keywords and reserved words

ECMA-262
Describes a set of reserved keywords , these keywords have a special purpose, such as indicating the beginning and end of a control statement, or to perform a specific operation. According to regulations, reserved keywords cannot be used as identifiers or attribute names.

break do in typeof case else instanceof var catch export new void class extends return while const finally super with continue for switch yield debugger function this default if throw delete import try Copy code

The specification also describes a set of reserved words in the future , which cannot be used as identifiers or attribute names. Although reserved words have no specific purpose in the language, they are reserved for future use as keywords. The following is

ECMA-262
All vocabulary reserved for the future in the 6th edition.

Always keep:

enumcopy code

Reserved in strict mode

implements package public interface protected static let private Copy code

Keep in the module code

awaitCopy code

Declare variables and assign values

in

JavaScript
There are 3 keywords to declare variables:
var
,
const
with
let
. among them,
var
in
ECMAScript
Can be used in all versions of
const
with
let
Only in
ECMAScript 6
(You will learn later) and later versions.

var keyword

To define variables, you can use

var
Keyword, followed by variable name:

var xhsRookiesCopy code

This line of code defines a file named

xhsRookies
The variable, you can use it to store any type of value.
ECMAScript
Realize variable initialization, so you can define the variable and set its value at the same time:

var xhsRookies = 'Hi' duplicated code

xhsRookies
Is defined as a saved string value
hi
Variables. Initializing a variable like this will not identify it as a string type, just a simple assignment. Later, not only can the saved value be changed, but also the type of the value:

var xhsRookies = 'hi' xhsRookies = 100 //legal, but copying code is not recommended

In this example, the variable

xhsRookies
Is first defined as a saved string value
hi
The variable is then rewritten to save the value
100
. Although it is not recommended to change the type of the variable saved value, this is
ECMAScript
Medium is completely effective.

1. Var declaration scope

use

var
The variable defined by the operator becomes the local variable of the function containing it. For example, use
var
Defining a variable inside a function means that the variable will be destroyed when the function exits:

function xhsTest () { var xhsRookies = 'hi' //local variables } xhsTest() console .log(xhsRookies) //Error! Copy code

Here,

xhsRookies
Variables are used inside the function
var
Defined. The function is called
xhsTest()
, Calling it will create this variable and assign a value to it. The variable is destroyed immediately after the call, so the last line in the example will cause an error. However, omit when defining variables in the function
var
Operator, you can create a global variable:

function xhsTest () { xhsRookies = 'hi' //global variables } xhsTest() Console .log (xhsRookies) //"hi" Copy the code

Remove the previous

var
after that,
xhsRookies
It becomes a global variable. Just call the function once
xhsTest()
, This variable will be defined and can be accessed outside the function.

Although it is possible to define global variables by omitting the var operator, this is not recommended. Global variables defined in the local scope are difficult to maintain and can cause confusion.

If you need to define multiple variables, you can separate each variable with a comma (and optional initialization) in one statement:

var xhsRookies = 'hi' , xhsFound = false , = xhsNumber 29 duplicated code

3.variables are defined and initialized here.

2. Var declaration promotion

use

var
When, the following code will not report an error. This is because variables declared with this keyword will automatically be promoted to the top of block scope 5:

{ console .log(xhsNumber) //undefined var xhsNumber = 26 } Copy code

The reason why no error is reported is because

ECMAScript
Think of it as equivalent to the following code at runtime:

{ var xhsNumber console .log(xhsNumber) //undefined xhsNumber = 26 } Copy code

This is the so-called "enhancement" (

hoist
), that is, pull all variable declarations to the top of the block scope.

let statement

let
with
var
The effect is similar, but there are very important differences. The most obvious difference is that
let
The declared scope is block scope, and
var
The declared scope is the function scope.

{ var xhsRookies = 'xhs-rookies' console .log(xhsRookies) //xhs-rookies } Console .log (xhsRookies) //Rookies XHS- duplicated code
{ let xhsNumber = 26 console .log(xhsNumber) //26 } Console .log (xhsNumber) //ReferenceError: xhsNumber not defined copy the code

it's here,

xhsNumber
The reason why a variable cannot be referenced outside the scope of a block is because its scope is limited to the inside of the block. Block scope is a subset of function scope, so it is suitable for
var
The scope restriction of also applies to
let
.

let
Redundant declarations in the same block scope are also not allowed. This will cause an error:

var xhsRookies var xhsRookies the let xhsNumber the let xhsNumber //SyntaxError; identifier xhsNumber has declared a copy of code

of course,

JavaScript
The engine will record the identifier used for variable declaration and the scope of the block in which it is located, so nested use of the same identifier will not report an error, and this is because there is no duplicate declaration in the same block:

var xhsRookies = 'xhs-rookies' console .log(xhsRookies) //'xhs-rookies' { var xhsRookies = 'xhs-rookies-boy' console .log(xhsRookies) //'xhs-rookies-boy' } let xhsNumber = 30 console .log(xhsNumber) //30 { let xhsNumber = 26 console .log(xhsNumber) //26 } Copy code

Redundant reporting of statements will not be mixed

let
with
var
And affected. These two keywords do not declare different types of variables, they just indicate how the variable exists in the relevant scope.

var xhsRookies the let xhsRookies //SyntaxError the let xhsNumber var xhsNumber //SyntaxError duplicated code

1. Global declaration

versus

var
The keywords are different, use
let
Variables declared in the global scope will not become
window
Object attributes (
var
The declared variable will be).

var xhsRookies = 'xhsRookies' console.log(window.xhsRookies) //'xhsRookies' let xhsNumber = 26 console.log(window.xhsNumber) //undefined

let
SyntaxError

2. let

let
:

{ var xhs = 5 } console.log(xhs) //5

let
let
:

{ let xhs = 0 } console.log(xhs) //ReferenceError: xhs

const

const
let
const

const xhsNumber = 26 xhsNumber = 36 //TypeError: //const const xhsRookies = 'xhs-rookies' const xhsRookies = 'xhs-rookies-boy' //SyntaxError //const const xhsRookies = 'xhs-rookies' console.log(xhsRookies) //xhs-rookies

  1. ( )
  2. ( ) (
    $
    )
  3. javascript
    if
    else
    function
  4. age
    name
  5. (
    userPersonalData
    )

var xhsRookies = 'hello' function textFun() { var xhsRookies = 'hi' } console.log(xhsRookies)
  • A.
    hello
  • B.
    hi
  • C.
    hi hello
  • D.
    hello hi
Answer

Answer A

var
xhsRookies
textFun
var
xhsRookies
textFun
var
xhsRookies
hello


:

console.log(xhsRookies) var xshRookies = 'xhs-rookies' console.log(xhsNumber) let xhsNumber = 26
Answer

undefined

ReferenceError: Cannot access 'xhsNumber' before initialization

xshRookies
xshRookies
var
var xshRookies
undefind
;
JavaScript
let
let
(
temporal dead zone
)
ReferenceError


:

const xhsNumber = 26 xhsNumber = 36 console.log(xhsNumber)
Answer

TypeError: Assignment to constant variable.

const
const

JavaScript