Javascript : Coding standards, Pascal Casing or Camel Casing? [duplicate] - javascript

This question already has answers here:
What is the best-practice casing style for javascript? Why?
(6 answers)
Closed 3 years ago.
I am creating calling a function and passing in an array of objects but i am unsure if to use camingCasing or PascalCasing. Here is my method
util.load({
DefaultText:'Empty',
Items:[
{
Id:0,
Title:'Press'
}
]
});
If you notice i am passing in DefaulText, but should it be defaultText? and also Items, should it be items? and within the Items and i am also passing in Id and Title.
Can anyone confirm the correct way of doing this?
I know that methods are camelCasing but passing in objects like above?
Thanks in advance

The very popular JavaScript convention is to use PascalCasing as you call it for constructors (classes), for example String, Number, Date and camel casing for variable names and object keys. This code convention is used for all the built-in JavaScript functionality in the modern browsers, so thats why I would recommend to use it for your own code too.

There is no one correct way.
The JavaScript API uses camelCase for functions and PascalCase for objects.
Just choose one and be consistent. JavaScript identifiers are case sensitive.

Related

What is the best way to write functions that does not use its parameter in JS? [duplicate]

This question already has answers here:
Standard conventions for indicating a function argument is unused in JavaScript
(6 answers)
Closed 9 months ago.
Specifically, I am using react-semantic-ui's Select Form, which takes an onChange function. So I have defined my function as such:
const handleInputChange = function handleInputChange(event, data){// does something with data}
(don't mind the ugly syntax, that's airbnb style guide)
I am doing something with data, but I am not using the event parameter at all. What would be the best practice in this case, since it is generally a bad practice to declare a variable without using it?
You must declare a parameter for every argument before the one you want to use.
The idiomatic approach to marking a parameter as unused is to prefix its name with an underscore.
function handleInputChange(_event, data){
Some linters will recognise this and not emit a "unused variable" warning.
For example ESLint has a argsIgnorePattern option (but it also has a args option that lets you specify after-used).
Actually by using Js es6 you could code without unused argument:)
function handleInputChange(...[, data]) {
console.log(data);
}
handleInputChange('event', 123);
And bellow is a similar question you could check out:)
Standard conventions for indicating a function argument is unused in JavaScript

Is Object and Array in Javascript the same thing? [duplicate]

This question already has answers here:
JavaScript property access: dot notation vs. brackets?
(17 answers)
Are Javascript arrays primitives? Strings? Objects?
(7 answers)
Closed 2 years ago.
I'm looking for an elegant way of understanding JavaScript array and objects.
I came to an anomaly in which I got stuck.
Since in PHP or other languages, when we make an array e.g
$a = [
admin => 1,
staff => 2
];
so if we want to access its element we can do so by for e.g $a[admin] and we will get 1.
similarly if its an object e.g
$a = (object) [];
$a->sadd = 'sas';
we can access it with arrow
$a->sadd
and if we try to access object elements in the style of array i.e like this $a['sadd'] it will throw error that you can not use it as array style.
But I was surprised by the anomaly in JavaScript.
I have observed that in JavaScript no matter what I am making, an array or object, the elements of both can be accessed via dot or via array style and i found no difference in there accessing style.
for e.g
var a = {sadd : 1}
I can access its element via a['sadd'] or a.sadd both will give 1
So I am confused by this anomaly and wondering whether array and object both datatypes are considered same in JavaScript?
An array is indeed an object.
Javascript is a dynamic language and accepts mixed types of entities. Also while accessing, dot notation seems to be more clearer (atleast imo) and is preferred. Bracket notation is used for dyanamic keys.
The difference between array and objects boils down to their usecase:
Array -> Contiguous block of memory
Object -> key-value pair (like a dictionary)
Your php example is actually creating what we'd call an object in JS, not an array. In JS an array is a list of items, which you can find items by array[i], or by looping.
An object is a collection of fields, which you can go into by object.fieldName or object[fieldName].
This can be confusing in JS though, because theoretically everything is an "object", including arrays, due to the way things are handled lower down..
I would recommend following along with the https://justjavascript.com/ course for good mental models on how objects work in JS.

What's the difference between using Array.of() compared with brackets [ ]? [duplicate]

This question already has answers here:
Array.of vs "[ ]". When to use Array.of over "[ ]"?
(3 answers)
What’s the difference between "Array()" and "[]" while declaring a JavaScript array?
(19 answers)
Closed 4 years ago.
For example,
let x = [1,2,3,5];
is equivalent to:
let x = Array.of(1,2,3,4,5);
(Unless I'm missing an important detail, which is why I'm asking the question)
You could also mix these with spread ... syntax and variables and thus other arrays. To me, it seems Array.of() has more overhead. Would Array.of() have to parse an arguments object into another array?
I know there's also new Array() as others have before questioned here, but that has a different semantic purpose, so I don't see this question as a duplicate to that.
As I see it now, Array.of() and [ ] seem redundant. The function's intent does seem more explicit on the former, but the latter's intent is simple enough to not be misunderstood.
So to summarize:
When is one preferable over the other?
Why does Array.of() exist when JavaScript survived without it for so long?
And, what're the differences of these two methods, if any? Would there be any needless overhead?

Importing HTML templates and using them in tagged template literals [duplicate]

This question already has answers here:
Can ES6 template literals be substituted at runtime (or reused)?
(26 answers)
Closed 4 years ago.
I'm currently experimenting with LitElement which uses lit-html. lit-html would like the content to be provided as such:
html`Content goes here ${variable} <button on-click="${(e) => myEvent()}"`
I am able to import the template using raw-loader, html-loader, even es6-template-string-loader. I'm unable to provide this to the HTML function in the right format.
html is a function than takes an array of strings and values. Using the tagged syntax takes care of the splitting of the strings and the variables for you.
My question is, how could I dynamically provide the html function the imported template, or how would I take care of the splitting of the template myself?
Edit: Just to be clear I'm not trying to convert a string to a template literal. I am trying to provide a template literal to a tagged function dynamically. Using the
tag`${templateLiteral}`
syntax stores the content in one variable, and will not work. Using the
tag(templateLiteral)
syntax is not correct, because the tag function expects tag(array of strings, ...values).
If I understand you correctly you want to have multiple templates, right?
What you can do is something like this:
render() {
const differentTemplate = html`<p>Hello world!</p>`;
return html`Content goes here ${differentTemplate}
<button #click="${(e) => myEvent()}>Click me</button>`;
}
Since html just returns TemplateResult you can nest them into each other too.
Also be aware that your event binding is wrong. I fixed it in the example.

Javascript Adding Objects with + [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Overloading Arithmetic Operators in JavaScript?
Is it possible to add Javascript Objects in a custom way? Javascript allows you to use the + symbol to merge Strings together as well as add Numbers together.
I am wondering if you could define new ways for things to be merged such as adding arrays.
What I'm looking for is something like this:
var output = [0,1,2] + [3,4,5];
console.log(output);
//I want this to log [3,5,7]
I know I could easily do this with some addArray() function but I was wondering if it can be done by using the + symbol.
No, Javascript does not support operator overloading and there is no built-in functionality to do this.
Is it possible to add Javascript Objects in a custom way?
Yes, you can write your own addObject function.
Javascript allows you to use the + symbol to [concatenate] Strings together as well as add Numbers together.
ECMA-262 defines whether the '+' punctuator is treated as a unary or addition operator in expressions. As Mat says, you can't overload it. Even if you could, it doesn't seem like a good idea to change its behaviour since it's already used for 3 different things and has a specified behaviour for "adding" arrays like [1,2] + [3,4].

Categories