#functiondeclaration

[winstonmhangoblog]

Understanding function basics in Javascript. This is our ninth slides set on our Quick guide to JavaScript.In this set we are looking at the very basics of creating functions in Javascript. As we may know, functions are the very basics of any programming language for carrying out actions on various data sets available.In Javascript functions are easy as well as difficult!!. Here am introducing how functions get defined and how statements within them get created using a combination of various data primitives and operators.We are looking at two main ways of defining functions and then going alittle bit down with arrow functions. Enjoy the reading #functions #javascriptfunctions #definingfunctions #functiondeclaration #functionliterals #arrowfunctions #multiparameterarrowfunctions #aingleparameterarrowfunctions #noparameterarrowfunctions #multilinearrowfunctions https://www.instagram.com/p/B86iSGbh3gl/?igshid=18rco35bgji1w

[suzanneshannon]

How to Add Native Keyword Aliases to Babel

Those of you who follow this blog know that not every blog post is an endorsement of a technique but simply a tutorial how to accomplish something.  Sometimes the technique described is probably not something you should do.  This is one of those blog posts.

The Babel parser is an essential tool in the web stack these days. Babel helps us to use JavaScript patterns before they hit the browser (optional chaining) as well as JSX for React. This got me to thinking: how easy would it be to write a Babel extension to allow us to use keyword alias, like fn instead of function? Let’s have a look!

Creating a keyword alias with Babel is both easier and more difficult than you would probably think. On the simple side, it’s essentially just one line of code. On the negative side, you need to modify Babel’s core parser code.

As our example, let’s says we want to alias fn for JavaScript’s function keyword. An example code snippet would look like:

// Named function fn myFunction() { return true; } // Function as variable const myOtherFunction = fn() { } // Instantly executing function (fn() { })();

After parsing we’d want all instances of fn to be replaced with function. To create this alias, we’d need to modify the createKeyword following file in

// File: packages/babel-parser/src/tokenizer/types.js // We'll be adding one line // ... function createKeyword(name: string, options: TokenOptions = {}): TokenType { options.keyword = name; const token = new TokenType(name, options); keywords.set(name, token); // ADD THIS LINE: if (name === "function") keywords.set("fn", token); return token; } // ...

To parse a sample file, I can run:

node packages/babel-parser/bin/babel-parser.js /path/to/sample-file.js

The parser will provide the following when it encounters an instance of fn:

{ "type": "FunctionDeclaration", "start": 0, "end": 36, "loc": { "start": { "line": 1, "column": 0 }, "end": { "line": 3, "column": 1 } }, "id": { "type": "Identifier", "start": 3, "end": 13, "loc": { "start": { "line": 1, "column": 3 }, "end": { "line": 1, "column": 13 }, "identifierName": "myFunction" }, "name": "myFunction" } // ...

You’re probably asking yourself “why would I ever do that?!” Well, you probably wouldn’t — modifying a source library for your own use is a maintenance nightmare and using rogue keywords in your source….is also a maintenance nightmare.

All that being said, if you’re looking to experiment with adding your own keyword aliases, modifying the Babel source is your best bet. I’d love if there were a way to write an extension to accomplish this. A big thank you to Logan Smyth for helping me navigate the Babel source!

The post How to Add Native Keyword Aliases to Babel appeared first on David Walsh Blog.

How to Add Native Keyword Aliases to Babel published first on https://deskbysnafu.tumblr.com/

[t-baba]

Refactor Code in Your Lunch Break: Getting Started with Codemods

Maintaining a codebase can be a frustrating experience for any developer, especially a JavaScript codebase. With ever-changing standards, syntax, and third party package breaking changes, it can be hard to keep up.

In recent years, the JavaScript landscape has changed beyond recognition. Advancements in the core JavaScript language has meant that even the simplest simple task of variable declaration has been changed. ES6 introduced let and const, arrow functions, and many more core changes, each bringing improvements and benefits to developers and their applications.

Pressure on developers to produce and maintain code that will stand up to the test of time is on the increase. This article will show you how you can automate large-scale refactoring tasks with the use of codemods and the JSCodeshift tool, allowing you to easily update your code to take advantage of newer language features, for example.

Codemod

Codemod is a tool developed by Facebook to help with the refactor of large-scale codebases. It enables the developer to refactor a large codebase in a small amount of time. In some cases, a developer might use an IDE to perform the refactor of a class or variable name, however, this is usually scoped to one file at a time. The next tool in a developer's refactoring tool kit is a global find and replace. This can work in many cases with the use of complex regular expressions. Many scenarios are not suited to this method; for example, when there are multiple implementations that need to be changed.

Codemod is a Python tool that takes a number of parameters including the expression you wish to match and the replacement.

codemod -m -d /code/myAwesomeSite/pages --extensions php,html \ '<font *color="?(.*?)"?>(.*?)</font>' \ '<span style="color: \1;">\2</span>'

In the above example, we are replacing the usage of the <font> tag with a span and inlining the color style. The first two parameters are flags to indicate multiple line matching (-m) and the directory to start processing from (-d /code/myAwesomeSite/pages). We can also restrict the extensions that are processed (--extensions php,html). We then supply the match expression and the replacement. If the replacement is not provided we will be prompted for one at runtime. The tool works, but it is very similar to existing regular expression matching tools.

JSCodeshift

JSCodeshift is the next step up in the refactor toolkit. Also developed by Facebook, its a tool for running codemods across multiple files. As a Node module, JSCodeshift provides a clean and easy-to-use API, and uses Recast under the hood. Recast is an AST-to-AST (Abstract Syntax Tree) transformation tool.

Recast

Recast is a Node module that exposes an interface for parsing and reprinting JavaScript code. It can parse code in string format and generates an object from this which follows an AST structure. This allows us to inspect the code for patterns such as a function declarations.

var recast = require("recast"); var code = [ "function add(a, b) {", " return a + b", "}" ].join("\n"); var ast = recast.parse(code); console.log(ast); //output { "program": { "type": "Program", "body": [ { "type": "FunctionDeclaration", "id": { "type": "Identifier", "name": "add", "loc": { "start": { "line": 1, "column": 9 }, "end": { "line": 1, "column": 12 }, "lines": {}, "indent": 0 } }, ...........

As we can see from the above example, we pass in the code string for a function that adds two numbers. When we parse and log the object we can see the AST. We see the FunctionDeclaration and the name of the function etc. As this is just a JavaScript object we can modify it as we see fit. Then we can trigger the print function to return the updated code string.

AST (Abstract Syntax Tree)

As mentioned before, Recast builds an AST from our code string. An AST is a tree representation of the abstract syntax of source code. Each node of the tree represents a construct in the source code and the node provides important information about the construct. ASTExplorer is a browser-based tool that can help to parse and understand the tree of your code.

Using ASTExplorer we can view the AST of a simple code example. Starting with our code, we will declare a const called foo and this will equal the string of 'bar'.

const foo = 'bar';

This results in the below AST:

We can see the VariableDeclaration under the body array, which contains our const. All VariableDeclarations have an id attribute that contains our important information such as name etc. If we were building a codemod to rename all instances of foo we can use this name attribute and iterate over all the instances to change the name.

Continue reading %Refactor Code in Your Lunch Break: Getting Started with Codemods%

by Chris Laughlin via SitePoint http://ift.tt/2sZIoLs

[winstonmhangoblog]

Introduction to JavaScript: functions🎉 In this part of our introduction to JavaScript series,we will be discussing functions. We will be looking at why we need functions,how to define or create functions, function parameters and arguments, function calls and function return statement. 🎖️There are things those mini courses don't cover in here,🎖️ Enjoy the reading #javascriptfunctions #functiondeclaration #functioncall #javascripthoisting #functionparameters #functionarguments #javascriptreturnstatement #javascriptfunctionconstructor #javascriptes6 (at Area 23 Lilongwe) https://www.instagram.com/p/B7jSuvZhUsr/?igshid=14338r316tfz6