mechanics and meaning of JavaScript library syntax: ${ value } - javascript

I've come across the following JavaScript code snippet in O'Reilly's
JavaScript Web Applications:
// helper.js
var helper = {};
helper.formatDate = function(){ /* ... */ };
// template.html
<div>
${ helper.formatDate(this.date) }
</div>
However no reference to any particular JavaScript library is provided here.
What is the likely meaning of the ${ ... } syntax and how does it work?
Does this come from the use of any particular library? I've seen
jQuery's $() notation where $ is a function but I've not seen
$ followed by a curly bracket pair anywhere.
Thanks.

It might be from the old, no longer in development jQuery Tmpl library or some other template engine:
What is a template engine?
JavaScript template engines

Related

In ES6 Can we refer to JS variables in HTML using { }

Suppose I have a variable in my Javascript Module called test
const test = 'abc';
Now can I use {test} to refer to test in my html code. Or do I always have to get the html tag by document.... and them setInnerHTML to it. I would prefer if someone could give an elaborate answer to referring variables of ES6 inside HTML.
Thank you
HTML can include JavaScript only in <script> elements and intrinsic event attributes.
New versions of JavaScript do not and cannot change this. (Since it is a (non-)feature of HTML, not of JS).
The syntax you describe is used by a number of template languages, such as Nunjucks and Handlebars, along with things that are not-quite-templates like JSX. It is not HTML.

What does an underscore at the beginning of a JS chain mean

What does an underscore at the beginning of a chain mean in Javascript? For example the value of the template property below:
EmProjectItem = Views.PostItem.extend({
tagName: 'li',
className: 'project-item',
template: _.template($('#employer-project-item').html())
});
It's just a variable (or rather a property) named _. It means exactly the same as foo or bar.
Presumably, it is defined by some library such as underscore.js (care to guess where this library got its name from?) or lodash.
The underscore is valid for the name of a variable in javascript so it really isn't possible based on the provided code to tell you what the underscore in your example refers to. I would guess the code is using the underscore.js library given the syntax you provided.
For example, this is perfectly valid:
function foo() {
var _ = "test";
alert(_);
}
Here is a link to the underscore.js library for use with it's template function:
http://underscorejs.org/#template

Why sometimes in Javascript there is the dollar sign ($arg) before function argument?

I see sometimes js snippets that are using the $ in front of the argument ($argName).
function someName(arg) {
// some code
// using arg
}
function someName($arg) {
// some code
// using $arg
}
In this js example it works either way with or without the $ in front of the arguments. Can anyone explaine if it has any use?
The $ character is legal in JS identifiers, and is often used simply as a code convention to indicate that the passed parameter is already a jQuery object (as opposed to a native DOM element).
This serves as a reminder that it's not necessary to re-invoke the jQuery $(param) wrapper function on that parameter.
It's also used quite a lot in Angular JS code.
It's sometimes used to reference an object from another library , like JQuery or AngularJS , what you're talking about here looks like AngularJs's dependency injection to me
UPDATE
See this answer it might be useful

javascript $ followed by curly braces

I read a book called "Javascript web application" and it has the following lines of code:
The example below, which includes logic inside views, is something you shouldn’t do:
<div>
<script>
function formatDate(date) {
/* ... */
};
</script>
${ formatDate(this.date) }
</div>
I don't understand what { formatDate(this.date) } means in javascript even in jQuery I have never seen it yet (putting object in jQuery function then I've already seen but the above code is not the case).
Could you explain me what the meaning of it?
Thank you.
${} is a Template Tag, used by jQuery Template Plugin.
${} Template Tag
Used for insertion of data values in the rendered
template. Evaluates the specified field (property) on the current data
item, or the specified JavaScript function or expression.
It's actually a bit more than this: Indeed, the jQuery Template Plugin used to have this syntax ${}. However, currently, this is part of the ES 6 (aka EcmaScript 2015) standard.
Reference: http://exploringjs.com/es6/ch_template-literals.html

What is the meaning of "$" sign in JavaScript

In the following JavaScript code there is a dollar ($) sign. What does it mean?
$(window).bind('load', function() {
$('img.protect').protectImage();
});
Your snippet of code looks like it's referencing methods from one of the popular JavaScript libraries (jQuery, ProtoType, mooTools, and so on).
There's nothing mysterious about the use of $ in JavaScript. $ is simply a valid JavaScript identifier. JavaScript allows upper- and lower-case letters (in a wide variety of scripts, not just English), numbers (but not at the first character), $, _, and others.¹
Prototype, jQuery, and most javascript libraries use the $ as the primary base object (or function). Most of them also have a way to relinquish the $ so that it can be used with another library that uses it. In that case you use jQuery instead of $. In fact, $ is just a shortcut for jQuery.
¹ For the first character of an identifier, JavaScript allows "...any Unicode code point with the Unicode property “ID_Start”..." plus $ and _; details in the specification. For subsequent characters in an identifier, it allows anything with ID_Continue (which includes _) and $ (and a couple of control characters for historical compatibility).
From another answer:
A little history
Remember, there is nothing inherently special about $. It is a variable name just like any other. In earlier days, people used to write code using document.getElementById. Because JavaScript is case-sensitive, it was normal to make a mistake while writing document.getElementById. Should I capital 'b' of 'by'? Should I capital 'i' of Id? You get the drift. Because functions are first-class citizens in JavaScript, you can always do this:
var $ = document.getElementById; //freedom from document.getElementById!
When Prototype library arrived, they named their function, which gets the DOM elements, as '$'. Almost all the JavaScript libraries copied this idea. Prototype also introduced a $$ function to select elements using CSS selector.
jQuery also adapted $ function but expanded to make it accept all kinds of 'selectors' to get the elements you want. Now, if you are already using Prototype in your project and wanted to include jQuery, you will be in problem as '$' could either refer to Prototype's implementation OR jQuery's implementation. That's why jQuery has the option of noConflict so that you can include jQuery in your project which uses Prototype and slowly migrate your code. I think this was a brilliant move on John's part! :)
That is most likely jQuery code (more precisely, JavaScript using the jQuery library).
The $ represents the jQuery Function, and is actually a shorthand alias for jQuery. (Unlike in most languages, the $ symbol is not reserved, and may be used as a variable name.) It is typically used as a selector (i.e. a function that returns a set of elements found in the DOM).
As all the other answers say; it can be almost anything but is usually "JQuery".
However, in ES6 it is a string interpolation operator in a template "literal" eg.
var s = "new" ; // you can put whatever you think appropriate here.
var s2 = `There are so many ${s} ideas these days !!` ; //back-ticks not quotes
console.log(s2) ;
result:
There are so many new ideas these days !!
The $() is the shorthand version of jQuery() used in the jQuery Library.
In addition to the above answers, $ has no special meaning in javascript,it is free to be used in object naming. In jQuery, it is simply used as an alias for the jQuery object and jQuery() function.
However, you may encounter situations where you want to use it in conjunction with another JS library that also uses $, which would result a naming conflict. There is a method in JQuery just for this reason, jQuery.noConflict().
Here is a sample from jQuery doc's:
<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
$.noConflict();
// Code that uses other library's $ can follow here.
</script>
Alternatively, you can also use a like this
(function ($) {
// Code in which we know exactly what the meaning of $ is
} (jQuery));
Ref:https://api.jquery.com/jquery.noconflict/
From the jQuery documentation describing the jQuery Core Object:
Many developers prefix a $ to the name of variables that contain jQuery
objects in order to help differentiate. There is nothing magic about
this practice – it just helps some people keep track of what different
variables contain.
Basic syntax is: $(selector).action()
A dollar sign to define jQuery A (selector) to "query (or find)" HTML elements A jQuery action() to be performed on the element(s)

Categories

Resources