Javascript Practice

Best Practices

1. Case

Read: Case Styles: Camel, Pascal, Snake, and Kebab Case

Read: What is camelCase, PascalCase, kebab-case and snake_case?

There is no accepted best practice on which case is the best to use. You may use any style you like to name your variables and functions, however it is important to remain consistent in using that style. Mixing styles is generally considered bad practice and must be avoided.

Bad Inconsistent Style:

let name = "John";
let Age = 25;
let is_married = false;
let salaryDetails = {
    company_name: "MountBlue",
    CompanyAddress: "Bangalore",
    amount: 10000,
};

function PrintDetails() {
    console.log(name, Age);
    console.log(salaryDetails);
    console.log(is_married ? "Married" : "Single");
}

Good Consistent style:

let name = "John";
let age = 25;
let isMarried = false;
let salaryDetails = {
    companyName: "MountBlue",
    companyAddress: "Bangalore",
    amount: 10000,
};

function printDetails() {
    console.log(name, age);
    console.log(salaryDetails);
    console.log(isMarried ? "Married" : "Single");
}

Here camelCase has been used, but you may use whatever style you prefer such_as_snake_case or PascalCase, as long as you remain consistent with your usage of that case.

Do not use thISWayOFNaMiNg.

2. Naming Loop Variables

Keeping your variable names as descriptive as possible includes naming variables in loops as well.

Bad Naming:

for(let i = 0; i < numbers.length; i++) {
    console.log(numbers[i]);
}

Good naming:

for(let index = 0; index < numbers.length; index++) {
    console.log(numbers[index]);
}

This applies to naming them when using higher order array methods as well:

Bad Naming:

const squares = numbers.map((number, i) => {
    console.log(i);
    return number * number;
})

Good naming:

const squares = numbers.map((number, index) => {
    console.log(index);
    return number * number;
})

Similarly, when working with matrices:

Bad Naming:

for(let i = 0; i < matrix.length; i++) {
    for(let j = 0; j < matrix[i].length; j++) {
        console.log(matrix[i][j]);
    }
}

Good naming:

for(let rowIndex = 0; rowIndex < matrix.length; rowIndex++) {
    for(let columnIndex = 0; columnIndex < matrix[rowIndex].length; columnIndex++) {
        console.log(matrix[rowIndex][columnIndex]);
    }
}

Though it is often better to be explicit with it as well:

Explicit and good naming:

for(let rowIndex = 0; rowIndex < matrix.length; rowIndex++) {
    let row = matrix[rowIndex];

    for(let columnIndex = 0; columnIndex < row.length; columnIndex++) {
        console.log(row[columnIndex]);
    }
}

3. Improving Readability

Improving your code readability is key to making it easier to work with your code for yourself and for everyone who works with your code.

An easy way to do that would be to add new lines between declaration and operations parts of your code.

Poor Readability:

const fs = require("fs");
let numbers = [1,2,3,4,5];
let pi = 3.14;
let squares = numbers.map(number => number * number);
console.log(squares);

Good Readability

const fs = require("fs");

let numbers = [1,2,3,4,5];
let pi = 3.14;

let squares = numbers.map(number => number * number);
console.log(squares);

An example without declaration:

Bad Readability:

function problem1(inventory, id){
    if(!inventory || !id) return [];
    for(let cars of inventory){
        if(cars.id===id){
            return cars;
        }

    }return [];
}

module.exports=problem1;

Good Readability:

function problem1(inventory, id){
    if(inventory == undefined || id == undefined) {
        return [];
    } else {
        for(let cars of inventory){
            if(cars.id === id){
                return cars;
            }
        }

        return [];
    }
}

module.exports = problem1;

4. Starting NodeJS Projects

Best Practices When Starting NodeJS Projects https://www.youtube.com/watch?v=X_UQbPnvSx4

JS Drill: Arrays

const items = [1, 2, 3, 4, 5, 5]; // use this array to test your code.
/*
    Complete the following functions.
    These functions only need to work with arrays.
    A few of these functions mimic the behavior of the `Built` in JavaScript Array Methods.
    The idea here is to recreate the functions from scratch BUT if you'd like,
    feel free to Re-use any of your functions you build within your other functions.
    **DONT** Use for example. .forEach() to recreate each, and .map() to recreate map etc.
    You CAN use concat, push, pop, etc. but do not use the exact method that you are replicating

    Name your files like so:
        each.js
        testEach.js
        map.js
        testMap.js
*/

function each(elements, cb) {
    // Do NOT use forEach to complete this function.
    // Iterates over a list of elements, yielding each in turn to the `cb` function.
    // This only needs to work with arrays.
    // You should also pass the index into `cb` as the second argument
    // based off http://underscorejs.org/#each
}

function map(elements, cb) {
    // Do NOT use .map, to complete this function.
    // How map works: Map calls a provided callback function once for each element in an array, in order, and functionructs a new array from the res .
    // Produces a new array of values by mapping each value in list through a transformation function (iteratee).
    // Return the new array.
}

function reduce(elements, cb, startingValue) {
    // Do NOT use .reduce to complete this function.
    // How reduce works: A reduce function combines all elements into a single value going from left to right.
    // Elements will be passed one by one into `cb` along with the `startingValue`.
    // `startingValue` should be the first argument passed to `cb` and the array element should be the second argument.
    // `startingValue` is the starting value.  If `startingValue` is undefined then make `elements[0]` the initial value.
}

function find(elements, cb) {
    // Do NOT use .includes, to complete this function.
    // Look through each value in `elements` and pass each element to `cb`.
    // If `cb` returns `true` then return that element.
    // Return `undefined` if no elements pass the truth test.
}

function filter(elements, cb) {
    // Do NOT use .filter, to complete this function.
    // Similar to `find` but you will return an array of all elements that passed the truth test
    // Return an empty array if no elements pass the truth test
}

const nestedArray = [1, [2], [[3]], [[[4]]]]; // use this to test 'flatten'

function flatten(elements) {
    // Flattens a nested array (the nesting can be to any depth).
    // Hint: You can solve this using recursion.
    // Example: flatten([1, [2], [3, [[4]]]]); => [1, 2, 3, 4];
}

JS Drill: Objects

const testObject = { name: 'Bruce Wayne', age: 36, location: 'Gotham' }; // use this object to test your functions

// Complete the following underscore functions.
// Reference http://underscorejs.org/ for examples.
// Check and use MDN as well

/*
    Create a function for each problem in a file called
        keys.js
        values.js
        pairs.js
    and so on in the root of the project.

    Ensure that the functions in each file is exported and tested in its own file called
        testKeys.js
        testValues.js
        testPairs.js
    and so on in a folder called test.

    Create a new git repo on gitlab for this project, ensure that you commit after you complete each problem in the project.
    Ensure that the repo is a public repo.

    When you are done, send the gitlab url to your mentor
*/

function keys(obj) {
    // Retrieve all the names of the object's properties.
    // Return the keys as strings in an array.
    // Based on http://underscorejs.org/#keys
}

function values(obj) {
    // Return all of the values of the object's own properties.
    // Ignore functions
    // http://underscorejs.org/#values
}

function mapObject(obj, cb) {
    // Like map for arrays, but for objects. Transform the value of each property in turn by passing it to the callback function.
    // http://underscorejs.org/#mapObject
}

function pairs(obj) {
    // Convert an object into a list of [key, value] pairs.
    // http://underscorejs.org/#pairs
}

/* STRETCH PROBLEMS */

function invert(obj) {
    // Returns a copy of the object where the keys have become the values and the values the keys.
    // Assume that all of the object's values will be unique and string serializable.
    // http://underscorejs.org/#invert
}

function defaults(obj, defaultProps) {
    // Fill in undefined properties that match properties on the `defaultProps` parameter object.
    // Return `obj`.
    // http://underscorejs.org/#defaults
}

Best Practices When Starting NodeJS Projects

Watch this video

Choosing npm modules

Watch this video

IPL Data Project I

Download the data from: https://www.kaggle.com/manasgarg/ipl

There should be 2 files:

deliveries.csv
matches.csv

In this data assignment you will transform raw data of IPL to calculate the following stats:

Number of matches played per year for all the years in IPL.
Number of matches won per team per year in IPL.
Extra runs conceded per team in the year 2016
Top 10 economical bowlers in the year 2015
Find the number of times each team won the toss and also won the match
Find a player who has won the highest number of Player of the Match awards for each season
Find the strike rate of a batsman for each season
Find the highest number of times one player has been dismissed by another player
Find the bowler with the best economy in super overs

Implement the functions, one for each task. Use the results of the functions to dump JSON files in the output folder

Instructions:

Create a new repo with name js-ipl-data-project in Gitlab subgroup, before starting implementation of the solution
Make sure to follow proper Git practices
Before submission, make sure that all the points in the below checklist are covered:
- Git commits
- Directory structure
- package.json - dependencies, devDependencies
- .gitignore file
- Proper/Intuitive Variable names
- Separate module for functions

Directory structure:

src/
- server/
  - 1-matches-per-year.js
  - 2-matches-won-per-team-per-year.js
- public/
  - output
    - matchesPerYear.json
    - ...
- data/
  - matches.csv
  - deliveries.csv
package.json
package-lock.json
.gitignore

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Javascript Practice

Best Practices

1. Case

2. Naming Loop Variables

3. Improving Readability

4. Starting NodeJS Projects

JS Drill: Arrays

JS Drill: Objects

Best Practices When Starting NodeJS Projects

Choosing npm modules

IPL Data Project I

Instructions:

Directory structure:

FilesExpand file tree

3. javascript-practice.md

Latest commit

History

3. javascript-practice.md

File metadata and controls

Javascript Practice

Best Practices

1. Case

2. Naming Loop Variables

3. Improving Readability

4. Starting NodeJS Projects

JS Drill: Arrays

JS Drill: Objects

Best Practices When Starting NodeJS Projects

Choosing npm modules

IPL Data Project I

Instructions:

Directory structure: