DEV Community: John Wanjema

Advanced Javascript Functions

John Wanjema — Tue, 12 Oct 2021 09:49:26 +0000

What is a Javascript functions

A function is a block of organized,reusable code that is used to perform a single,related action.

Advanced Working with Functions

Function basics include function declarations,passing parameters and function scope.
check out this article that cover into to Javascript functions.
Javascript Functions

In this article we are going to discuss the following:

The new function
Immediately invoked functions
closures
Arrow functions
This keyword
The call method
The apply method
The bind method
Default parameters
Rest parameters
Spread parameters

The new function

The new operator lets developers create an instance of a user-defined object type or of one of the built-in object types that has a constructor function.

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}

const car1 = new Car('VW', 'GTI', 2017);

console.log(car1.make); // VW

Immediately Invoked Function Expression(IIFE)

An IIFE Lets us group our code and have it work in isolation,independent of any other code.
Invokes a function right away where its defined.
This prevents functions and variables from polluting the global object.

(function hello() {
    console.log('Hello World'); //Hello
})();

To make it a function expression, we assign it to a variable or use it in another expression.

closures

A closure is a feature in JavaScript where a function inner scope has access to the outer scope.
In the example below closure help keep message within the scope and it can be accessed in the getMessage function.

let greeting = (function () {
    let message = 'Hello';
    let getMessage = function () {
        return message;
    };
    return {
        getMessage: getMessage
    }
})();

console.log(greeting.message); //Hello

Arrow functions

Arrow functions were introduced ES6.Refers to anonymous functions with their own unique syntax.Simpler way to create a function.

Why?

shorter syntax
this derives it value from enclosing lexical scope

Shortcomings.

Arrow functions don't have their own this value.
No argument object - we can't reference arguments

let greet = () => {
    return 'Hello world';
}
let message = greet();
console.log(message); //Hello World

If there is one parameter parenthesis are optional.

let greet = name => 'Hello' + name;

This keyword

Refers to the owner of the function we are executing
So if it's a standard function,this refers to the global window object;otherwise it can refer to the object that a function is a method of.

let message = {
    name: 'john',
    regularFunction(name) {
        console.log('Hello' + this.name)
    },

    arrowFunction: () => console.log('Hi' + this.name)
}

message.regularFunction(); // Hello John
message.arrowFunction();// Hi

The call method

The call() allows for a function/method belonging to one object to be assigned and called for a different object.
call() provides a new value of this to the function/method.
With call(), you can write a method once and then inherit it in another object, without having to rewrite the method for the new object.

let car1 = { brand: 'Vw', color: 'blue' }
let car2 = { brand: 'Toyota', color: 'white' }

let returnCarBrand = function () {
    console.log('Car brand is ' + this.brand)
}

returnCarBrand.call(car1); // Car brand is Vw
returnCarBrand.call(car2); // Car brand is Toyota

The apply method

The apply() method calls a function with a given this value, and arguments provided as an array.
Same syntax as call difference is that call accepts an argument list, while apply accepts a single array of arguments.

function bookTitle(name, author) {
    console.log(name + 'is written by ' + author);
    console.log(this);
}
bookTitle.apply(['HTML & CSS: Design and Build Web Sites', 'Jon Duckett']);

The bind method

Allows to make a copy of a function and then change the value of this.

let book = {
    author: 'Mary',
    getAuthor: function () {
        return this.author;
    }
}

let book2 = { author: 'John' };
let getAuthorcopy = book.getAuthor.bind(book2);
console.log(getAuthorcopy()); // John

Default parameters

Allow named parameters to be initialized with default values if no value or undefined is passed.

function sayHi(message, name = 'John') {
    console.log(message + name)
}

Rest parameters

The rest parameter syntax allows a function to accept an indefinite number of arguments as an array.
Rest parameters should always come after regular parameters.

let sayHi = function greet(...names) {
    names.forEach(name => console.log('Hi ' + name))
}
greet('Welcome', 'John', 'Mary', 'James') // Hi John // Hi Mary // Hi James

Spread Operator

Allows an a function to take an array as an argument and spread out its elements so that they can be assigned to individual parameters

function greet(user1, user2) {
    console.log('Hello' + user1 +' and ' + user2)
}
let names = ['John','Mary']
greet(...names); //Hello John and Mary

Getting started with Laravel and Vue js

John Wanjema — Fri, 01 Oct 2021 08:15:58 +0000

Ever wondered how to setup Vue in your laravel project.

Laravel

Laravel is a web application framework with expressive, elegant syntax. We’ve already laid the foundation — freeing you to create without sweating the small things.
Here is a link to their Documentation.

Laravel

Vue

Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Here is the link to their documentation.

Vue js

Why use Laravel with Vue

Streamline the Development Process

This structure allows for one to be a full stack developer within a single project

Single-Page Application Development

Both Vue js and Laravel support single page applications.This allows the application assets get loaded once, all that your application does as the user engages with it is request data which typically requires low bandwidth to fulfill.

Building Optimal Complex Front-end Pages

With Vuejs a developer does not need to use jquery to manipulate blade templates.Vue allows for easier managment of DOM using a virtual Dom.

Easy to Learn and Use

Both Laravel and Vue have a robust documentation that is easy to learn and integrate.

First ensure that Laravel is installed.

Here is link to install Laravel if you haven't.

Laravel 8 Installation

Create a laravel project

composer create-project laravel/laravel laravel-vue

Scaffolding Vue js

Install laravel/ui package

composer require laravel/ui

Install the frontend scaffolding using the ui Artisan command

Basic scaffolding

php artisan ui vue

Generate Auth scaffolding.

php artisan ui vue

Compile your fresh scaffolding.

npm install && npm run dev

Configure Blade

Import app.js and add app id

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Laravel Vue</title>
    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>
    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
    <div id="app">
        <main class="py-3">
            <h3>Laravel Vue</h3>
            <router-view></router-view>
        </main>
    </div>
</body>
</html>

Add Vue components

Add new vue.js file in resources/js/components called app.vue and add the following code.

<template>
    <div>
        {{message}}
    </div>
</template>
<script>
export default {
    data() {
        return {
            message: 'Hello World'
        }
    }
};
</script>

Setup Vue router

Install Vue router

npm install vue-router --save

Create a routes folder and add a home.js file.Add the following code.

const home = () =>import ( '../components/app.vue')

export default [
    {
        path: '/home',
        component: home,
        name: 'home',
    },
]

Head over to the resources/js folder and create a file called routes.js and add the following code.

import Vue from 'vue'
import VueRouter from 'vue-router'
import home from './routes/home';

Vue.use(VueRouter);
export default new VueRouter({
    mode: 'history',
    scrollBehavior: (to, from, savedPosition) => ({ y: 0 }), 
    routes: [
        ...home,
    ],
});

Add routes to app.js

Replace the code in your resources/js/app.js with the code below.

require('./bootstrap');
require('../sass/app.scss')
import Vue from 'vue'

window.Vue = require('vue');

// router
import router from './routes.js';
window.router = router;
window.Fire = new Vue();

const app = new Vue({
    el: '#app',
    router,
}).$mount('#app');

Setup Laravel routes

Update Laravel routes in web.php

Route::get('/{any?}', [
    function () {
        return view('welcome');
    }
])->where('any', '.*');

Run the application

Start Laravel app

php artisan serve

Compile components

npm run dev

DEV Community: John Wanjema

Advanced Javascript Functions

What is a Javascript functions

Advanced Working with Functions

The new function

Immediately Invoked Function Expression(IIFE)

closures

Arrow functions

Why?

Shortcomings.

This keyword

The call method

The apply method

The bind method

Default parameters

Rest parameters

Spread Operator

Getting started with Laravel and Vue js

Ever wondered how to setup Vue in your laravel project.

Laravel

Laravel

Vue

Vue js

Why use Laravel with Vue

Streamline the Development Process

Single-Page Application Development

Building Optimal Complex Front-end Pages

Easy to Learn and Use

First ensure that Laravel is installed.

Here is link to install Laravel if you haven't.

Laravel 8 Installation

Create a laravel project

Scaffolding Vue js

Install laravel/ui package

Install the frontend scaffolding using the ui Artisan command

Basic scaffolding

Generate Auth scaffolding.

Compile your fresh scaffolding.

Configure Blade

Import app.js and add app id

Add Vue components

Add new vue.js file in resources/js/components called app.vue and add the following code.

Setup Vue router

Install Vue router

Create a routes folder and add a home.js file.Add the following code.

Head over to the resources/js folder and create a file called routes.js and add the following code.

Add routes to app.js

Replace the code in your resources/js/app.js with the code below.

Setup Laravel routes

Update Laravel routes in web.php

Run the application

Start Laravel app

Compile components

Access the application at localhost:8000

Open localhost:8000

Link to Github repo.

Github repository

Happy coding