CODEWITHSUNDEEP
javascript
user9243567
user9243567

Reputation: 13

What is the correct javascript term for the square brackets in this context?

In the lines of the script marked 1) and 2) near the end, where I have commented, my question is about the square brackets? What is the correct javascript term for the square brackets in this context? Is the use of square brackets the same as how parenthesis works here? i.e the code inside the () parenthesis is computed first and computed values are passed out to the rest of the line to calculate the rest of the line?

Thanks Emma :) 

 <button style="border:none; font-size: 22px;background-color:black; 
 color:white; position:fixed; top:40%; left:5%" class="w3-button w3-black w3-
 display-left" onclick="plusDivs(-1)">&#10094;</button>
 <button id="rightbutton" style="border:none; font-size: 22px;background-
 color:black; color:white;position:fixed; top:40%; right:2%" class="w3-button 
 w3-black w3-display-right" onclick="plusDivs(1)">&#10095;</button>



<script>
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
showDivs(slideIndex += n);
}

function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}    
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
 x[i].style.display = "none";  // 1) the square brackets here?
}
x[slideIndex-1].style.display = "block"; // 2) and the square brackets here? 
}
</script>

Upvotes: 1

Views: 94

Answers (2)

Nina Scholz
Nina Scholz

Reputation: 386654

It is called property accessor with bracket notation.

object.property     // dot notation
object['property']  // bracket notation

You can use a stringified index, like 1 or just 1. If the given property accessor is not a string, it gets converted to string in advanve.

You use document.getElementsByClassName:

Returns an array-like object of all child elements which have all of the given class names. When called on the document object, the complete document is searched, including the root node. You may also call getElementsByClassName() on any element; it will return only elements which are descendants of the specified root element with the given class names.

var x = document.getElementsByClassName("mySlides"); // returns an array like object
                                                     // iterable with index and
                                                     // has a length property

for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
//   ^^^                                             // take the element at index i
}

x[slideIndex - 1].style.display = "block";
//^^^^^^^^^^^^^^^                                    // calculate an index

Upvotes: 0

Arash Motamedi
Arash Motamedi

Reputation: 10682

These are called Index or Bracket Property Accessors. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors

Property accessors provide access to an object's properties by using the dot notation or the bracket notation.

In Javascript you access elements of an array using the Index, or simply Bracket, notation. Which is exactly what you have in the code.

Similarly, you can access an object's properties using either the Dot notation:

  • myObj.property1

Or the Index/Bracket notation:

  • myObj["property1"]

To be exact, the Index terminology is more appropriate when referring to elements of an array, and the Bracket terminology is more appropriate when referring to properties of an object. Personally, I use the terminology interchangeably.

On your second question, no! Brackets [] are distinct from parentheses (). Parentheses are used for calling functions. Brackets are only used for accessing array elements or object properties. 

function sayHello() { // Function definition. Parentheses needed. 
    return "Hello!";
} 

var result = sayHello(); // Calling a function. Parentheses needed.

var obj = { // Object definition. No parentheses.
    name: "Emma"
}

var objName1 = obj.name;  // Accessing a property using Dot notation.
var objName2 = obj["name"]; // Accessing property using Bracket notation.

Upvotes: 1

Related Questions