Giter VIP home page Giter VIP logo

flw2-u1l3-23-24-student-exercises's Introduction

Lesson 1.3 - Functions Review

Welcome to the recap of our lesson on JavaScript functions! This README is your handy reference guide. Whenever you need a quick refresher, pop in here.

1. What is a Function?

  • A function in JavaScript is a block of reusable code that performs a specific task.
  • Functions are like recipes: they take inputs, process them, and return an output.
function functionName(parameters) {
  // Body of the function
}

2. Function Anatomy

  • Function Name: A unique name to identify and call the function.
  • Parameters (optional): Inputs you provide to a function. They're placed inside parentheses.
  • Function Body: Enclosed by {}. This is where the magic happens; it contains statements that define what the function does.
function greet(name) {
  console.log("Hello, " + name);
}

3. Calling a Function

  • To execute a function, you call it by its name followed by parentheses.
greet("Alice");  // Outputs: Hello, Alice

4. Parameters & Arguments

  • Parameters: Are names listed in the function definition. They are placeholders.
  • Arguments: Are the real values passed to the function when you call it.
function multiply(x, y) {
  return x * y;
}

multiply(2, 3);  // Here, 2 and 3 are arguments.

5. Why Use Functions?

  • Avoid Repetition: Reusable pieces of code mean you don't have to rewrite the same logic.
  • Organize Code: Makes code cleaner, more readable, and maintainable.
  • Modularity: Break down complex problems into smaller, manageable chunks.

6. Example: Without vs. With Functions

// WITHOUT Functions
let name1 = "Matt";
console.log("hi " + name1 + ", how are you");

let name2 = "Joe";
console.log("hi " + name2 + ", how are you");

// WITH Functions
function sayHello(name){
  console.log("hi " + name + ", how are you");
}

sayHello("Matt");
sayHello("Joe");

7. Event Handlers

  • Special functions that respond to user interactions/events, making web pages interactive.
let button = document.querySelector("button");
button.addEventListener('click', function() {
  alert('Button was clicked!');
});

8. Key Takeaways

  • Functions are fundamental in JavaScript for organizing and reusing code.
  • They can take inputs (parameters) and return outputs.
  • Event handlers are functions that respond to user actions.

Happy coding!

flw2-u1l3-23-24-student-exercises's People

Contributors

cn-curriculum avatar cn-mika avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.