A. Введение в типы данных:

В программировании типы данных помогают нам определить типы данных, которые хранятся в переменной. Например,

let number = 32;

Здесь числовая переменная хранит недесятичное число. В этом случае тип данных этой переменной — целое число.

Идея состоит в том, что если вы хотите использовать какую-либо переменную, вы должны знать, какие данные она хранит.

→ Например, предположим, что вы добавляете переменные разных типов. Давайте посмотрим, как будет выглядеть ваш код: -

let key = 10 + "Rahul";

Здесь вы думаете о добавлении переменной типа число с типом string.

Технически это должно вызвать ошибку, однако в JavaScript этот код работает совершенно нормально.

let key = "10" + "Rahul";
console.log(key);

Приведенный выше код дает 10Rahul, поскольку переменные JavaScript оцениваются слева направо, поэтому целочисленное значение 10 преобразуется в строковое значение «10». Вы узнаете о том, что здесь происходит, изучая тему преобразования типов.

Кроме того, если вы присвоите переменной значение определенного типа, вы также можете переназначить значение другого типа данных той же самой переменной.

Рассмотрим код, показанный ниже: -

index.html

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Data Types in JavaScript</title> 
</head>
<body>
        <h1>Dynamic Typing Example.</h1>
        <script>
                let num = 23;
                console.log(num);
                num = true;
                console.log(num);
                num = "also accepted";
                console.log(num);
        </script>
</body>
</html>

Объяснение→ В приведенном выше коде я создал переменную с именем num, которая изначально содержала число (23) в качестве значения, а позже я присвоил логическое значение (true) к нему, прежде чем снова изменить тип данных на строку («также принимается»).

Если вы запустите приведенный выше код в браузере, вы получите следующий вывод в терминале.

Вывод:

B. Различные типы типов данных в JavaScript: -

В JavaScript вы можете разделить все типы данных на две категории:

  1. Примитивные типы:-
    Типы данных, которые однажды определены, не могут быть изменены, называются примитивными типами данных.
  2. Непримитивные типы.
    Типы данных, которые могут быть изменены после определения, называются непримитивными типами данных.

Строки, числа, логические значения, null и undefined являются примитивными типами данных в JavaScript, тогда как все, что является объектом, является непримитивным типом данных в JavaScript.

1. Примитивные типы данных: -

а. Строки :-

→ Строка в JavaScript — это последовательность символов.

→ Например, текст «LinkedIn» считается строкой в ​​JavaScript.

→ Строки заключаются в кавычки, а JavaScript дает вам свободу писать строки как в одинарных, так и в двойных кавычках.

Рассмотрим фрагмент кода, где я создам строку, используя одинарные и двойные кавычки.

Фрагмент кода:

let destination = "Goa";

let anotherDestination = 'Seychelles';

→ Вы можете использовать одинарную или двойную кавычку, но вы не можете использовать одну и ту же начальную кавычку между строковым значением. Например,

  • «Гоа — это не только пляжи» → действительно, потому что строка начинается с двойных кавычек, а между ними используется одинарная кавычка.
  • «Гоа — это не только пляжи» → недействительно, поскольку строка начинается с одинарной кавычки, а между ними также используется одинарная кавычка.

Рассмотрим код, показанный ниже.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Data Types in JavaScript</title> 
</head>
<body>
        <h1>String - Quote Example.</h1>
        <script>
                let destination = "Goa isn't all about just beaches";
                console.log(destination);
                let anotherDestination = 'Dubai and the famous "Burj Khalifa"';
                console.log(anotherDestination);
        </script>
</body>
</html>

Пояснение →

В приведенном выше коде я использовал две переменные со строковыми значениями. Первая строка заключена в двойные кавычки, однако внутри самой строки находится одинарная кавычка (нет).

Точно так же вторая строка заключена в одинарные кавычки и имеет внутри двойные кавычки («Бурдж-Халифа»).

Оба допустимы в строках JavaScript, поэтому я получаю следующий вывод в терминале.

Вывод:

б. Номер :-

В JavaScript тип числа можно разделить на два типа:

  • без десятичной точки, известной как целочисленный тип.
  • с десятичным числом, известным как плавающий тип.

Рассмотрим код, показанный ниже.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Data Types in JavaScript</title> 
</head>
<body>
        <h1>Number - Example.</h1>
        <script>
                let firstNumber = 123;
                console.log(firstNumber);
                let secondNumber = 456.789;
                console.log(secondNumber);
        </script>
</body>
</html>

Если вы запустите приведенный выше код в браузере, вы получите следующий вывод в терминале.

Вывод:

в. BigInt :-

При представлении чисел следует учитывать, что числа, которые не находятся в диапазоне от 2^{53} — 1 до -(2^{53} — 1), не могут быть представлены типом Число, и для них необходимо сделать использование типа BigInt.

Одна важная вещь, которую следует отметить в отношении типа BigInt, заключается в том, что целое число BigInt нельзя добавлять к обычному целому числу.

Рассмотрим код, показанный ниже.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Data Types in JavaScript</title>
</head>
<body>
        <h1>BigInt - Example.</h1>
        <script>
                // A BigInt value
                const firstValue = 900819925234740998n;
                // Adding the two integers
                const firstResult = firstValue + 1n;
                console.log(firstResult);
                const secondValue = 9001103719925124740998n;
                // The below code will result in an error
                const secondResult = secondValue + 1;
                console.log(secondResult);
        </script>
</body>
</html>

Объяснение → В приведенном выше коде я объявил две переменные, каждая из которых содержит большие значения, а затем я попытался использовать операции добавления этих двух переменных.

Сначала я добавил значение bigInt к другому значению bigInt (1n), которое дает сумму двух чисел. Затем я добавил значение bigInt к обычному целочисленному значению (1), что вызвало ошибку.

Это связано с тем, что я не могу выполнить сложение между значением BigInt и нормальным целочисленным значением.

Если вы запустите приведенный выше код в браузере, вы получите следующий вывод в своем терминале.

Вывод:

д. Не определено :-

В JavaScript переменная с неопределенным типом значения означает, что "значение не присвоено этой переменной".

Рассмотрим код, показанный ниже.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Data Types in JavaScript</title> 
</head>
<body>
        <h1>Undefined - Example.</h1>
        <script>
                let val;
                console.log(val);
        </script>
</body>
</html>

Объяснение→ В приведенном выше коде я объявил переменную с именем val и не присвоил ей никакого значения. Следовательно, JavaScript присваивает ему значение undefined.

Итак, когда вы попытаетесь напечатать переменную, вы получите undefined в качестве вывода.

Вывод:

e. Логическое :-

Логический тип в JavaScript используется для представления логических сущностей, и они могут иметь только двазначения: –

(i) верно.
(ii) неверно.

Рассмотрим код, показанный ниже.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Data Types in JavaScript</title>
</head>
<body>
        <h1>Boolean - Example.</h1>
        <script>
                let isMarried = false;
                console.log(isMarried);
                let isStudying = true;
                console.log(isStudying);
        </script>
</body>
</html>

Объяснение →В приведенном выше коде я объявил две переменные, а именно isMarried и isStudying, где значения этих переменных boolean, либо true, либо false, а затем напечатал обе эти переменные.

Если вы запустите приведенный выше код в браузере, вы получите следующий вывод в терминале.

Вывод:

ж. Нуль :-

Null в JavaScript представляет собой преднамеренное отсутствие вместо значения. В JavaScript оно рассматривается как значение false, если вы хотите использовать его как логическую операцию.

Рассмотрим код, показанный ниже.

Код:

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Data Types in JavaScript</title>
</head>
<body>
        <h1>Null - Example.</h1>
        <script>
                let value = null;
                console.log(value);
        </script>
</body>
</html>

Объяснение→ В приведенном выше коде я объявил переменную с именем value и присвоил ей нулевое значение.

Когда вы печатаете значение, вы получите nullв качестве вывода.

Вывод:

2. Непримитивные типы данных: -

Все типы данных, которые вы видели выше, называются «примитивными» типами данных, и сейчас вы изучите типы данных, которые по своей природе являются «непримитивными».

а. Объект :-

В JavaScript объект — это объект, к которому присоединены свойства и методы. Тип объекта используется в основном для хранения различных наборов пар "ключ-значение" и более сложных объектов.

Давайте посмотрим пример.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Data Types in JavaScript</title>
</head>
<body>
        <h1>Object - Example.</h1>
        <script>
                let person = {
                        name: 'John',
                        age: 35,
                        isMarried: true,
                }
                console.log(person);
                console.log(person.name);
                console.log(person.age);
                console.log(person.isMarried);
        </script>
</body>
</html>

Объяснение→ В приведенном выше коде я создал объект.

let person = {
          name: 'John',
          age: 35,
          isMarried: true,
  }

Здесь массив включает 3 свойства: name, age и isMarried с разными значениями.

Затем использовал точечную нотацию для доступа к этим свойствам массива.

Если вы запустите приведенный выше код в браузере, вы получите следующий вывод в терминале.

Вывод:

б. Массивы:-

В JavaScript массив позволяет нам хранить набор из нескольких элементов одного или разных типов под одним именем переменной.

Массивы в JavaScript имеют изменяемый размер и могут содержать смесь различных типов данных.

Давайте посмотрим пример.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Data Types in JavaScript</title>
</head>
<body>
        <h1>Array - Example.</h1>
        <script>
                // an array of string
                const countries = ['India', 'Japan', 'Tokyo'];
                console.log(countries);
                // an array of integer
                const numbers = [1, 3, 5, 7];
                console.log(numbers);
        </script>
</body>
</html>

Объяснение→ В приведенном выше коде я создал два массива.

→ Для хранения «строковых» данных:-
const countrys = [‘Индия’, ‘Япония’, ‘Токио’];

→ Чтобы сохранить числа:-
const numbers = [1, 3, 5, 7];

Если вы запустите приведенный выше код в браузере, вы получите следующий вывод в терминале.

Вывод:

Вы узнаете больше о массивах, изучая Массивы в JavaScript.

C. Проверьте тип данных, используя typeof: -

В JavaScript вы можете использовать оператор typeof для проверки типа данных переменной.

Синтаксис:

typeof operand;

Давайте рассмотрим пример, в котором вы увидите, как можно использовать оператор typeof в JavaScript для разных операндов.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Data Types in JavaScript</title>
</head>
<body>
        <h1>typeof - Example.</h1>
        <script>
                console.log(typeof "123");
                console.log(typeof 123);
                console.log(typeof NaN);
                console.log(typeof true);
                console.log(typeof ['1','2','3']);
                console.log(typeof {'name':'1', 'age':25});
                console.log(typeof function(){});
                console.log(typeof null);
                console.log(typeof undefined);
        </script>
</body>
</html>

Объяснение →В приведенном выше коде вы используете оператор typeof для различных значений для проверки типов данных.

Если вы запустите приведенный выше код в браузере, вы получите следующий вывод в терминале.

Вывод:

Заключение :-

В этой статье вы узнали о типах данных в JavaScript. Вы также изучили различные типы типов данных и примеры каждого из них и, наконец, научились проверять тип данных переменной.

Как бы вы оценили эту статью →

Расскажите об этом, аплодируя и комментируя под этой статьей, и не забудьте поделиться этой статьей с новичками или теми, кто в настоящее время плохо знаком с веб-разработкой и хочет узнать об этом.

Подпишитесь на меня, чтобы увидеть больше таких статей!!

Спасибо 👋✨