JavaScript Flashcards
What is JavaScript
JavaScript is a lightweight programming language that web developers commonly use to create more dynamic interactions when developing web pages, applications, servers, and or even games. It runs on the client-side, meaning it executes in the web browser of the person visiting the website.
Difference between Java and JavaScript
JavaScript and Java are similar in some ways but fundamentally different in some others. The JavaScript language resembles Java but does not have Java’s static typing and strong type checking. JavaScript follows most Java expression syntax, naming conventions and basic control-flow constructs which was the reason why it was renamed from LiveScript to JavaScript.
Describe what is JavaScript DataTypes
Identify the benefits of using JavaScript DataTypes
JavaScript DataTypes refer to the different types of values that can be assigned to variables in the JavaScript programming language. In JavaScript, variables are not explicitly declared with a data type, but the data type is automatically determined based on the value assigned to the variable.
Describe what is JavaScript Variable Scopes
Variable
The Variable scope defines the lifetime and visibility of a variable. Each variable associated with a scope. The variable can be accessed only within its scope.
Global Scope
Variables defined outside any function, block, or module have global scope. The global scope variables are accessed everywhere in the application.
Local Scope
Local Scope used to refer to Function-local scope, but following the introduction of block scope, this term is considered ambiguous and should not be used. The local scope has divided into the function scope, the block scope and the lexical scope. The block scope concept is introduced in ECMA Script 6 (ES6) together with the new ways to declare variables - const and let.
Function Scope
The variable declared in a function is only visible inside that function. var is the keyword to define variable for a function-scope accessibility. These variables cannot be accessed or modified.
Block Scope
Block scope is the scope of the variables declared inside the {} (curly brackets). In ES6, const and let keywords allow developers to declare variables in the block scope, which means those variables exist only within the corresponding block.
Lexical Scope
Lexical scope is that a variable defined outside a function can access the inside another function defined after the variable declaration. The inner functions are lexically bound to the execution context of their outer functions.
Hoisting
In JavaScript, variable declarations made with var and function declarations made with the function keyword are hoisted - or moved - to the top of the scope in which they are declared when the JavaScript interpreter parses the code. This means that variables and functions can be used before they are even declared as shown below.
Describe what is let and const keywords in JavaScript
let: The let keyword allows you to declare variables that are block-scoped. Block scope refers to the portion of code within curly braces {}. Variables declared with let are limited in scope to the block in which they are defined. They are not accessible outside of that block. This helps prevent variable name clashes and unintended scope pollution.
const: The const keyword is used to declare variables that have a constant value, meaning their value cannot be reassigned after declaration. Like let, const is also block-scoped. When using const, you must assign a value to the variable at the time of declaration, and you cannot reassign it later.
What is an array JavaScript
An array is a variable that allows the programmer to store more than one value. Arrays in JavaScript are objects and thus consist of key/value pairs and inherit from the Array prototype. Like objects, array values can consist of JavaScript primitives, or other JavaScript objects, including arrays and functions.
Creating an Array In JavaScript, arrays can be created using square brackets, using what is known as an array literal. They can also be created using the new keyword, but it is best practice to use array literals.
All array objects share a common structure. Each array has a length field that stores the current length of the array. In addition, the prototype of an array is [], giving each array access to certain function.
Arrays in JavaScript are zero-indexed, meaning that the first element in an array is represented by the key 0.
Changing the Array Length - JavaScript is a dynamic language and arrays are no different. the length of an array can be changed in several ways.
Adding an Item - To add an item to an array you can specify an index
Removing an Item - Removing an item from an array in JavaScript can result in unexpected behavior if done incorrectly. When removing a key from an object, you might use the delete keyword. When you do this with an array, the length field will not be updated, resulting in an empty slot.
Arrays are iterable, and so you can use a for-in or for-of loop to iterate through an array. for-in will iterate through the keys of an array. for-of will iterate through the values of the array.
There is also the forEach() method on the Array Prototype. This function is a functional array method that takes in a callback function and runs that function for each element in the array. The forEach() method returns undefined.
What is a function in JavaScript
A function is a group of reusable code which can be called anywhere in the program. A JavaScript function is defined using the function keyword.
Describe what is this keyword
The this keyword in JavaScript refers to the context in which a function is executed.
In method invocations, this refers to the object on which the method is invoked.
In constructor functions, this refers to the newly created instance of the object.
In event handlers, this typically refers to the element that triggered the event.
In the global scope or default function context, this refers to the global object (e.g., window).
Arrow functions do not have their own this value but inherit it from the surrounding scope.
Remember, the behavior of this depends on the specific usage and how a function is invoked.
Describe what is Type Coercion
Type coercion is the process of converting a value from one data type to another data type.
Explicit type coercion - We can explicitly convert the datatype of the variable. For example: Number(‘3’), String (123), Boolean(2)
Implicit type coercion - JavaScript is a loosely-typed language, values can also be converted between different types automatically. It usually happens when you apply operators to values of different types. For example: ‘3’ * ‘2’, 2/’5’, 123 + ‘’
Difference between == and ===
== is used for comparison between two variables irrespective of the data type of variable.
=== is used for comparison between two variables but this will check strict type, which means it will check datatype and compare two values.
What is falsy
In JavaScript, any expressions or value that results in boolean false value, are considered as Falsy. The falsy values/expressions in javascript are:
Obviously boolean false is false.
Any empty string will be evaluated to false.
Any undefined variable will be equal to false.
Any null variable will be equal to false.
Any numerical expression with result in NaN (not a number) will be equal to false.
Any numerical expression with result in zero will be equal to false.
What is Truthy
In JavaScript, any expressions or value that results in boolean true value, are considered as Truthy. Any expression or value other than above listed falsy values – is considered truthy
Selecting elements from the DOM
JavaScript is used to get or modify the content or value of the HTML elements on the page. To perform any action on the HTML element, we need to select the target HTML element.
4 different ways
Selecting Elements by ID
The getElementById() method is used to select an element based on its unique ID. The getElementById() method will return the element as an object if the matching element was found, or null if no matching element was found in the document.
<body>
<p>This is a paragraph.</p>
<script>
document.getElementById("demo").innerHTML = "Paragraph Changed";
</script>
</body>
Selecting Elements by Tag Name
The getElementsByTagName() method used to select HTML elements by tag name. This method also returns an array-like object of all child elements with the given tag name.
<body>
<h1> Heading </h1>
<p>This is a paragraph of text.</p>
<div>This is another paragraph of text.</div>
<p>This is one more paragraph of text.</p>
<script>
var matches = document.getElementsByTagName("p");
for(var elem in matches) {
matches[elem].style.background = "red";
}
</script>
</body>
Selecting Elements with CSS Selectors
We can use querySelector() and querySelectorAll() methods to select elements that matches the specified CSS selector. The querySelector() finds the first element that matches a CSS selector whereas the querySelectorAll() finds all elements that match a CSS selector.
<body>
<p>This is a paragraph</p>
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Mango</li>
</ul>
<script>
var matches = document.querySelectorAll("ul li");
for(var elem of matches) {
document.write(elem.innerHTML + "<br>"); //outputs: "Apple Orange Mango"
}
document.write(document.querySelector('#para').textContent); //outputs: "This is a paragraph"
</script>
</body>
