S06L05 - Métodos e funções

html

Dominando Methods e Functions em JavaScript: Um Guia Abrangente
Índice

Introdução .......................................................... 1
Entendendo Functions no JavaScript ..... 3

O Que São Functions? .................................... 3
Arrow Functions vs. Regular Functions ....................................................... 5
Chamando Functions ........................................ 7


Mergulhando em Methods ............................................ 9

O Que São Methods? .......................................... 9
Diferença Entre Functions e Methods ........................................................ 11


Exemplos Práticos ............................................ 13

Criando e Usando Functions ................... 13
Aplicando Methods em Objects .................... 15


Conclusão ............................................................... 17

Introdução
Bem-vindo ao "Dominando Methods e Functions em JavaScript," seu guia definitivo para entender e aproveitar o poder de functions e methods na programação JavaScript. Seja você um iniciante buscando compreender os fundamentos ou um desenvolvedor desejando aprimorar suas habilidades de codificação, este eBook oferece uma exploração clara e concisa desses conceitos essenciais.
Neste guia, abordaremos:

A definição e o propósito de functions e methods.
As diferenças entre arrow functions e regular functions.
Como criar e chamar functions.
Entendendo methods e sua aplicação em objects.
Exemplos práticos com explicações detalhadas e trechos de código.

Ao final deste eBook, você terá uma base sólida no uso eficaz de functions e methods em seus projetos JavaScript.
Entendendo Functions no JavaScript
O Que São Functions?
Functions são um dos blocos de construção principais no JavaScript. Elas são blocos reutilizáveis de código projetados para executar uma tarefa específica. Functions ajudam a manter seu código DRY (Don't Repeat Yourself) e organizado.
Características Principais das Functions:

Reusabilidade: Escreve uma vez, usa várias vezes.
Modularidade: Divide problemas complexos em partes manejáveis.
Manutenibilidade: Mais fácil de debug e atualizar.

Sintaxe Básica de uma Function:




		
		
			
			
Java
			
			function functionName(parameters) {
    // Corpo da Function
    return result;
}

			
				
					
				
					1
2
3
4
5
				
						function functionName(parameters) {
    // Corpo da Function
    return result;
}
 
					
				
			
		


Arrow Functions vs. Regular Functions
JavaScript oferece duas maneiras principais de definir functions: regular functions e arrow functions. Entender as diferenças entre elas é crucial para escrever código eficiente e legível.
Regular Functions
Regular functions são definidas usando a palavra-chave function.
Exemplo:




		
		
			
			
Java
			
			function add(a, b) {
    return a + b;
}

			
				
					
				
					1
2
3
4
				
						function add(a, b) {
    return a + b;
}
 
					
				
			
		


Características:

Hoisting: Podem ser chamadas antes de serem definidas no código.
Context (this): Dinâmico, baseado em como a function é chamada.

Arrow Functions
Arrow functions fornecem uma sintaxe mais concisa e têm comportamentos diferentes comparadas às regular functions.
Exemplo:




		
		
			
			
Java
			
			const add = (a, b) => {
    return a + b;
};

			
				
					
				
					1
2
3
4
				
						const add = (a, b) => {
    return a + b;
};
 
					
				
			
		


Características:

Sem Hoisting: Não podem ser chamadas antes de serem definidas.
this Léxico: Herda this do escopo circundante.

Tabela de Comparação: Arrow Functions vs. Regular Functions


Característica
Regular Functions
Arrow Functions


Sintaxe
function functionName() {}
const functionName = () => {}


Hoisting
Sim
Não


this Contexto
Dinâmico
Léxico (herdado)


Uso como Construtor
Pode ser usado como construtores
Não pode ser usado como construtores


Objeto arguments
Disponível
Não disponível


Concisão
Mais verboso
Mais conciso


Chamando Functions
Chamar uma function envolve invocá-la pelo nome e passar os argumentos necessários.
Exemplo:




		
		
			
			
Java
			
			function greet(name) {
    return `Hello, ${name}!`;
}

console.log(greet('Alice')); // Output: Hello, Alice!

			
				
					
				
					1
2
3
4
5
6
				
						function greet(name) {
    return `Hello, ${name}!`;
}
 
console.log(greet('Alice')); // Output: Hello, Alice!
 
					
				
			
		


Chamando Functions Diretamente:
Você pode chamar functions diretamente dentro de outras functions ou methods.
Exemplo:




		
		
			
			
Java
			
			function multiply(a, b) {
    return a * b;
}

console.log(multiply(10, 35)); // Output: 350

			
				
					
				
					1
2
3
4
5
6
				
						function multiply(a, b) {
    return a * b;
}
 
console.log(multiply(10, 35)); // Output: 350
 
					
				
			
		


Mergulhando em Methods
O Que São Methods?
Methods são functions que estão associadas a objects. Elas representam ações que podem ser executadas no object ao qual pertencem.
Exemplo:




		
		
			
			
Java
			
			const user = {
    name: 'John Doe',
    greet: function() {
        return `Hello, ${this.name}!`;
    }
};

console.log(user.greet()); // Output: Hello, John Doe!

			
				
					
				
					1
2
3
4
5
6
7
8
9
				
						const user = {
    name: 'John Doe',
    greet: function() {
        return `Hello, ${this.name}!`;
    }
};
 
console.log(user.greet()); // Output: Hello, John Doe!
 
					
				
			
		


Diferença Entre Functions e Methods
Embora tanto functions quanto methods sejam blocos de código projetados para realizar tarefas específicas, a principal diferença reside na sua associação e invocação.


Aspecto
Function
Method


Associação
Autônoma, não vinculada a nenhum object
Associada a um object


Invocação
Chamada diretamente pelo nome
Chamada usando notação de ponto no object


Contexto (this)
Depende de como a function é chamada
Tipicamente refere-se ao object ao qual o method pertence


Uso
Tarefas de propósito geral
Operações específicas ao object ao qual pertencem


Exemplo de um Method vs. Function:




		
		
			
			
Java
			
			// Function
function add(a, b) {
    return a + b;
}

// Method
const calculator = {
    add: function(a, b) {
        return a + b;
    }
};

console.log(add(5, 10)); // Chamada de Function
console.log(calculator.add(5, 10)); // Chamada de Method

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
				
						// Function
function add(a, b) {
    return a + b;
}
 
// Method
const calculator = {
    add: function(a, b) {
        return a + b;
    }
};
 
console.log(add(5, 10)); // Chamada de Function
console.log(calculator.add(5, 10)); // Chamada de Method
 
					
				
			
		


Exemplos Práticos
Criando e Usando Functions
Vamos explorar como criar e usar tanto arrow functions quanto regular functions em JavaScript.
Exemplo de Arrow Function




		
		
			
			
Java
			
			// Arrow Function
const add = (a, b) =&gt; {
    return a + b;
};

// Usando a arrow function
console.log(add(10, 35)); // Output: 45

			
				
					
				
					1
2
3
4
5
6
7
8
				
						// Arrow Function
const add = (a, b) =&gt; {
    return a + b;
};
 
// Usando a arrow function
console.log(add(10, 35)); // Output: 45
 
					
				
			
		


Explicação:

Definição: A function add é definida usando a sintaxe de arrow function, recebendo dois parâmetros a e b.
Retorno: Ela retorna a soma de a e b.
Invocação: A function é chamada com os argumentos 10 e 35, e o resultado é exibido no console.

Conversão para Regular Function
Você pode converter a arrow function acima para uma regular function conforme mostrado abaixo:




		
		
			
			
Java
			
			// Regular Function
function add(a, b) {
    return a + b;
}

// Usando a regular function
console.log(add(10, 35)); // Output: 45

			
				
					
				
					1
2
3
4
5
6
7
8
				
						// Regular Function
function add(a, b) {
    return a + b;
}
 
// Usando a regular function
console.log(add(10, 35)); // Output: 45
 
					
				
			
		


Principais Alterações:

Substituiu a sintaxe de arrow pela palavra-chave function.
Removeu a declaração const.

Aplicando Methods em Objects
Methods permitem que você execute operações nos dados encapsulados dentro de objects. Vamos ver um exemplo usando manipulação de strings.




		
		
			
			
Java
			
			const name = 'alice';

// Usando o método toUpperCase no object string
const upperName = name.toUpperCase();

console.log(upperName); // Output: ALICE

			
				
					
				
					1
2
3
4
5
6
7
				
						const name = 'alice';
 
// Usando o método toUpperCase no object string
const upperName = name.toUpperCase();
 
console.log(upperName); // Output: ALICE
 
					
				
			
		


Explicação:

Object String: name é uma primitiva string. No JavaScript, primitivas string são automaticamente encapsuladas com objects String quando methods são chamados sobre elas.
Invocação do Method: O método toUpperCase é chamado em name, convertendo-o para maiúsculas.
Resultado: A versão maiúscula da string é armazenada em upperName e exibida no console.

Detalhamento do Código Passo a Passo




		
		
			
			
Java
			
			const name = 'alice'; // Define uma variável string

const upperName = name.toUpperCase(); 
// Chama o método toUpperCase na string 'name'
// O method retorna uma nova string em maiúsculas e a atribui a 'upperName'

console.log(upperName); // Exibe o resultado: ALICE

			
				
					
				
					1
2
3
4
5
6
7
8
				
						const name = 'alice'; // Define uma variável string
 
const upperName = name.toUpperCase(); 
// Chama o método toUpperCase na string 'name'
// O method retorna uma nova string em maiúsculas e a atribui a 'upperName'
 
console.log(upperName); // Exibe o resultado: ALICE
 
					
				
			
		


Combinando Functions e Methods
Vamos combinar tanto functions quanto methods em um único exemplo para ver como eles interagem.




		
		
			
			
Java
			
			// Function para concatenar duas strings
function concatenate(a, b) {
    return a + b;
}

// Method para converter a string concatenada para maiúsculas
const result = concatenate('hello, ', 'world').toUpperCase();

console.log(result); // Output: HELLO, WORLD

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
				
						// Function para concatenar duas strings
function concatenate(a, b) {
    return a + b;
}
 
// Method para converter a string concatenada para maiúsculas
const result = concatenate('hello, ', 'world').toUpperCase();
 
console.log(result); // Output: HELLO, WORLD
 
					
				
			
		


Explicação:

Definição da Function: A function concatenate recebe duas strings e retorna sua concatenação.
Chamada da Function & Invocação do Method: A function é chamada com 'hello, ' e 'world', e a string resultante é imediatamente passada para o method toUpperCase.
Resultado: A string maiúscula final 'HELLO, WORLD' é exibida no console.

Conclusão
Neste guia abrangente, exploramos os conceitos fundamentais de functions e methods no JavaScript. Entender a distinção entre functions autônomas e methods associados a objects é crucial para escrever um código limpo, eficiente e manutenível.
Principais Aprendizados:

Functions são blocos reutilizáveis de código que realizam tarefas específicas e podem ser definidas usando sintaxe regular ou arrow.
Methods são functions associadas a objects, permitindo que você execute operações nos dados do object.
Arrow Functions oferecem uma sintaxe mais concisa e têm ligação léxica de this, tornando-as adequadas para certos cenários.
Regular Functions oferecem mais flexibilidade com o contexto de this e podem ser usadas como construtores.

Dominando esses conceitos, você pode aprimorar suas habilidades de programação JavaScript, levando ao desenvolvimento de aplicações mais robustas e escaláveis.
Nota: Este artigo é gerado por IA.
Característica	Regular Functions	Arrow Functions
Sintaxe	`function functionName() {}`	`const functionName = () => {}`
Hoisting	Sim	Não
this Contexto	Dinâmico	Léxico (herdado)
Uso como Construtor	Pode ser usado como construtores	Não pode ser usado como construtores
Objeto `arguments`	Disponível	Não disponível
Concisão	Mais verboso	Mais conciso
Aspecto	Function	Method
Associação	Autônoma, não vinculada a nenhum object	Associada a um object
Invocação	Chamada diretamente pelo nome	Chamada usando notação de ponto no object
Contexto (this)	Depende de como a function é chamada	Tipicamente refere-se ao object ao qual o method pertence
Uso	Tarefas de propósito geral	Operações específicas ao object ao qual pertencem