본문 바로가기

Web Programming

JavaScript Syntax(2)

- Modules in JavaScript are called Functions, and pre-defined functions that belong to objects are called Methods.

 

 

JS Function
JS Function

 

- Like def in Python, we should explicitly write function when defining a function in JS.

- Like C++, it doesn't matter where you define your function. (It's okay to define it on the bottom)

- Like C++, there exist two ways to pass parameters, 'Pass-by-value', and 'Pass-by-reference' (objects, arrays).

- One thing amazing is that if the function is called with missing arguments (less than declared), the missing values are set to undefined.

- Also, if the function is called with too many arguments, the arguments can be reached using the arguments object.

 

Rest parameter

- Instead of arguments object, you could also explicitly define a rest parameter which is a array.

 

 

document.getElementByID("IDNAME").innerHTML

- Using the 'document.getElementByID()', we can access to elements from <script></script>.

- innerHTML allows to insert a value within the tag.

 

 

Arrow Functions

- Instead of regular functions, it is more compact to use arrow functions.

- Arrow functions also allow writing anonymous function expressions.

- 'return' and { } can be eliminated from the regular function.

- If there is only one parameter, ( ) can also be eliminated.

 

 

this element

- In default, since the code runs in the global window object, 'this' refers to the window.

- Inside an event handler(callback function), 'this' refers to the bound element.

- Nevertheless, arrow functions do not bind 'this' the same way as regular functions.

 

 

Self-Invoking Functions

- Self Invoked Function Expression(IIFE) are functions that are executed right after they are defined.

- There exists two ways to do this procedure like in the image above.

 

Global Functions

- The functions above are global functions, and do not need to import any other library, or call like a method using an object.

 

 

Arrays

- Like many other programming languages, in JS, there exists Arrays which is a data structure that holds many values under a single name.

- We do not need to use new Array() when declaring a array.

- JS arrays are dynamic arrays that allocate more space as items are added.

- The typeof operator returns 'object' for arrays.

- One thing different from other languages is that when deleting an element using the 'delete' keyword, the element changes to undefined.

- When we declare and allocate arrays using 'new' operator, the elements is not initialized, and therefore set as undefined.

 

Array with uninitialized elements

- Also, we could leave unitilized element as blank.

 

 

- When we iterate through an array, we could use for loop, for ... in, for ... of.

- The difference between for ... in and for ... of is that for ... in only iterates through elements that are not undefined.

 

Passing an array to innerHTML(1)
Passing an array to innerHTML(2)

- When we want to pass the values of an array to HTML element, we could just pass the array instead of extracting each element, because JS automatically converts an array to a string when a primitive value is expected.

 

- Like other programming languages, there exists multi-dimensional arrays.

- One different thing is that each nested array could have differnet lengths.

 

 

 

JavaScript Object declaration1
JavaScript Object declaration2

- In JavaScript, curly brackets are used to define an object.

- One could define using the new keyword, but the code becomes longer.

 

JavaScript Object declaration3

- Another way is to define a object constructor function and use that function to define an object.

 

- JavaScript has object versions of primitive data types, but there is no reason to create complex objects because primitive values execute much faster.

 

- We coulld think of object as a collection of unordered properties.

- We could access, add, delete property from an object.

 

defineProperty()

- Besides using the '.' and delete operator, there is a method named Object.defineProperty which could be used to not only  change and add a property, but also make the property read-only or not enumerable.

- Also, a method(function) could be added as a property of an object.

 

Comparing String and String Object

- Using '==' operator we compare the values between String and String Object.

- Using '===' operator, we compare not only the value but also the type of String and String Object.

 

Comparing String Object and String Object

- It is not possible to compare String Object and String Object.

 

String Object 추가...

 

 

- Regular Expressions are sequence of characters that forms a search pattern.

 

Regular Expression 추가...

 

 

 

Date Object 1
Date Object 2

- Date Object provides methods for data and time manipulations.

- Note that JavaScript counts months from 0 to 11.

 

 

 

- Boolean and Number Objects are Wrapper objects for boolean and numbers.

 

 

 

window object and document object

- Document Object is a object to manipulate the document that is currently visible in the browser window.

- Window Object represents a browser window.

- All global JS objects, functions, and variables automatically becomes members of the window object.

- window has properties such as innerHeight, innerWidth, location and methods such as open(), close().

 

JSON

- JSON stands for 'JavaScript Object Notation' and is a format to send and recieve data on the web.

- The file type for JSON files is ".json" and MIME type is "application/json".

- We can convert any object into JSON and send it to the server and also convert any JSON received from the server into objects.

- Object is represented as a list of property names and values contained in curly braces.

- When receiving data from a server, the data is always a string, so we parse the data with JSON.parse() and the data becomes an object.

- When we send data to a server, the data has to be a string, so we convert an object into a string with JSON.stringify() and the data becomes a string.

- One thing to note is that JSON.stringify() will remove any functions from an object.

 

jsonplaceholder.typicode.com

'Web Programming' 카테고리의 다른 글

AJAX & Promise & Fetch API  (0) 2021.05.06
HTML Document Object Model(DOM) & JavaScript Events  (0) 2021.04.13
JavaScript Syntax(1)  (0) 2021.03.28
CSS Syntax(2)  (0) 2021.03.21
CSS Syntax(1)  (0) 2021.03.20