S02L04 - Palavras-chave, tipos de dados em JavaScript

html

Compreendendo Palavras-chave e Tipos de Dados do JavaScript: Um Guia Abrangente
Índice

Introdução ..........................................................1
Palavras-chave do JavaScript ...................................3

Palavras-chave Reservadas ..................................4
Novas Palavras-chave ES6 ..............................6
Palavras-chave Obsoletas ...................................8


Tipos de Dados do JavaScript ..............................10

Tipos de Dados Primitivos .........................11
Tipos de Dados Complexos ............................14
Tipagem Dinâmica no JavaScript .........17


Conclusão ............................................................20


Introdução
JavaScript é uma linguagem de programação versátil e amplamente utilizada que capacita desenvolvedores a criar aplicações web dinâmicas e interativas. Um aspecto fundamental para dominar o JavaScript está em compreender suas keywords e data types, que são blocos de construção essenciais para escrever código eficiente e sem erros.
Neste guia, aprofundamos nas várias keywords disponíveis no JavaScript, incluindo aquelas introduzidas no ES6 e aquelas que se tornaram obsoletas ao longo do tempo. Também exploramos os diferentes data types, variando de tipos primitivos como strings e numbers a tipos complexos como objects e functions. Seja você um iniciante ou esteja buscando reforçar seu conhecimento fundamental, este guia oferece uma visão abrangente para aprimorar suas habilidades de programação em JavaScript.
Pontos Principais Abordados:

Lista abrangente e explicação das keywords do JavaScript
Visão detalhada dos data types do JavaScript
Compreensão da tipagem dinâmica no JavaScript
Exemplos práticos e trechos de código para melhor compreensão

Prós e Contras:
Prós:

Melhora a legibilidade e manutenibilidade do código
Previne erros de programação comuns
Facilita a gestão eficiente de memória

Contras:

keywords reservadas não podem ser usadas como nomes de variáveis ou funções, o que pode limitar a flexibilidade na nomeação
A tipagem dinâmica pode às vezes levar a problemas inesperados de coerção de tipos

Quando e Onde Usar:
Compreender keywords e data types é crucial em todas as etapas do desenvolvimento em JavaScript, seja você:

Construindo aplicações web com frameworks como React
Desenvolvendo serviços backend usando Node.js
Escrevendo scripts para automação ou processamento de dados

Tabela de Comparação: Palavras-chave Legadas vs. Modernas do JavaScript


Funcionalidade
Palavras-chave Legadas do JavaScript
Palavras-chave ES6+ do JavaScript


Declarações de Variável
var
let, const


Controle de Iteração
var, function
let, const, for...of, for...in


Definições de Função
function
Arrow functions (=>)


Módulos
Nenhum
import, export



Palavras-chave do JavaScript
Keywords no JavaScript são palavras reservadas que têm significados especiais para a sintaxe da linguagem. Elas desempenham um papel fundamental na definição da estrutura e comportamento do código. É essencial compreender estas keywords para evitar conflitos e erros em seus programas.
Palavras-chave Reservadas
Palavras-chave reservadas são termos que fazem parte da sintaxe da linguagem JavaScript e não podem ser usadas como identificadores (nomes de variáveis, nomes de funções, etc.).
Lista de Palavras-chave Reservadas:

Palavras-chave de Controle de Fluxo: if, else, switch, case, default, for, while, do, break, continue, return, try, catch, finally, throw
Palavras-chave de Declaração de Variáveis: var, let, const
Palavras-chave de Funções: function
Palavras-chave de Classes: class, extends, super
Outros: true, false, null, undefined, new, this, typeof, instanceof, delete, in, void, with, yield, await

Exemplo de Uso:




		
		
			
			
Java
			
			    // Using reserved keywords correctly
    function greet(name) {
        if (name) {
            return `Hello, ${name}!`;
        } else {
            return 'Hello, World!';
        }
    }
			
				
					
				
					1
2
3
4
5
6
7
8
				
						    // Using reserved keywords correctly
    function greet(name) {
        if (name) {
            return `Hello, ${name}!`;
        } else {
            return 'Hello, World!';
        }
    }
					
				
			
		


Novas Palavras-chave ES6
Com a introdução do ES6 (ECMAScript 2015), várias novas keywords surgiram para suportar recursos modernos do JavaScript, aprimorando as capacidades da linguagem.
Lista de Palavras-chave ES6:

Declaração de Escopo de Bloco: let, const
Classes e Herança: class, extends, super
Módulos: import, export
Arrow Functions: => (sintaxe de arrow function)
Promises e Programação Assíncrona: async, await
Outros: yield, static, get, set, of

Exemplo de Uso:




		
		
			
			
Java
			
			    // Using ES6 keywords: class, extends, constructor, super
    class Person {
        constructor(name) {
            this.name = name;
        }
    
        greet() {
            return `Hello, ${this.name}!`;
        }
    }
    
    class Employee extends Person {
        constructor(name, position) {
            super(name);
            this.position = position;
        }
    
        describe() {
            return `${this.name} is a ${this.position}.`;
        }
    }
    
    const employee = new Employee('Alice', 'Developer');
    console.log(employee.greet());     // Output: Hello, Alice!
    console.log(employee.describe());  // Output: Alice is a Developer.
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
				
						    // Using ES6 keywords: class, extends, constructor, super
    class Person {
        constructor(name) {
            this.name = name;
        }
    
        greet() {
            return `Hello, ${this.name}!`;
        }
    }
    
    class Employee extends Person {
        constructor(name, position) {
            super(name);
            this.position = position;
        }
    
        describe() {
            return `${this.name} is a ${this.position}.`;
        }
    }
    
    const employee = new Employee('Alice', 'Developer');
    console.log(employee.greet());     // Output: Hello, Alice!
    console.log(employee.describe());  // Output: Alice is a Developer.
					
				
			
		


Palavras-chave Obsoletas
Com o tempo, certas keywords tornaram-se obsoletas ou reservadas para uso futuro, e seu uso é desaconselhado no desenvolvimento moderno em JavaScript.
Lista de Palavras-chave Obsoletas:

abstract, boolean, byte, char, double, final, float, goto, int, interface, long, native, package, private, protected, public, short, static, synchronized, throws, transient, volatile

Exemplo de Uso:




		
		
			
			
Java
			
			    // Deprecated usage: throw and throws
    // It's recommended to use only 'throw' in modern JavaScript
    
    // Correct Usage:
    function checkValue(value) {
        if (value === undefined) {
            throw new Error('Value cannot be undefined');
        }
    }
    
    try {
        checkValue();
    } catch (error) {
        console.error(error.message);  // Output: Value cannot be undefined
    }
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
				
						    // Deprecated usage: throw and throws
    // It's recommended to use only 'throw' in modern JavaScript
    
    // Correct Usage:
    function checkValue(value) {
        if (value === undefined) {
            throw new Error('Value cannot be undefined');
        }
    }
    
    try {
        checkValue();
    } catch (error) {
        console.error(error.message);  // Output: Value cannot be undefined
    }
					
				
			
		


Nota: Evite usar palavras-chave obsoletas para garantir compatibilidade futura e aderência às melhores práticas de codificação.

Tipos de Dados do JavaScript
JavaScript suporta vários data types, amplamente categorizados em primitive e complex (referência). Compreender esses data types é fundamental para manipular e armazenar dados de forma eficaz em suas aplicações.
Tipos de Dados Primitivos
Data types primitivos são os tipos de dados mais básicos no JavaScript. Eles são imutáveis e mantêm seus valores diretamente.
Lista de Tipos de Dados Primitivos:

String
Number
Boolean
Undefined
Null
Symbol (introduced in ES6)
BigInt (introduced in ES2020)

1. String
Uma sequência de caracteres usada para representar texto.
Exemplo:




		
		
			
			
Java
			
			    let greeting = "Hello, World!";
    console.log(greeting);  // Output: Hello, World!
			
				
					
				
					1
2
				
						    let greeting = "Hello, World!";
    console.log(greeting);  // Output: Hello, World!
					
				
			
		


2. Number
Representa tanto números inteiros quanto números de ponto flutuante.
Exemplo:




		
		
			
			
Java
			
			    let age = 25;            // Integer
    let price = 19.99;       // Floating-point number
    let largeNumber = 1e6;   // Exponential notation (1000000)
    console.log(age, price, largeNumber); // Output: 25 19.99 1000000
			
				
					
				
					1
2
3
4
				
						    let age = 25;            // Integer
    let price = 19.99;       // Floating-point number
    let largeNumber = 1e6;   // Exponential notation (1000000)
    console.log(age, price, largeNumber); // Output: 25 19.99 1000000
					
				
			
		


3. Boolean
Representa uma entidade lógica e pode ter dois valores: true ou false.
Exemplo:




		
		
			
			
Java
			
			    let isStudent = true;
    let hasGraduated = false;
    console.log(isStudent, hasGraduated); // Output: true false
			
				
					
				
					1
2
3
				
						    let isStudent = true;
    let hasGraduated = false;
    console.log(isStudent, hasGraduated); // Output: true false
					
				
			
		


4. Undefined
Uma variável que foi declarada mas não recebeu um valor é do tipo undefined.
Exemplo:




		
		
			
			
Java
			
			    let x;
    console.log(x); // Output: undefined
			
				
					
				
					1
2
				
						    let x;
    console.log(x); // Output: undefined
					
				
			
		


5. Null
null é um valor de atribuição que representa nenhum valor ou nenhum objeto.
Exemplo:




		
		
			
			
Java
			
			    let selectedItem = null;
    console.log(selectedItem); // Output: null
			
				
					
				
					1
2
				
						    let selectedItem = null;
    console.log(selectedItem); // Output: null
					
				
			
		


6. Symbol (ES6)
Usado para criar identificadores únicos para propriedades de objetos.
Exemplo:




		
		
			
			
Java
			
			    let sym1 = Symbol('description');
    let sym2 = Symbol('description');
    console.log(sym1 === sym2); // Output: false
			
				
					
				
					1
2
3
				
						    let sym1 = Symbol('description');
    let sym2 = Symbol('description');
    console.log(sym1 === sym2); // Output: false
					
				
			
		


7. BigInt (ES2020)
Representa números inteiros maiores que 2^53 - 1, que é o maior número que o JavaScript pode representar de forma confiável com o tipo Number.
Exemplo:




		
		
			
			
Java
			
			    let bigNumber = 123456789012345678901234567890n;
    console.log(bigNumber); // Output: 123456789012345678901234567890n
			
				
					
				
					1
2
				
						    let bigNumber = 123456789012345678901234567890n;
    console.log(bigNumber); // Output: 123456789012345678901234567890n
					
				
			
		


Tipos de Dados Complexos
Complex data types são objects que podem armazenar coleções de dados e entidades mais complexas.
1. Object
Objects são coleções de pares chave-valor. Eles são versáteis e formam a espinha dorsal da programação em JavaScript.
Exemplo:




		
		
			
			
Java
			
			    let person = {
        firstName: "John",
        lastName: "Doe",
        age: 30
    };
    console.log(person.firstName); // Output: John
			
				
					
				
					1
2
3
4
5
6
				
						    let person = {
        firstName: "John",
        lastName: "Doe",
        age: 30
    };
    console.log(person.firstName); // Output: John
					
				
			
		


2. Array
Arrays são coleções ordenadas de dados, que podem incluir elementos de diferentes data types.
Exemplo:




		
		
			
			
Java
			
			    let fruits = ["Apple", "Banana", "Cherry"];
    console.log(fruits[1]); // Output: Banana
			
				
					
				
					1
2
				
						    let fruits = ["Apple", "Banana", "Cherry"];
    console.log(fruits[1]); // Output: Banana
					
				
			
		


3. Function
Functions são objects de primeira classe no JavaScript, o que significa que podem ser atribuídas a variáveis, passadas como argumentos e retornadas de outras functions.
Exemplo:




		
		
			
			
Java
			
			    // Function assigned to a variable
    let greet = function(name) {
        return `Hello, ${name}!`;
    };
    
    console.log(greet("Alice")); // Output: Hello, Alice!
			
				
					
				
					1
2
3
4
5
6
				
						    // Function assigned to a variable
    let greet = function(name) {
        return `Hello, ${name}!`;
    };
    
    console.log(greet("Alice")); // Output: Hello, Alice!
					
				
			
		


Tipagem Dinâmica no JavaScript
JavaScript é uma linguagem dynamically typed, o que significa que variable types são determinados em runtime e podem mudar conforme necessário.
Exemplo:




		
		
			
			
Java
			
			    let data = "Hello";
    console.log(typeof data); // Output: string
    
    data = 100;
    console.log(typeof data); // Output: number
    
    data = true;
    console.log(typeof data); // Output: boolean
			
				
					
				
					1
2
3
4
5
6
7
8
				
						    let data = "Hello";
    console.log(typeof data); // Output: string
    
    data = 100;
    console.log(typeof data); // Output: number
    
    data = true;
    console.log(typeof data); // Output: boolean
					
				
			
		


Vantagens:

Flexibilidade em codificação
Ciclos de desenvolvimento rápidos

Desvantagens:

Potencial para erros em runtime
Mais difícil depurar problemas relacionados a tipos

Exemplos Práticos e Trechos de Código
Abaixo está um exemplo abrangente que demonstra vários data types e keywords discutidos:




		
		
			
			
Java
			
			    // Example: Managing a list of students
    
    // Using 'let' and 'const' keywords
    const className = "Introduction to JavaScript";
    let students = ["Alice", "Bob", "Charlie"];
    
    // Function to add a new student
    function addStudent(name) {
        if (typeof name !== 'string') {
            throw new TypeError('Name must be a string');
        }
        students.push(name);
        console.log(`${name} has been added to ${className}.`);
    }
    
    // Adding a new student
    addStudent("David"); // Output: David has been added to Introduction to JavaScript.
    
    // Adding an undefined student (will throw an error)
    try {
        addStudent(undefined);
    } catch (error) {
        console.error(error.message); // Output: Name must be a string
    }
    
    // Displaying all students
    console.log(students); // Output: ["Alice", "Bob", "Charlie", "David"]
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
				
						    // Example: Managing a list of students
    
    // Using 'let' and 'const' keywords
    const className = "Introduction to JavaScript";
    let students = ["Alice", "Bob", "Charlie"];
    
    // Function to add a new student
    function addStudent(name) {
        if (typeof name !== 'string') {
            throw new TypeError('Name must be a string');
        }
        students.push(name);
        console.log(`${name} has been added to ${className}.`);
    }
    
    // Adding a new student
    addStudent("David"); // Output: David has been added to Introduction to JavaScript.
    
    // Adding an undefined student (will throw an error)
    try {
        addStudent(undefined);
    } catch (error) {
        console.error(error.message); // Output: Name must be a string
    }
    
    // Displaying all students
    console.log(students); // Output: ["Alice", "Bob", "Charlie", "David"]
					
				
			
		


Explicação:

Keywords Utilizados:

const para className tornar imutável.
let para students permitir modificação.


Data Types:

className é uma String.
students é um Array de Strings.


Funcionalidade:

A função addStudent demonstra o uso do operador typeof para verificar data types e throw para lidar com erros.


Saída:

Adiciona com sucesso um novo student e lida graciosamente com data types incorretos.




Conclusão
Dominar as keywords e data types do JavaScript é essencial para escrever código eficaz e eficiente. Compreendendo as palavras-chave reservadas, as novas adições do ES6 em diante, e as nuances dos data types primitivos e complexos, desenvolvedores podem aproveitar todo o poder do JavaScript para construir aplicações robustas.
Pontos Principais:

Keywords definem a estrutura e sintaxe do JavaScript e não devem ser usadas como identificadores.
Data Types no JavaScript são categorizados em tipos primitivos e complexos, cada um servindo a propósitos distintos.
Tipagem Dinâmica oferece flexibilidade, mas requer manipulação cuidadosa para evitar erros em runtime.
ES6 e Além introduziram palavras-chave e funcionalidades poderosas que aprimoram as capacidades do JavaScript.

SEO Optimized Keywords:
JavaScript keywords, JavaScript data types, ES6 keywords, programação em JavaScript, dynamically typed, primitive data types, complex data types, tutoriais em JavaScript, aprendendo JavaScript, JavaScript para iniciantes, JavaScript functions, JavaScript objects, JavaScript arrays, type of operator, melhores práticas em JavaScript, padrões de codificação em JavaScript

Sample Program Code with Explanation
Código de Programa de Exemplo com Explicação
Abaixo está um programa JavaScript de exemplo que demonstra o uso de várias keywords e data types discutidos neste guia.




		
		
			
			
Java
			
			    // Sample Program: Student Management System
    
    // Using 'const' for immutable data
    const schoolName = "Tech Academy";
    
    // Using 'let' for mutable data
    let students = [];
    
    // Function to add a student
    function addStudent(name, age) {
        if (typeof name !== 'string') {
            throw new TypeError('Student name must be a string.');
        }
        if (typeof age !== 'number') {
            throw new TypeError('Student age must be a number.');
        }
        
        // Creating a student object
        const student = {
            name: name,
            age: age,
            enrolled: true
        };
        
        students.push(student);
        console.log(`${name} has been enrolled in ${schoolName}.`);
    }
    
    // Adding students
    addStudent("Emily", 22); // Output: Emily has been enrolled in Tech Academy.
    addStudent("Daniel", 25); // Output: Daniel has been enrolled in Tech Academy.
    
    // Displaying all students
    console.log(students);
    /*
    Output:
    [
        { name: 'Emily', age: 22, enrolled: true },
        { name: 'Daniel', age: 25, enrolled: true }
    ]
    */
    
    // Function to display student names
    function displayStudentNames() {
        students.forEach(function(student) {
            console.log(student.name);
        });
    }
    
    displayStudentNames();
    /*
    Output:
    Emily
    Daniel
    */
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
				
						    // Sample Program: Student Management System
    
    // Using 'const' for immutable data
    const schoolName = "Tech Academy";
    
    // Using 'let' for mutable data
    let students = [];
    
    // Function to add a student
    function addStudent(name, age) {
        if (typeof name !== 'string') {
            throw new TypeError('Student name must be a string.');
        }
        if (typeof age !== 'number') {
            throw new TypeError('Student age must be a number.');
        }
        
        // Creating a student object
        const student = {
            name: name,
            age: age,
            enrolled: true
        };
        
        students.push(student);
        console.log(`${name} has been enrolled in ${schoolName}.`);
    }
    
    // Adding students
    addStudent("Emily", 22); // Output: Emily has been enrolled in Tech Academy.
    addStudent("Daniel", 25); // Output: Daniel has been enrolled in Tech Academy.
    
    // Displaying all students
    console.log(students);
    /*
    Output:
    [
        { name: 'Emily', age: 22, enrolled: true },
        { name: 'Daniel', age: 25, enrolled: true }
    ]
    */
    
    // Function to display student names
    function displayStudentNames() {
        students.forEach(function(student) {
            console.log(student.name);
        });
    }
    
    displayStudentNames();
    /*
    Output:
    Emily
    Daniel
    */
					
				
			
		


Explicação do Código:

Constantes e Variáveis:

schoolName é declarada usando const já que o nome da escola não muda.
students é declarada com let pois adicionaremos students a este array.


Função addStudent:

Parâmetros: name (String), age (Number)
Verificação de Tipos: Usa typeof para garantir tipos de dados corretos.
Tratamento de Erros: Lança erros se os tipos de dados fornecidos estiverem incorretos.
Criação de Object: Cria um object student com propriedades name, age, e enrolled.
Adicionando ao Array: Adiciona o object student ao array students.
Saída no Console: Confirma a inscrição.


Adicionando Students:

Adiciona dois students, Emily e Daniel, com suas respectivas idades.


Exibindo Students:

Exibe todo o array students mostrando os objects student.


Função displayStudentNames:

Itera sobre o array students usando forEach.
Exibe o nome de cada student individualmente.



Saída:




		
		
			
			
Java
			
			Emily has been enrolled in Tech Academy.
Daniel has been enrolled in Tech Academy.
[
    { name: 'Emily', age: 22, enrolled: true },
    { name: 'Daniel', age: 25, enrolled: true }
]
Emily
Daniel
			
				
					
				
					1
2
3
4
5
6
7
8
				
						Emily has been enrolled in Tech Academy.
Daniel has been enrolled in Tech Academy.
[
    { name: 'Emily', age: 22, enrolled: true },
    { name: 'Daniel', age: 25, enrolled: true }
]
Emily
Daniel
					
				
			
		


Este programa de exemplo demonstra a aplicação prática de keywords como const, let, function, e data types como String, Number, e Object. Também apresenta o tratamento de erros usando throw e a verificação de tipos com o operador typeof.
Nota: Este artigo é gerado por IA.
Funcionalidade	Palavras-chave Legadas do JavaScript	Palavras-chave ES6+ do JavaScript
Declarações de Variável	var	let, const
Controle de Iteração	var, function	let, const, for...of, for...in
Definições de Função	function	Arrow functions (=>)
Módulos	Nenhum	import, export