This question already has an answer here:
Colon after function declaration in javascript [duplicate]
(1 answer)
Closed 4 years ago.
I came across a syntax somewhere on the web recently and couldn't grasp its meaning.
What I understand is that when we write props: Object inside the brackets, it means we're assigning a default value to props as Object. But what does the 2nd colon signify? It looks like a key-value pair but is confusing me still.
Tried searching on the web but wasn't able to search due to lack of terminology. Any ideas what this means?
someFn(props: Object): Object {
return someOtherFn(props);
}
These are type annotations. They are not standard javascript. They are added when using tools that layer static typing onto javascript. The two most popular flavors are Typescript and Flow.
When you write code that uses this syntax you will transpile your source code into code that is syntactically valid for execution by running one of the above mentioned tools on your code. When you do, it will tell you if your usage of the types is correct, raise warnings that are helpful in development, and then strip all this out so it can actually be run.
Related
I am trying to build a component to handle the editing of a substructure of my data. This piece of data is an object but in the main object, it is optional. So when invoking component I am trying to use the ?? operator to pass in an empty object to avoid access of undef issue. I would also like to be able to use the ?. operator for the same reason. Like so.
<template>
<my-sub-component :value="value.scf_rule??{}" />
</template>
However, Vuejs doesn't really like the question marks in the HTML attributes on my template. I get the following error:
Syntax Error: SyntaxError: Unexpected token (1:93)
This should be a really simple lookup on the web but I have been looking for quite a while and it's not easy. It doesn't help that searching for question marks isn't really possible.
I've tried escaping it with a backslash, that doesn't seem to work. Anyone know how I can have an expression in my attribute that uses the question mark operator? I suppose I could define my own nvl utility function but that seems a tad silly.
If you remove any kind of build stack from the equation, you can use whatever your platform supports. Your browser then will run the code just as you author it.
Otherwise you are limited to what the acorn parser version used by your webpack/bundler supports (usually everything finalized in the spec and proposals that have reached stage 4). With Vue, you're probably using webpack.
If you are fine with your code being transpiled to older JS versions, use Babel along with the necessary plugins 1 2.
This question already has answers here:
How to declare Hash.new(0) with 0 default value for counting objects in JavaScript?
(3 answers)
Closed 2 years ago.
I want to achieve the following behavior:
For a certain JS object, if I use bracket-notation to access a key that is not defined, I want it to return 0 instead of undefined, similar to how Ruby Hash.new(0) behaves.
Is there a way I can go about implementing such behavior or anything in JavaScript that already exists which I could use instead?
currently having trouble sifting through noise related to this topic (mainly do to a lack of knowing google terms on this topic), any google terms I could use or docs I could read to better understand this would also be a huge help.
You could use the logical OR operator "||".
This will act as a fallback if the property is not defined.
const obj = {hello:'world'};
console.log(obj['hello'] || 0);
console.log(obj['somethingelse'] || 0);
I found MDN (Mozilla Developer Network) to be a great resource for JS related questions.
More on the logical OR operator: https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Operators/Logical_OR
More on property accessors (bracket notation): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors
This question already has answers here:
Javascript - Assigning multiple variables to object properties using curly braces in variable declaration
(2 answers)
Closed 8 years ago.
In looking at JavaScript from various Firefox extensions, I've seen code like the following for creating aliases (example):
let Cc = Components.classes;
let Ci = Components.interfaces;
let Cu = Components.utils;
This makes sense to me. However, I've seen a strange looking variant of this code that looks like this (from this example):
let { classes: Cc, interfaces: Ci, utils: Cu } = Components;
I don't fully understand this assignment statement. I believe that the end result is essentially the same as the former code block, but why? An anonymous object is being assigned the value Components, correct? I've never seen an assignment type like this before, so it makes little sense to me.
I looked at the Values, variables, and literals page at MDN, and the documentation for let, but neither page had any examples of this type of construction.
The second form is a new feature of ECMAScript6, called destructuring assignment. You won't see it in the open web due to lack of support, but you can find it in some code running on node.js or in firefox/addon internals.
Or things that are run through es6 to es5 transpilers.
See MDN docs for further details.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
what is the meaning of "$" sign in javascript
If Jquery is just external javascript code, then how does it use the dollar sign? Wouldn't that be adding new syntax?
$ is just a normal variable. You can do var $ = 42;.
jQuery - and any other javascript framework, simply encapsulate existing functionality in different utility functions. Most platforms endeavor to cover different browser implementations.
So, jQuery's dollar-sign operator is simply a function in which javascript functionality is encapsulated. It is, in essence, an alias for document.getElementById, but it also covers getting by class name or tag name.
As for adding new syntax, in short: no, it does not. The look and organization of code written in a framework may be different, but at the core you're still writing javascript, you're just using a set of functions provided by the library instead of using the set of functions in javascript core.
var $ = function () {
// do something here
}
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Lambda function syntax in JavaScript without curly braces
Dealing with Protovis - they implement some strange delegate functions which are given without curly braces - can someone shade a light on it for me, please?
Example:
vis.add(pv.Label)
.data(cols)
.left(function() this.index * w + w / 2)
.top(0)
.textAngle(-Math.PI / 2)
.textBaseline("middle");
In general, as explained in the question #missingno linked to, this is an alternate syntax for declaring functions, primarily supported by Firefox. Instead of:
function() { return "stuff" };
you omit the curly braces and return statement:
function() "stuff";
The end of the function occurs anywhere that a normal statement might end - a semicolon (;), a comma (,), or a close parenthesis ()).
In Protovis, there are a lot of cases where you need to declare short, one-statement anonymous functions to pass in as arguments to method calls. This is such a common pattern that that library includes a parsing utility to make sure that the above syntax is supported in browsers other than Firefox. If you enclose your Protovis code in script tags like this:
<script type="text/javascript+protovis">
// ...
</script>
the script will be evaluated by the Protovis parser, which ensures support for the special syntax.
My two cents on this: The upside of this syntax is that it's really fast (plus all the examples use it). A typically script using Protovis involves a lot of anonymous functions, so this can save you some typing, and it looks pretty awesome. When I first started using Protovis, I used it a lot - not just in method calls, but in variable declarations as well.
But, it has a few really heavy problems:
Because all your code is run through the Protovis parser, which essentially munges the code to re-add the return statements and then eval() it, it becomes fantastically hard to debug simple syntax errors. You get all these "Unexpected identifier" errors pointing to the eval() line in the Protovis code, with no indication of where the issue (a missing semicolon, etc) is occurring in your own code.
If you want your code to work outside Firefox, you have to include all your code in the special javascript+protovis script tags, which means no external files. Once you start doing anything of even marginal complexity, you really want to keep your scripts separate most of the time.
As with any "clever" syntax, it can get really hard to read, especially when you're using it in unexpected ways (e.g. outside of a method call). Yes, it's concise, but there's a definite price to pay in legibility.
All that said, I still use it when I want to make a rough sketch quickly. But most of the time, I'd suggest sticking to normal script tags and standard, curly-braced function declarations.