Hello, amazing people 👋,
Welcome to the amazing world of JavaScript! 🌟
In the first part, we learned about variables, data types, and Operators building the foundation for our coding journey. Now, let's take it up a notch and explore even more concepts! 💪💡
In this blog, we'll cover: -
Functions in JavaScript.
Arrays in JavaScript.
Document Object Model (DOM) in JavaScript.
Functions in Javascript
Functions are like mini-programs within a larger program that we can create and reuse multiple times throughout our code. The function allows us to write a block of code that performs a specific task, such as calculating a sum, validating input, or displaying a message. With the help of the function, we break down complex tasks into smaller, more manageable pieces that can be easily maintained and debugged.
In JavaScript, we can create functions using several different methods, each method is own unique syntax and purpose. Function declarations are one of the most common ways to create a function, where we use the function keyword to define the function, give it a name, and specify any arguments that it needs to take. and function expressions, arrow functions, and immediately invoked function expressions (IIFEs) are other ways to create functions in JavaScript.
Function declarations
Function declarations are one of the most common ways of defining a function in JavaScript. This allows us to define a reusable block of code that we can call multiple times from different parts of our code.
Syntax:
function functionName(parameters) {
// code to be executed
}
Example:
function add(num1, num2) {
return num1 + num2;
}
const result = add(3, 4);
console.log(result); // Output: 7
const addNum = add(38, 47);
console.log( addNum ); // Output: 85
Function expressions
Function expressions in JavaScript allow us to define a function as a value that can be assigned to a variable. It is similar to function declarations, but with function expressions, we can assign a function to a variable without giving it a name. This type of function is also called an anonymous function.
Syntax:
const functionName = function(parameters) {
// code to be executed
}
Example:
const add = function(num1, num2) {
return num1 + num2;
}
console.log(add(2, 3)); // Output: 5
Arrow functions
Arrow functions are a shorthand syntax for creating functions in JavaScript. They provide a more concise syntax than traditional function expressions and are often used for simple, one-line functions.
Syntax:
const functionName = (parameters) => {
// code to be executed
}
Example:
const add = (x, y) => {
return x + y;
};
console.log(add(2, 3)); // Output: 5
// Arrow functions can also be used for single-line functions without curly braces.
const multiply = (x, y) => x * y;
console.log(multiply(2, 3)); // Output: 6
Immediately Invoked Function Expressions (IIFEs)
An Immediately Invoked Function Expression (IIFE) is a function in JavaScript that is executed immediately after it is defined. The primary purpose of an IIFE is to create a private scope for the code that is contained within it. This means that any variables or functions defined inside an IIFE are not visible outside of the IIFE, which helps to avoid naming conflicts and keeps the global namespace clean.
Example:
(function() {
const message = "Hello, world!";
console.log(message);
})();
Arrays in javascript
Arrays are like magic wands in JavaScript that can hold multiple values of any data type. It's like having a treasure chest that can hold gold, diamonds, and rubies all at once. Similarly, an array can hold multiple values, including numbers, strings, objects, or even other arrays.
Arrays are ordered lists of elements, where each element is identified by an index (starting from 0).
Example of how to create an array in JavaScript
let myArray = [1, 2, 3, "four", true];
// This creates an array called myArray that contains five elements of different data types.
// We can access each element of the array using its index
console.log(myArray[0]); // outputs 1
console.log(myArray[1]); // outputs 2
console.log(myArray[2]); // outputs 3
console.log(myArray[3]); // outputs four
console.log(myArray[4]); // outputs true
We can also modify the values of array elements using their index
myArray[1] = "two";
console.log(myArray); // outputs [1, "two", 3, "four", true]
JavaScript provides many built-in methods for manipulating arrays, such as push, pop, shift, unshift, splice, slice, concat, join, reverse, sort, and forEach
Here's an example of how to use the push and pop methods
let myArray = [1, 2, 3];
myArray.push(4); // adds 4 to the end of the array
console.log(myArray); // outputs [1, 2, 3, 4]
let removedElement = myArray.pop(); // removes the last element (4) from the array
console.log(myArray); // outputs [1, 2, 3]
console.log(removedElement); // outputs 4
Document Object Model (DOM) in javascript
Hey there! Let me tell you about DOM manipulation in JavaScript in a fun and friendly way.
So, imagine you have a web page that has a bunch of elements on it like buttons, images, and text. You can think of these elements as a tree, where each element is a branch, and all the branches come together to make up the whole page.
Now, let's say you want to make changes to this page using JavaScript. That's where DOM manipulation comes in!
DOM manipulation is like having a magic wand that lets you change anything on the page. You can add new elements, remove old ones, change the text, or even change the styling!
Let's say you have an HTML page with a button element and want to change its text when clicked.
Here's an example of how you can do that with DOM Manipulation
<!DOCTYPE html>
<html>
<head>
<title>DOM Manipulation Example</title>
</head>
<body>
<button id="myButton">Click Me!</button>
<script>
const myButton = document.querySelector('#myButton');
myButton.addEventListener('click', () => {
myButton.textContent = 'Clicked!';
console.log('Button clicked!');
});
</script>
</body>
</html>
In this code, we first select the button element using document.querySelector(). We then add an event listener to the button that listens for a click event. The code inside the event listener is executed when the button is clicked. This code changes the text content of the button to "Clicked!" and logs a message to the console to confirm that the button was clicked.
So, when you open this HTML page and click the button, you'll see that the text on the button changes to "Clicked!" and a message is logged to the console.
Thanks for reading 😃
Thanks for reading this blog! I hope you found it helpful and enjoyable. JavaScript functions, arrays, and DOM manipulation are powerful tools that allow us to create interactive and dynamic web pages. JavaScript can be a bit tricky at times, but I tried my best to break it down into easy-to-understand concepts.
Once again, thank you for reading, and I hope to see you in my next blog post. Stay curious, keep coding!🌟