Javascript Strings and Objects

By /

JavaScript works with different types of data. Two types you will use a lot are strings and objects. A string is used for text, while an object is useful when you want to keep related information together.

Let’s start with Javascript Strings and Objects.

JavaScript String Methods

A string is a group of characters written inside quotes.

let message = "Hello JavaScript";

JavaScript provides several methods that make it easier to work with strings.

length

The length property tells you how many characters a string contains.

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript String Length</title>
</head>
<body>

    <h1>String Length</h1>

    <script>
        let message = "Hello JavaScript";

        console.log(message.length);
    </script>

</body>
</html>

Output:

16

Spaces are also counted as characters.

toUpperCase() and toLowerCase()

  • toUpperCase() changes the letters to uppercase.
  • toLowerCase() changes the letters to lowercase.
<!DOCTYPE html>
<html>
<head>
    <title>JavaScript String Methods</title>
</head>
<body>

    <h1>String Methods</h1>

    <script>
        let message = "Hello JavaScript";

        console.log(message.toUpperCase());
        console.log(message.toLowerCase());
    </script>

</body>
</html>

Output:

HELLO JAVASCRIPT
hello javascript

trim()

The trim() method removes extra spaces from the beginning and end of a string. This is especially useful when working with text entered by a user.

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript trim Method</title>
</head>
<body>

    <h1>trim() Example</h1>

    <script>
        let name = "   Aman   ";

        console.log(name.trim());
    </script>

</body>
</html>

Output:

Aman

includes()

The includes() method checks whether a string contains a particular word or character. It returns true or false.

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript includes Method</title>
</head>
<body>

    <h1>includes() Example</h1>

    <script>
        let message = "I am learning JavaScript";

        console.log(message.includes("JavaScript"));
        console.log(message.includes("Python"));
    </script>

</body>
</html>

Output:

true
false

slice()

The slice() method takes out part of a string and returns it as a new string.

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript slice Method</title>
</head>
<body>

    <h1>slice() Example</h1>

    <script>
        let language = "JavaScript";

        console.log(language.slice(0, 4));
    </script>

</body>
</html>

Output:

Java

The first number is the starting position, and the second number tells JavaScript where to stop.

replace()

The replace() method replaces part of a string with another value.

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript replace Method</title>
</head>
<body>

    <h1>replace() Example</h1>

    <script>
        let message = "I like Java";

        let newMessage = message.replace("Java", "JavaScript");

        console.log(newMessage);
    </script>

</body>
</html>

Output:

I like JavaScript

split()

The split() method breaks a string into an array.

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript split Method</title>
</head>
<body>

    <h1>split() Example</h1>

    <script>
        let message = "HTML CSS JavaScript";

        let languages = message.split(" ");

        console.log(languages);
    </script>

</body>
</html>

Output:

["HTML", "CSS", "JavaScript"]

The space " " tells JavaScript where to split the string.

What are Objects?

Strings and arrays are useful for storing data, but we often need to keep several related details together. For example, a student has a name, age, course, and marks. A JavaScript object lets us store all of this information together. An object stores information using key-value pairs.

Creating Objects

You create an object using curly braces { }.

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Object</title>
</head>
<body>

    <h1>JavaScript Objects</h1>

    <script>
        const student = {
            name: "Aman",
            age: 15,
            course: "JavaScript",
            marks: 85
        };

        console.log(student);
    </script>

</body>
</html>

Here, name, age, course, and marks are the properties of the object.

Accessing Object Properties

You can access an object’s property using dot notation.

<!DOCTYPE html>
<html>
<head>
    <title>Accessing Object Properties</title>
</head>
<body>

    <h1>Student Details</h1>

    <script>
        const student = {
            name: "Aman",
            age: 15,
            course: "JavaScript"
        };

        console.log(student.name);
        console.log(student.age);
        console.log(student.course);
    </script>

</body>
</html>

Output:

Aman
15
JavaScript

You can also use bracket notation:

console.log(student["name"]);

Both ways give you the value of the name property.

Adding, Updating, and Deleting Properties

Object properties can be added, changed, or removed.

Example

<!DOCTYPE html>
<html>
<head>
    <title>Updating JavaScript Objects</title>
</head>
<body>

    <h1>Object Properties</h1>

    <script>
        const student = {
            name: "Aman",
            age: 15
        };

        student.marks = 85;
        student.age = 16;

        delete student.marks;

        console.log(student);
    </script>

</body>
</html>

The marks property is added first, age is updated, and then marks is removed.

Object Methods

An object can also contain a function. A function stored inside an object is called a method.

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Object Method</title>
</head>
<body>

    <h1>Object Method</h1>

    <script>
        const student = {
            name: "Aman",

            greet: function() {
                console.log("Hello, my name is " + this.name);
            }
        };

        student.greet();
    </script>

</body>
</html>

Output:

Hello, my name is Aman

Here, greet is the method.

The this keyword refers to the current object, so this.name means the name property of student.

Nested Objects

An object can contain another object. This is called a nested object.

<!DOCTYPE html>
<html>
<head>
    <title>Nested JavaScript Object</title>
</head>
<body>

    <h1>Nested Object</h1>

    <script>
        const student = {
            name: "Aman",
            age: 15,

            address: {
                city: "Delhi",
                country: "India"
            }
        };

        console.log(student.name);
        console.log(student.address.city);
        console.log(student.address.country);
    </script>

</body>
</html>

Output:

Aman
Delhi
India

The address property contains another object with city and country.

Key Points

  • String methods help you work with text.
  • toUpperCase() and toLowerCase() change letter case.
  • trim() removes extra spaces from the beginning and end.
  • includes() checks whether text exists in a string.
  • slice() gets part of a string.
  • replace() replaces text.
  • split() converts a string into an array.
  • Objects store related information using key-value pairs.
  • Object properties can be added, updated, and deleted.
  • A function inside an object is called a method.
  • An object inside another object is called a nested object.

Next, we will move to DOM and Events, where JavaScript starts interacting with HTML pages.

Frequently Asked Questions (FAQs)

Q1. What are JavaScript Strings and Objects?

JavaScript Strings are used to store and work with text, while JavaScript Objects store related information using key-value pairs. Both are commonly used when handling data in JavaScript programs.

Q2. What are JavaScript String Methods used for?

JavaScript String Methods are used to perform common operations on text. Methods such as toUpperCase(), trim(), includes(), slice(), replace(), and split() make string handling easier.

Q3. How do you create JavaScript Objects?

JavaScript Objects can be created using curly braces {}. Inside the braces, you define JavaScript Object Properties using key-value pairs, such as name: "Aman" and age: 15.

Q4. How do you access JavaScript Object Properties?

JavaScript push JavaScript Object Properties can be accessed using dot notation, such as student.name, or bracket notation, such as student["name"]. Both methods return the value stored in the property.methods are used to change the end of an array. push() adds an item to the end, while pop() removes the last item.

Q5. What is a nested object in JavaScript?

A nested object is an object placed inside another JavaScript object. For example, a student object can contain an address object with properties such as city and country.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top