Neste artigo, exploraremos o uso da propriedade length em JavaScript, seus pré-requisitos e como ela desempenha um papel vital na obtenção de informações cruciais sobre as dimensões dos elementos. Essa ferramenta é frequentemente usada para revelar dados sobre o tamanho de objetos específicos, como arrays e strings.
O JavaScript, uma linguagem poderosa para criar conteúdo dinâmico, controlar multimídia e imagens animadas, está no cerne da experiência web envolvente. Aprender suas particularidades e as funções envolvidas garante ao programador amplas oportunidades no mercado de trabalho.
Acompanhe a leitura e saiba mais sobre como usá-la.
Mais artigos sobre JS:
- JavaScript Splice: adicionando e removendo elementos
- JavaScript .length: função ou não função?
- Split JavaScript: dividir uma string em array
- Filter JavaScript: filtrando e gerindo dados
- Array JavaScript: como manipular vetores
- For JavaScript: como usar esse laço de repetição
- If JavaScript: O que é e como funciona?
- Else if JavaScript: Como usar?
- DOM JavaScript: O que é e como funciona?
- While JavaScript: um guia completo
Conteúdo
Requisitos para utilização da propriedade JavaScript .length
Antes de utilizarmos a propriedade length em JavaScript, é importante compreender os requisitos básicos para sua aplicação. Felizmente, a utilização dessa propriedade é bastante simples e não exige instalação adicional ou configurações complexas.
Tudo o que você precisa é de um ambiente para executar o JavaScript. Isso inclui um navegador web moderno ou um ambiente de execução JavaScript, como o Node.js.
É importante destacar que navegadores modernos executam JavaScript por padrão, mas o usuário pode desativar. Navegadores móveis não convencionais ou antigos podem vir com essa funcionalidade desligada, como um iPad antigo com Opera desatualizado.
A propriedade length em JavaScript
A propriedade length é uma característica intrínseca em arrays e strings em JavaScript. Ela retorna o número de elementos contidos em um array ou o número de caracteres em uma string. Essa propriedade é extremamente útil para diversas tarefas, como determinar o tamanho de uma lista dinâmica de itens ou verificar o comprimento de uma entrada de texto.
Esta propriedade retorna o número de unidades de código na string. JavaScript utiliza a codificação UTF-16, onde cada caractere Unicode é codificado como uma ou duas unidades de código, então é possível que o valor retornado pelo length não corresponda ao número real de caracteres Unicode na string.
Para scripts comuns como latim, cirílico, caracteres CJK conhecidos, etc., isso não deve ser um problema, mas se você estiver trabalhando com determinados scripts, como emojis, símbolos matemáticos ou caracteres chineses obscuros, pode ser necessário levar em conta a diferença entre unidades de código e caracteres.
Em arrays
Para arrays, a propriedade length indica o número de elementos contidos no array. Por exemplo:
let fruits = ['apple', 'banana', 'orange'];
console.log(fruits.length); // Isso irá exibir 3No caso de strings, a propriedade length retorna o número de caracteres na string:
let message = "Olá, mundo!";
console.log(message.length); // Isso irá exibir 12
A propriedade length em JavaScript não precisa ser chamada com parênteses porque ela não é uma função, mas sim uma propriedade dos objetos, especialmente de arrays e strings.
Então, quando você escreve array.length ou string.length, você está apenas acessando um valor que já existe, sem a necessidade de invocar uma função. Isso contribui para a clareza e simplicidade da linguagem JavaScript.
O length do JavaScript tem um uso similar ou até idêntico a outras linguagens de programação. No C# e Ruby, por exemplo, é uma propriedade, o que torna o código JavaScript quase um “copia e cola” com poucas alterações no algoritmo. No Java, o length é contextual: um array possui a propriedade length, porém para saber o tamanho de uma string é necessário usar uma função.
Segue o exemplo:
int[] numbers = {1, 2, 3, 4, 5};
int arrayLength = numbers.length; // Usando a propriedade para arrays
String message = "Hello, world!";
int stringLength = message.length(); // Usando o método para strings
E, como uma menção honrosa, Python tem a função Len(), onde é usada para obter o comprimento de objetos iteráveis, como strings, listas, tuplas, dicionários e outros. Por exemplo:
my_string = "Hello, world!"
string_length = len(my_string)
print(string_length) # Isso irá imprimir 13
Algumas práticas profissionais usando JavaScript .length
Validação de Entradas
Ao lidar com formulários ou entradas do usuário, é comum usar a propriedade length para verificar se a entrada atende aos requisitos de tamanho. Por exemplo, antes de enviar um formulário, você pode verificar se o campo de senha possui o comprimento mínimo necessário:
const passwordInput = document.getElementById('password');
if (passwordInput.value.length < 8) {
alert('A senha deve ter pelo menos 8 caracteres.');
}
Iteração sobre Arrays
Ao percorrer um array, frequentemente se utiliza a propriedade length para determinar iterações, evitando erros de índice e garantindo o processamento correto de todos os elementos. Por exemplo:
const numbers = [10, 20, 30, 40, 50];
for (let i = 0; i < numbers.length; i++) {
console.log(numbers[i]);
}
Criação de Listas Dinâmicas
Ao criar listas dinâmicas, como sugestões de pesquisa, usa-se a propriedade length para ajustar o comportamento com base no número de itens disponíveis. Por exemplo, ao exibir sugestões de pesquisa, você pode limitar o número de resultados exibidos com base na quantidade de itens relevantes:
const searchResults = ['apple', 'banana', 'orange', 'grapes', 'kiwi'];
const maxSuggestions = 3;
function showSuggestions(input) {
const suggestions = [];
for (let i = 0; i < searchResults.length; i++) {
if (suggestions.length >= maxSuggestions) {
break;
}
if (searchResults[i].startsWith(input)) {
suggestions.push(searchResults[i]);
}
}
// Exibir sugestões para o usuário
}
Manipulação de Strings:
Ao trabalhar com strings, usa-se a propriedade length para executar operações baseadas no comprimento da string. Por exemplo, para truncar uma string se ela for muito longa:
const maxCharacters = 20;
let longText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
if (longText.length > maxCharacters) {
longText = longText.substring(0, maxCharacters) + '...';
}
Cálculos Estatísticos
Ao trabalhar com dados numéricos, você pode usar um loop for para calcular a média de um conjunto de valores em um array:
const values = [15, 22, 30, 18, 25];
let sum = 0;
for (let i = 0; i < values.length; i++) {
sum += values[i];
}
const average = sum / values.length;
console.log('Média:', average);
Manipulação de Matrizes
Ao trabalhar com matrizes bidimensionais, como tabelas, você pode usar loops aninhados para percorrer e manipular os elementos:
const matrix = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
for (let i = 0; i < matrix.length; i++) {
for (let j = 0; j < matrix[i].length; j++) {
console.log('Elemento [' + i + '][' + j + ']:', matrix[i][j]);
}
}
Dominar matrizes é uma habilidade básica para muitos cursos, mas nem sempre temos um length incluso na língua de programação, porém, pode-se elaborar um algoritmo que acompanhe com o tamanho das arrays.
Busca em Matriz
const matrix = [
[10, 20, 30],
[40, 50, 60],
[70, 80, 90]
];
const targetValue = 50;
let targetFound = false;
for (let i = 0; i < matrix.length; i++) {
for (let j = 0; j < matrix[i].length; j++) {
if (matrix[i][j] === targetValue) {
targetFound = true;
console.log('Elemento encontrado na posição [' + i + '][' + j + ']');
break;
}
}
if (targetFound) {
break;
}
}
Operações de Transformação
Você pode usar loops aninhados para aplicar transformações em elementos de uma matriz bidimensional. Por exemplo, multiplicar cada elemento por um fator:
const matrix = [
[2, 4, 6],
[8, 10, 12],
[14, 16, 18]
];
const factor = 2;
for (let i = 0; i < matrix.length; i++) {
for (let j = 0; j < matrix[i].length; j++) {
matrix[i][j] *= factor;
}
}
Arquivo completo para mostrar os exemplos funcionando:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplos JavaScript</title>
</head>
<body>
<script>
// Exemplo de uso da propriedade length com arrays
const fruits = ['apple', 'banana', 'orange'];
console.log('Tamanho do array de frutas:', fruits.length);
// Exemplo de uso da propriedade length com strings
const message = "Hello, world!";
console.log('Tamanho da string de mensagem:', message.length);
// Exemplo de uso de loop for com array de uma dimensão
const values = [15, 22, 30, 18, 25];
let sum = 0;
for (let i = 0; i < values.length; i++) {
sum += values[i];
}
const average = sum / values.length;
console.log('Média dos valores:', average);
// Exemplo de uso de loop for com array de duas dimensões
const matrix = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
for (let i = 0; i < matrix.length; i++) {
for (let j = 0; j < matrix[i].length; j++) {
console.log('Elemento [' + i + '][' + j + ']:', matrix[i][j]);
}
}
</script>
</body>
</html>
Implementação de uma árvore binária de busca (Binary Search Tree – BST)
Uma árvore binária de busca é uma estrutura de dados onde cada nó tem no máximo dois filhos, e os nós à esquerda são menores ou iguais ao nó pai, enquanto os nós à direita são maiores.
Criando um struct Node para representar os nós da árvore e uma classe BinarySearchTree para implementar a estrutura da árvore e rastrear o número de nós usando a propriedade length .
class Node {
constructor(value) {
this.value = value;
this.left = null;
this.right = null;
}
}
class BinarySearchTree {
constructor() {
this.root = null;
this.length = 0; // Usaremos a propriedade length para acompanhar o número de nós
}
insert(value) {
const newNode = new Node(value);
if (!this.root) {
this.root = newNode;
} else {
this.insertNode(this.root, newNode);
}
this.length++; // Incrementando o length após inserir um nó
}
insertNode(node, newNode) {
if (newNode.value < node.value) {
if (!node.left) {
node.left = newNode;
} else {
this.insertNode(node.left, newNode);
}
} else {
if (!node.right) {
node.right = newNode;
} else {
this.insertNode(node.right, newNode);
}
}
}
// Outros métodos da BinarySearchTree, como busca, remoção, etc.
}
// Exemplo de uso
const bst = new BinarySearchTree();
bst.insert(10);
bst.insert(5);
bst.insert(15);
bst.insert(3);
bst.insert(8);
console.log('Número de nós na árvore:', bst.length); // Isso irá exibir 5
Usamos a propriedade length para rastrear o número de nós na árvore. Cada vez que um nó é inserido na árvore, incrementamos o valor de length. Isso nos permite obter rapidamente o tamanho atual da árvore sem precisar percorrer a árvore inteira para contar os nós.
Essa propriedade tornou essa estrutura de dados mais conveniente no JavaScript. Afinal, está incluída dentro da linguagem de programação, ao contrário do puro C, que nos forçaria a implementar os algoritmos necessários para funcionalidades desse tipo.
Adicionar JavaScript .length em um objeto
Pode-se criar um objeto e providenciar um length a ele para que seja usado da mesma forma que os exemplos desse artigo
function getSizeInfo(data) {
const sizeInfo = {
type: typeof data,
length: data.length
};
return sizeInfo;
}
const exampleString = "Hello, world!";
const exampleArray = [1, 2, 3, 4, 5];
const stringInfo = getSizeInfo(exampleString);
console.log("Informações sobre a string:", stringInfo);
const arrayInfo = getSizeInfo(exampleArray);
console.log("Informações sobre o array:", arrayInfo);
A função getSizeInfo aceita um argumento data, que pode ser uma string ou um array. A função cria um objeto sizeInfo que contém a propriedade type (indicando o tipo de dado) e a propriedade length (obtida usando a propriedade length).
Uso Incorreto do JavaScript .length
Embora a propriedade length seja amplamente útil, há alguns problemas técnicos potenciais que podem surgir ao utilizá-la, e é importante estar ciente deles para evitar comportamentos indesejados em seu código. Aqui estão alguns problemas comuns relacionados à propriedade length e como evitá-los:
Alguns exemplos onde o length não é igual ao número de caracteres:
Uso Incorreto do JavaScript .length em Tipos Não-Iteráveis:
A propriedade length é projetada para ser usada com tipos iteráveis, como strings e arrays. No entanto, se você tentar usá-la em um tipo não-iterável, como um número ou um objeto, isso resultará em comportamento inesperado:
const number = 42;
console.log(number.length); // Isso não faz sentido e retornará undefined
Espaços em Branco e Caracteres Invisíveis:
A propriedade length considera todos os caracteres, incluindo espaços em branco e caracteres invisíveis, ao calcular o tamanho de uma string. Isso pode ser um problema se você estiver contando palavras ou caracteres visíveis em uma string.
let message = "Olá, mundo!";
console.log(message.length); // Isso irá exibir 12, afinal inclui o ‘ ‘ espaço
Solução: Se você precisa calcular o número de palavras ou caracteres visíveis, é necessário pré-processar a string para remover os espaços em branco ou caracteres indesejados antes de usar a propriedade length .
function removeWhitespaceAndInvisibleChars(inputString) {
// Substitui espaços em branco e caracteres invisíveis por uma string vazia
const cleanedString = inputString.replace(/[ \t\v\f\r\u200B]+/g, '');
return cleanedString;
}
const originalString = " Hello, world! \t This is a test.\u200B ";
const cleanedString = removeWhitespaceAndInvisibleChars(originalString);
console.log("String original:", originalString);
console.log("String limpa:", cleanedString);
Uso em Cenários Assíncronos:
Em cenários assíncronos, como quando você está lidando com solicitações de API, o valor da propriedade length pode não ser o esperado devido ao tempo de resposta das solicitações.
Solução: Certifique-se de que o valor da propriedade length seja acessado somente após a conclusão das operações assíncronas, possivelmente dentro de callbacks, promessas ou async/await.
Outros títulos interessantes:
- Switch JavaScript: O que é e como usar?
- Quais são os tipos de funções JavaScript?
- Alert JavaScript: Como exibir uma mensagem na tela
- Map JavaScript: Potencializando a Eficiência com o Uso Desse Método
- Reduce JavaScript: Desvendando a usabilidade e prática
- Como mudar background em JavaScript
- Print Div JavaScript: como usar e quais as funcionalidades
- forEach JavaScript: exemplos práticos
- Entendendo e Utilizando a Tag span em HTML
- Select em HTML: crie menus em um formulário HTML
Conclusão
A propriedade length em JavaScript é uma ferramenta essencial para avaliar o tamanho de arrays e strings.
Sua simplicidade de uso e aplicabilidade tornam-na uma aliada valiosa para desenvolvedores que desejam interagir dinamicamente com elementos e dados em suas aplicações.
Com um entendimento adequado dessa propriedade, os programadores podem melhorar a qualidade e eficiência de seus códigos, garantindo uma manipulação precisa e eficaz de elementos em suas aplicações web.
Considere, assim, aprender mais sobre esses conteúdos no nosso blog e explore nossas produções.
