> For the complete documentation index, see [llms.txt](https://chloe-codes1.gitbook.io/til/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://chloe-codes1.gitbook.io/til/web/javascript/01_javascript101.md).
# 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
2. **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
3. It is a completely different programming language from Java
* Netscape licensed the Java name for marketing purposes
* JavaScript == ECMA-262
4. It is not a beginner's language
* While easy at the beginning of learning, it is powerful enough to build complex services
5. 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
```javascript
var cat1 = {}
var cat2 = {name:'nero', age:3}
```
2. Object constructor function
```javascript
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!
```javascript
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
```javascript
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
```javascript
var OBJ = {
name: 'chloe',
'e-mail': 'chloe@test.com'
}
OBJ['e-mail']
```
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://chloe-codes1.gitbook.io/til/web/javascript/01_javascript101.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.