JS Function, Object, String
Tags: javascript, programming, webdev, beginners
Published: 2024-07-11 06:43:37

1. A **JavaScript function** is a block of code designed to perform a particular task. function is executed when "something" invokes it (calls it).

2. A JavaScript function is defined with the **function keyword, followed by a name, followed by parentheses ()**.

3. Function parameters are listed inside the **parentheses ()** in the function definition. Function arguments are the values received by the function when it is invoked. Inside the function, the arguments (the parameters) behave as local variables.

4. When JavaScript reaches a **return statement**, the function will stop executing. If the function was invoked from a statement, JavaScript will "return" to execute the code after the invoking statement. Functions often compute a return value. The return value is "returned" back to the "caller".

5. **The () operator** invokes (calls) the function. Accessing a function without () returns the function and not the function result.

6. An object literal is a list of name:value pairs inside **curly braces** {}.

7. You can access object properties in **two** ways - 
 **objectName.propertyName**, **objectName["propertyName"]**

8. Objects are containers for Properties and Methods. Properties are **named Values**. Methods are Functions stored as **Properties**. Properties can be **primitive values**, functions, or even other objects. Objects are objects, Maths are objects, Functions are objects, Dates are objects, Arrays are objects, Maps are objects, Sets are objects. All JavaScript values, except primitives, are objects.

9. A **primitive value** is a value that has **no properties or methods**. 3.14 is a primitive value. A primitive data type is data that has a primitive value. JavaScript defines 7 types of primitive data types - 
 A) string
 B) number
 C) boolean
 D) null
 E) undefined
 F) symbol
 G) bigint

10. **Primitive values** are **immutable** (they are hardcoded and cannot be changed).

11. **Objects** are **mutable**. They are addressed by reference, not by value.

12. An Object is an **Unordered Collection** of Properties. **Properties** are the most important part of **JavaScript objects**. Properties can be **changed, added, deleted, and some are read only**.

13. The **delete** keyword deletes a property from an object. The delete keyword deletes both the value of the property and the property itself.

14. Accessing **Object** **Method**- objectName.methodName()

15. Adding a new **method** to an **object** - 
` person.name = function () {
  return this.firstName + " " + this.lastName;
 };`

16. `toUpperCase()` method to convert a text to uppercase.

17. Some solutions to display JavaScript objects are - 
  Displaying the Object Properties by name, Displaying the Object 
  Properties in a Loop, Displaying the Object using Object.values(), 
  Displaying the Object using JSON.stringify()

18. Object **For In Loop** - 
`  const person = {
  name: "John",
  age: 30,
  city: "New York"
 };
  let text = "";
  for (let x in person) {
   text += person[x] + " ";
  };
  document.getElementById("demo").innerHTML = text;`

19. You must use person[x] in the loop. person.x will not work (Because 
   x is the loop variable).

20. `Object.values()` creates an array from the property values. 
 Example - Object.values(person)

21. `Object.entries()` makes it simple to use objects in loops.

22. JavaScript objects can be converted to a string with JSON method 
 `JSON.stringify()`.

23. To create an object type we use an `object constructor function`.
    function Person(first, last, age, eye) {
      this.firstName = first;
      this.lastName = last;
      this.age = age;
      this.eyeColor = eye;
    }
    const myFather = new Person("John", "Doe", 50, "blue");
    const myMother = new Person("Sally", "Rally", 48, "green");
    myMother.changeName = function (name) {
     this.lastName = name;
    }
    myMother.changeName("Doe");
    document.getElementById("demo").innerHTML =
    "My mother's last name is " + myMother.lastName; 
    This is Example!

24. HTML **events** are "things" that happen to HTML elements. When 
    JavaScript is used in HTML pages, JavaScript can "react" on these 
    **events**. Here are some examples of **HTML events** - 
    An HTML web page has finished loading, An HTML input field was 
    changed, An HTML button was clicked. **<element event='some 
    JavaScript'>** Common **HTML Events** - 
    
     

> onchange - An HTML element has been changed
>      onclick - The user clicks an HTML element
>      onmouseover - The user moves the mouse over an HTML element
>      onmouseout - The user moves the mouse away from an HTML element
>      onkeydown - The user pushes a keyboard key
>      onload - The browser has finished loading the page
     

**Strings**
25. **Strings** are for storing text. Strings are written with 
 **quotes**.

26. **Template Strings** were introduced with **ES6 (JavaScript 
 2016)**. Templates are strings enclosed in **backticks** (`This is a 
 template string`). Templates allow single and double quotes inside a 
 string. Templates are not supported in **Internet Explorer**.

27. To find the **length of a string**, use the built-in `length` 
 property.

28. The **backslash** escape character (\) turns special characters 
 into string characters. `let text = "We are the so-called \"Vikings\" from the north."; let text= 'It\'s alright.';`

29. JavaScript **Strings as Objects** - `let y = new String("John");`

30. Do not create Strings objects. The new keyword complicates the code and slows down execution speed. **String objects** can produce unexpected results

31. Comparing two JavaScript objects always returns **false**.

32. Basic **String Methods** - 

-     String **length** - The length property returns the length of a 
      string.
-     String **charAt()** - The charAt() method returns the character 
      at a specified index (position) in a string.
-     String **charCodeAt()** - The charCodeAt() method returns the 
      code of the character at a specified index in a string. The 
      method returns a UTF-16 code (an integer between 0 and 65535).
-     String at()    
-     String [ ]
-     String slice()
-     String substring()
-     String substr()
-     String toUpperCase()
-     String toLowerCase()
-     String concat()
-     String trim()
-     String trimStart()
-     String trimEnd()
-     String padStart()
-     String padEnd()
-     String repeat()
-     String replace()
-     String replaceAll()
-     String split()

String **Search Methods** - 
- String indexOf()
- String lastIndexOf()
- String search()
- String match()
- String matchAll()
- String includes()
- String startsWith()
- String endsWith()

**Template Strings use back-ticks (``)** rather than the quotes ("") to define a string.