Declaring a function in ES6? - javascript

I wanted to "update" my javascript code to the new ES6 Standard, so I looked at how functions are now written and tried it out on a global function of mine, which reads like this in the "old" es5
function logMessage(message) {
document.getElementById("logs").innerHTML = document.getElementById("logs").innerHTML + `<li class="item-padding"> ${message} </li>`
}
now if I'm not wrong the correct "transformation" to ES6 would be like this:
logMessage = message => {
etc
}
But my ESLint tells me that my logMessage is not defined and I get an error in my console, do I miss something? Do I have to declare var, let or const before the logMessage?
I don't know if its important, but I also want to export this function from file One to file Two and use the function logMessage in another function in file Two, is there something I have to keep in mind when doing so?
Thanks for any help!
Edit: Thanks everyone the answers helped me a lot, got my problem fixed!

function logMessage(message) {
// etc...
}
... is function declaration which is still perfectly valid in es6. You are converting your function declaration into a function expression, which in es5 would look like this...
logMessage = function(message) {
// etc...
}
... and then into es6 ...
logMessage = message => {
// etc
}
... so the linting problem is not introduced by es6 syntax, but rather using function expression, assigning to a variable which without var/let/const is a global variable. There is also a difference in the original function declaration would be hoisted, but the function expression form must be declared before it's called. There is also a difference in that es6 arrow functions retain the context of this from the parent scope, so worth noting they are not 100% direct 1 for 1 mappings of each other.
Short answer, yes, variables need to be declared with var/let/const in order to avoid becoming global variables, whether it's a function or not.
let logMessage = message => {
// etc
}

now if I'm not wrong the correct "transformation" to es6 would be like this
You're wrong.
Arrow functions are a new syntax with different behaviour. They are not a straight up replacement for function declarations and function expressions (both of which still exist in ES6).
But my ESLint tells me that my logMessage is not defined and I get an error in my console, do I miss something? Do I have to declare var, let or const before the logMessage?
Yes. You're assigning something to a variable. You must declare the variable first.
I also want to export this function from file One to file Two
How you define the function has no bearing on your ability to export it.

Related

Javascript: "Deprecated"

I am new in learning Javascript and as I was following the tutorial I found that console.log(name); got (name) struck through in such a way claiming it is "Deprecated".
If there is an explanation on what that means or what I should do to remove that strike, I would be really thankful.
Because you used var name = ..., TypeScript thinks you are referring to window.name, which TypeScript considers deprecated. You can fix this error by:
Use a different variable identifier, like anotherName -
var anotherName = 'Bob'
console.log(anotherName)
Move the code inside a function. -
(() => {
var name = 'bob'
console.log(name)
})()
I think this is due to the fact that a 'loose' variable in a browser, declared with var, outside of a function is just going to end up pointing to:
window.name
And window.name has a special meaning, and is indeed deprecated.
It's a quirk of the language. If you didn't intend to create the variable in a global scope, you might be better off just declaring it in a function.
This will not have the same problem:
function main() {
const name = 'Foo';
}
main();
Generally it's a good idea to avoid creating any global symbols unless you explicitly intend to.

Why Javascript import function returns undefined

i want to understand a little bit more about the javascript reference scope, i was trying to import a function from onother file like this
file1.js
exports.checkIfCan = function(){
//make some check
}
exports.calculate = function(){
this.checkIfCan();
}
and using the calculate method with this import
file2.js
const { calculate } = require('./file1.js')
calculate()
actually the error is this.checkIfCan is not a function
but if i import all the module like this it works
const calculation = require('./file1.js')
calculation.calculate();
I just wanna understand more about the global/local scope in javascript
this refers to the context of the function invocation, which in your case is undefined (on browsers the default is window).
Here's an example as simple as possible to make you understand it:
calculation.calculate(); // <= you are calling calculate from calculation, so 'this' is calculation
calculate(); // <= you are calling calculate from... nothing, so 'this' is undefined
Update: using arrow functions it would work either case because this will be taken from the function's surrounding scope instead of the context, and in the top-level code in a Node module this is equivalent to module.exports.
There's a lot to explain about the thisin javascript, may I suggest you read the free ebook You Don't Know JS: this and Object prototypes? You'll find much more information there.
#Vlad Vlads, your problem is in the use of keyword this in your file file file1.js.
In accordance to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this, following behaviour may happen:
The value of this is determined by how a function is
called (runtime binding). It can't be set by assignment during
execution, and it may be different each time the function is called.
With that been said, if you remove the keyword this in your function, following will then works as expected:
const { calculate } = require('./file1.js')
calculate()
Your second example will also works as expected
const calculation = require('./file1.js')
calculation.calculate()
You should use import instead:
file1.js
function abc() {}
export {
abc
}
file2.js
import { abc } from 'file1.js';
abc();

Javascript - Anonymous functions declared without type declarations, should they be local scoped?

I'm reading some JavaScript for work and have come across a section of code I'm finding interesting. I've done some reading and came across:
Is using 'var' to declare variables optional?
Which illuminates the lack of a var type declaration as putting the var into a scope bubbling mutable global-not-global state.
Example:
var foo = bar // locally scoped
foo = bar // outer scope, can have global ramifications
My question here is when combining outer scope declarations with anonymous functions, is this acceptable and what would be the recommended way of handling this? Is it "good" convention? Should this be locally scoped? It is inside a class for my purposes, so I see no reason why it would be anything other than locally scoped. Again, JS noob though, so looking for some insights.
Example:
updateThing = (e) => {
this.state.items = e.target.value;
}
Much appreciated, thanks.
Anonymous functions declared without type declarations
There are no anonymous function declarations (except in export default). All the examples you have are assignments or variable declarations with initialisers.
When combining outer scope declarations with anonymous functions, is this acceptable and what would be the recommended way of handling this? Is it "good" convention?
No, this is a bad practice. Just don't do it. Never assign to variables you have not declared anywhere.
It is inside a class for my purposes
If you mean a class definition body: the assignment syntax there is an experimental shortcut for property intialisations in the constructor. Don't use it especially if you don't know what it means. Just write it explicitly:
class … {
constructor(…) {
…
this.updateThing = (e) => {
this.state.items = e.target.value;
};
}
…
}
This is not a variable assignment and has nothing to do with declarations at all.

Function behaviour in javascript [duplicate]

In javascript, when would you want to use this:
(function(){
//Bunch of code...
})();
over this:
//Bunch of code...
It's all about variable scoping. Variables declared in the self executing function are, by default, only available to code within the self executing function. This allows code to be written without concern of how variables are named in other blocks of JavaScript code.
For example, as mentioned in a comment by Alexander:
(function() {
var foo = 3;
console.log(foo);
})();
console.log(foo);
This will first log 3 and then throw an error on the next console.log because foo is not defined.
Simplistic. So very normal looking, its almost comforting:
var userName = "Sean";
console.log(name());
function name() {
return userName;
}
However, what if I include a really handy javascript library to my page that translates advanced characters into their base level representations?
Wait... what?
I mean, if someone types in a character with some kind of accent on it, but I only want 'English' characters A-Z in my program? Well... the Spanish 'ñ' and French 'é' characters can be translated into base characters of 'n' and 'e'.
So someone nice person has written a comprehensive character converter out there that I can include in my site... I include it.
One problem: it has a function in it called 'name' same as my function.
This is what's called a collision. We've got two functions declared in the same scope with the same name. We want to avoid this.
So we need to scope our code somehow.
The only way to scope code in javascript is to wrap it in a function:
function main() {
// We are now in our own sound-proofed room and the
// character-converter library's name() function can exist at the
// same time as ours.
var userName = "Sean";
console.log(name());
function name() {
return userName;
}
}
That might solve our problem. Everything is now enclosed and can only be accessed from within our opening and closing braces.
We have a function in a function... which is weird to look at, but totally legal.
Only one problem. Our code doesn't work.
Our userName variable is never echoed into the console!
We can solve this issue by adding a call to our function after our existing code block...
function main() {
// We are now in our own sound-proofed room and the
// character-converter libarary's name() function can exist at the
// same time as ours.
var userName = "Sean";
console.log(name());
function name() {
return userName;
}
}
main();
Or before!
main();
function main() {
// We are now in our own sound-proofed room and the
// character-converter libarary's name() function can exist at the
// same time as ours.
var userName = "Sean";
console.log(name());
function name() {
return userName;
}
}
A secondary concern: What are the chances that the name 'main' hasn't been used yet? ...so very, very slim.
We need MORE scoping. And some way to automatically execute our main() function.
Now we come to auto-execution functions (or self-executing, self-running, whatever).
((){})();
The syntax is awkward as sin. However, it works.
When you wrap a function definition in parentheses, and include a parameter list (another set or parentheses!) it acts as a function call.
So lets look at our code again, with some self-executing syntax:
(function main() {
var userName = "Sean";
console.log(name());
function name() {
return userName;
}
}
)();
So, in most tutorials you read, you will now be bombarded with the term 'anonymous self-executing' or something similar.
After many years of professional development, I strongly urge you to name every function you write for debugging purposes.
When something goes wrong (and it will), you will be checking the backtrace in your browser. It is always easier to narrow your code issues when the entries in the stack trace have names!
Self-invocation (also known as
auto-invocation) is when a function
executes immediately upon its
definition. This is a core pattern and
serves as the foundation for many
other patterns of JavaScript
development.
I am a great fan :) of it because:
It keeps code to a minimum
It enforces separation of behavior from presentation
It provides a closure which prevents naming conflicts
Enormously – (Why you should say its good?)
It’s about defining and executing a function all at once.
You could have that self-executing function return a value and pass the function as a param to another function.
It’s good for encapsulation.
It’s also good for block scoping.
Yeah, you can enclose all your .js files in a self-executing function and can prevent global namespace pollution. ;)
More here.
Namespacing. JavaScript's scopes are function-level.
I can't believe none of the answers mention implied globals.
The (function(){})() construct does not protect against implied globals, which to me is the bigger concern, see http://yuiblog.com/blog/2006/06/01/global-domination/
Basically the function block makes sure all the dependent "global vars" you defined are confined to your program, it does not protect you against defining implicit globals. JSHint or the like can provide recommendations on how to defend against this behavior.
The more concise var App = {} syntax provides a similar level of protection, and may be wrapped in the function block when on 'public' pages. (see Ember.js or SproutCore for real world examples of libraries that use this construct)
As far as private properties go, they are kind of overrated unless you are creating a public framework or library, but if you need to implement them, Douglas Crockford has some good ideas.
I've read all answers, something very important is missing here, I'll KISS. There are 2 main reasons, why I need Self-Executing Anonymous Functions, or better said "Immediately-Invoked Function Expression (IIFE)":
Better namespace management (Avoiding Namespace Pollution -> JS Module)
Closures (Simulating Private Class Members, as known from OOP)
The first one has been explained very well. For the second one, please study following example:
var MyClosureObject = (function (){
var MyName = 'Michael Jackson RIP';
return {
getMyName: function () { return MyName;},
setMyName: function (name) { MyName = name}
}
}());
Attention 1: We are not assigning a function to MyClosureObject, further more the result of invoking that function. Be aware of () in the last line.
Attention 2: What do you additionally have to know about functions in Javascript is that the inner functions get access to the parameters and variables of the functions, they are defined within.
Let us try some experiments:
I can get MyName using getMyName and it works:
console.log(MyClosureObject.getMyName());
// Michael Jackson RIP
The following ingenuous approach would not work:
console.log(MyClosureObject.MyName);
// undefined
But I can set an another name and get the expected result:
MyClosureObject.setMyName('George Michael RIP');
console.log(MyClosureObject.getMyName());
// George Michael RIP
Edit: In the example above MyClosureObject is designed to be used without the newprefix, therefore by convention it should not be capitalized.
Scope isolation, maybe. So that the variables inside the function declaration don't pollute the outer namespace.
Of course, on half the JS implementations out there, they will anyway.
Is there a parameter and the "Bunch of code" returns a function?
var a = function(x) { return function() { document.write(x); } }(something);
Closure. The value of something gets used by the function assigned to a. something could have some varying value (for loop) and every time a has a new function.
Here's a solid example of how a self invoking anonymous function could be useful.
for( var i = 0; i < 10; i++ ) {
setTimeout(function(){
console.log(i)
})
}
Output: 10, 10, 10, 10, 10...
for( var i = 0; i < 10; i++ ) {
(function(num){
setTimeout(function(){
console.log(num)
})
})(i)
}
Output: 0, 1, 2, 3, 4...
Short answer is : to prevent pollution of the Global (or higher) scope.
IIFE (Immediately Invoked Function Expressions) is the best practice for writing scripts as plug-ins, add-ons, user scripts or whatever scripts are expected to work with other people's scripts. This ensures that any variable you define does not give undesired effects on other scripts.
This is the other way to write IIFE expression. I personally prefer this following method:
void function() {
console.log('boo!');
// expected output: "boo!"
}();
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/void
From the example above it is very clear that IIFE can also affect efficiency and performance, because the function that is expected to be run only once will be executed once and then dumped into the void for good. This means that function or method declaration does not remain in memory.
One difference is that the variables that you declare in the function are local, so they go away when you exit the function and they don't conflict with other variables in other or same code.
First you must visit MDN IIFE , Now some points about this
this is Immediately Invoked Function Expression. So when your javascript file invoked from HTML this function called immediately.
This prevents accessing variables within the IIFE idiom as well as polluting the global scope.
Self executing function are used to manage the scope of a Variable.
The scope of a variable is the region of your program in which it is defined.
A global variable has global scope; it is defined everywhere in your JavaScript code and can be accessed from anywhere within the script, even in your functions. On the other hand, variables declared within a function are defined only within the body of the function.
They are local variables, have local scope and can only be accessed within that function. Function parameters also count as local variables and are defined only within the body of the function.
As shown below, you can access the global variables variable inside your function and also note that within the body of a function, a local variable takes precedence over a global variable with the same name.
var globalvar = "globalvar"; // this var can be accessed anywhere within the script
function scope() {
alert(globalvar);
var localvar = "localvar"; //can only be accessed within the function scope
}
scope();
So basically a self executing function allows code to be written without concern of how variables are named in other blocks of javascript code.
Since functions in Javascript are first-class object, by defining it that way, it effectively defines a "class" much like C++ or C#.
That function can define local variables, and have functions within it. The internal functions (effectively instance methods) will have access to the local variables (effectively instance variables), but they will be isolated from the rest of the script.
Self invoked function in javascript:
A self-invoking expression is invoked (started) automatically, without being called. A self-invoking expression is invoked right after its created. This is basically used for avoiding naming conflict as well as for achieving encapsulation. The variables or declared objects are not accessible outside this function. For avoiding the problems of minimization(filename.min) always use self executed function.
(function(){
var foo = {
name: 'bob'
};
console.log(foo.name); // bob
})();
console.log(foo.name); // Reference error
Actually, the above function will be treated as function expression without a name.
The main purpose of wrapping a function with close and open parenthesis is to avoid polluting the global space.
The variables and functions inside the function expression became private (i.e) they will not be available outside of the function.
Given your simple question: "In javascript, when would you want to use this:..."
I like #ken_browning and #sean_holding's answers, but here's another use-case that I don't see mentioned:
let red_tree = new Node(10);
(async function () {
for (let i = 0; i < 1000; i++) {
await red_tree.insert(i);
}
})();
console.log('----->red_tree.printInOrder():', red_tree.printInOrder());
where Node.insert is some asynchronous action.
I can't just call await without the async keyword at the declaration of my function, and i don't need a named function for later use, but need to await that insert call or i need some other richer features (who knows?).
It looks like this question has been answered all ready, but I'll post my input anyway.
I know when I like to use self-executing functions.
var myObject = {
childObject: new function(){
// bunch of code
},
objVar1: <value>,
objVar2: <value>
}
The function allows me to use some extra code to define the childObjects attributes and properties for cleaner code, such as setting commonly used variables or executing mathematic equations; Oh! or error checking. as opposed to being limited to nested object instantiation syntax of...
object: {
childObject: {
childObject: {<value>, <value>, <value>}
},
objVar1: <value>,
objVar2: <value>
}
Coding in general has a lot of obscure ways of doing a lot of the same things, making you wonder, "Why bother?" But new situations keep popping up where you can no longer rely on basic/core principals alone.
You can use this function to return values :
var Test = (function (){
const alternative = function(){ return 'Error Get Function '},
methods = {
GetName: alternative,
GetAge:alternative
}
// If the condition is not met, the default text will be returned
// replace to 55 < 44
if( 55 > 44){
// Function one
methods.GetName = function (name) {
return name;
};
// Function Two
methods.GetAge = function (age) {
return age;
};
}
return methods;
}());
// Call
console.log( Test.GetName("Yehia") );
console.log( Test.GetAge(66) );
Use of this methodology is for closures. Read this link for more about closures.
IIRC it allows you to create private properties and methods.

TS/JS arrow function changing value of `this`?

Using TypeScript v1.7.5, the context of this appears to be getting confused, or perhaps not transpiled correctly. Or I'm missing something. Inside of an arrow function, this is changing, when I expected it to still refer to the same this as outside the function. I've debugged the situation and the outcome is indicated in comments below.
Source TS
// Debug: "this" is an instance of the class -- good.
FS.exists(dbPath, (exists: boolean) => {
// Debug: "this" is an instance of the global object -- not good.
...
});
Resulting JS (ES5)
FS.exists(dbPath, function (exists) {
...
});
I was expecting the resulting JS to bind the callback as follows:
FS.exists(dbPath, function (exists) {
...
}.bind(this));
I need to preserve the value of this inside the callback, hence I'm using arrow functions throughout my code. But I'm confused as to why this doesn't appear to be working correctly.
Note
If, and only if, I specifically attempt to use this within the arrow function, then TypeScript creates this workaround:
var _this = this;
FS.exists(dbPath, function (exists) {
var _x = this;
});
Okay, fine, but wouldn't it have been better to use bind? This still doesn't fix the problem of me calling functions from within the arrow function. Those function calls will lose the context of this, which is not the appropriate behavior.
This looks like the desired behavior by the Typescript compiler.
ES6 fat arrow functions => don't actually bind this. Instead, this actually falls through to the upper scope. Same with arguments, which you can't use inside a fat arrow function, because they will fall through to the upper scope.
So, binding all the time would be incorrect behavior according to the spec. And it would be an undesired behavior to always reference this from the parent scope inside a function if you aren't using it. This looks like correct optimization on the part of the TypeScript compiler.

Categories