Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to work with Structs in JavaScript?
In this tutorial, let us discuss how to work with structs in JavaScript.
What is a struct? A struct is the short name of the data structure. The structure creates multiple values of different types in a single variable. We can use a struct to generate records.
A struct in JavaScript is the object creation. Other than that, JavaScript does not have a struct feature.
Let us see the methods to create a structure.
Using the String split() Method
Let us learn to create a struct using string split.
Separate a string with a comma and whitespace and give it as the input to create a constructor for the structure we need. Now we can access the objects of this constructor.
Users can follow the syntax below to accomplish this.
Syntax
function createStruct(keys) {
if (!keys) return null;
const kArr = keys.split(', ');
const kCount = kArr.length;
function createConstructor() {
for (let i = 0; i < kCount; i++)
this[kArr[i]] = arguments[i];
}
return createConstructor;
}
const keyObj = new createStruct('key1, key2');
const valObj = new keyObj('val1, val2');
valObj.key1;
The above syntax creates a constructor from the string input.
Properties
keys − The keys are the input string.
Return Value
The constructor returns an object structure.
Example
The program below creates a simple object and two complex object structures from a string input.
The first complex object structure contains an array and the second complex object structure contains another object. The output displays the object structures and the properties of the object structures.
<html> <body> <h2> Working with struct using<i> string split </i> </h2> <div id="structOneBtnWrap"> <button id="structOneBtn"> Click Me </button> </div> <p id="structOneOut"></p> <script> var structOneOut = document.getElementById("structOneOut"); var structOneBtnWrap = document.getElementById("structOneBtnWrap"); var structOneBtn = document.getElementById("structOneBtn"); var structOneInpStr = ""; structOneBtn.onclick = function() { structOneInpStr = ""; //structOneBtnWrap.style.display = "none"; function createStruct(keys) { if (!keys) return null; const kArr = keys.split(', '); const kCount = kArr.length; function createConstructor() { for (let i = 0; i < kCount; i++) this[kArr[i]] = arguments[i]; } return createConstructor; } const user = new createStruct("id, name"); const egan = new user(1, 'Egan'); structOneInpStr += JSON.stringify(egan) + "<br><br>"; structOneInpStr += "<b>name = </b>" + egan.name + "<br><br>"; structOneInpStr += "<b>id = </b>" + egan.id + "<br><br><br><br>"; const userMult = new createStruct("id, name, color"); const colors = new userMult(1, 'Anna', ['Blue', 'Grey']); structOneInpStr += JSON.stringify(colors) + "<br><br>"; structOneInpStr += "<b>color = </b>" + colors.color + "<br><br>"; structOneInpStr += "<b>first color = </b>" + colors.color[0] + "<br><br>"; structOneInpStr += "<b>second color = </b>" + colors.color[1] + "<br><br>"; structOneInpStr += "<b>id = </b>" + colors.id + "<br><br>"; structOneInpStr += "<b>name = </b>" + colors.name + "<br><br><br><br>"; const userData = new createStruct('job, place'); const moreData = new userData('Handicapper', 'USA'); const userObj = new createStruct('id, name, info'); const grace = new userObj(1, 'Grace', moreData); structOneInpStr += JSON.stringify(grace) + "<br><br>"; structOneInpStr += "<b>name = </b>" + grace.name + "<br><br>"; structOneInpStr += "<b>id = </b>" + grace.id + "<br><br>"; structOneInpStr += "<b>job = </b>" + grace.info.job + "<br><br>"; structOneInpStr += "<b>place = </b>" + grace.info.place + "<br><br>"; structOneOut.innerHTML = structOneInpStr; }; </script> </body> </html>
Using the 'this' keyword
Let us learn to create a struct using the 'this' keyword.
Users can follow the syntax below to accomplish this.
Syntax
function createStruct(val1, val2){
this.key1 = val1;
this.key2 = val2;
}
var objArr = [
new createStruct(‘val1', 'val2')
];
The above syntax creates a constructor using the 'this' keyword.
Properties
val1, val2 − The values.
Return Value
The constructor returns an array structure.
Example
The program below creates a structure from the array input using the 'this' keyword.
<html> <body> <h2> Working with struct using <i> 'this' </i> keyword reference function </h2> <div id="structFuncBtnWrap"> <button id="structFuncBtn"> Click Me </button> </div> <p id="structFuncOut"></p> <script> var structFuncOut = document.getElementById("structFuncOut"); var structFuncBtnWrap = document.getElementById("structFuncBtnWrap"); var structFuncBtn = document.getElementById("structFuncBtn"); var structFuncInpStr = ""; structFuncBtn.onclick = function() { structFuncInpStr = ""; //structFuncBtnWrap.style.display = "none"; function createMovie(rating, review) { this.rating = rating; this.review = review; structFuncInpStr += "Rating = <b>" + this.rating + "</b><br><br>"; structFuncInpStr += "Review = <b>" + this.review + "</b><br><br>"; } var movieArr = [ new createMovie('5', 'Great'), new createMovie('1', 'Poor') ]; structFuncInpStr += "<b>Struct = </b><br><br>" + JSON.stringify(movieArr); structFuncOut.innerHTML = structFuncInpStr; }; </script> </body> </html>
This tutorial taught us to work with structs in JavaScript. The struct is the same as the JavaScript object. The first method is a bit nested by using string split to create a structure. The second method using the 'this' keyword is simple to implement.
7K+ Views
