Funções (function)

Junior Alves — Tue, 15 Jun 2021 21:52:08 +0000

Função é um bloco de código ou subprogramas composto por uma sequencia de instruções que podem ser chamado por outros códigos.

Em javascript, funções são objetos de primeira classe, ou seja ela é tratada como qualquer outro valor como as variáveis. E pode ser definidas de 2 formas básicas:

Function declaration

É a forma mais comum de definir uma função e segue a seguinte sintax

    function name() {
        console.log('menu nome')
    }

Function expression

Essa é a segunda forma de definir funções e segue a mesma sintax de declaração e inicialização de variáveis

    const name = function() {
        console.log('Menu nome')
    }

A diferença básica entre as duas formas, é com relação ao hosting introduzido no javascript a partir no ES2015, onde o motor do javascript coloca as funções declaradas (function declaration) na memoria antes de qualquer outro código assim como faz com variáveis. É importante saber que isso só acontece com function declaration e não com function express.

Hosting é uma definição estrita de elevação que sugere que as declarações de variáveis e funções são fisicamente movidas para o topo do seu código. Mas na pratica, no momento da compilação, as variáveis e funções são colocadas primeiro na memoria. É por isso que podemos chamar uma função mesmo antes de declara-la.

Parâmetros e argumentos.

Uma característica essencial das funções é que todas podem receber parâmetros.

    function showName(name) {
        console.log(name)
    }

Á variável "name" entre os colchetes é o parâmetro que essa função pode receber, se nenhum parâmetro for passado para a função, o javascript define esse parâmetro como "undefined"

Para utilizarmos o parâmetro basta chamarmos a função passando o argumento que queremos que o parâmetro receba

    showName('carlos')

Return

Uma característica importante das funções é que ela segue o escopo de bloco, portanto todos dado criada dentro da função só fica disponível dentro da função, por causa do escopo.
Para expor esse dado para fora da função é necessário utilizarmos o método de return, e assim conseguirmos obter os dados processados pela função.

    function soma(a, b) {
        return a + b
    }

    const result = soma(2, 3)

Neste caso o resultado da soma de a + b processado pela função será retornada e guardada na variável result. E poderemos usar esse dado em outras partes do código.

Métodos básicos de array

Junior Alves — Fri, 04 Jun 2021 16:20:14 +0000

Quando comecei a usar javascript, percebi o quanto é fundamental aprender a manipular arrays, pois passamos a maior parte do tempo trabalhando com eles.

Sem aprender array você praticamente trava no aprendizado, e não conseguirá evoluir no domínio da linguagem

Por isso listei os principais métodos básicos para facilitar nossa vida no dia dia. A ideia é que este post possa servir de “consulta rápida” quando manipularmos um array.

Sumario

índices
push
pop
unshift
shift
length
index
splice
includes
reverse
join
split
some

O que é um array:

Array é uma sequencia não ordenada de dados, cujo os elementos residem em um local especifico na memória do computador e podem se acessado através de index.
É a melhor forma de evitar criações exageradas de variáveis para armazenar informações de mesmo tipo fazendo assim um melhor controle de memoria.

No javaScript a forma mais comum de declarar um a array é atribuindo ele a uma variável.

const meuArray = []

Os colchetes (brackets) é o proprio array.

Para declarar os valores do array, inserimos cada um dos valores dentro dos colchetes separados por virgula.

const meuArray = ['valor1', 'valor2', 3]

É possivel construir arrays com qualquer tipo de valor misturados como strings, numbers e objetos, porem é altamente recomendado que sejam construído arrays com valores que tenham a mesma relação e tipo como no exemplo a baixo.

const frutas = ['banana', 'abacaxi', 'laranja'] // strings

const idades = [20, 10, 30] // "numbers"

índices

Quando um array é criado, cada posição do array é relacionado a um index que por padrão começa em “0”, e aumenta de forma linear.

Ou seja a primeira posição do array tem o index 0, a segunda posição tem o index 1, a terceira posição tem o index 2 e assim por diante.
Portanto para acessarmos o valor “laranja” do array “frutas” basta colocar entre colchete o index da posição em que este valor está.

frutas = ['banana', 'abacaxi', 'laranja']

console.log(frutas[2])

'laranja'

OBS: Muitos confundem a posição do valor com o seu index.

Veja: O valor ‘laranja’ do array ‘frutas’ é o terceiro valor do array, mas está na posição de index 2.

Isso é porque o index de um array começa em “0”. Portanto

frutas = ['banana', 'abacaxi', 'laranja']

console.log(frutas[0])

'banana'

sumario

Métodos

Os métodos são as principais ferramentas para manipulação e interação com o array, e é muito importante domina-los.

Segue uma lista com alguns dos métodos mais utilizados.

push

Adiciona um item ao final de um array

frutas = ['laranja', 'abacaxi', 'pera']

frutas.push('limão')

['laranja', 'abacaxi', 'pera', 'limão']

pop

Remove o ultimo item do array

frutas = ['laranja', 'abacaxi', 'pera']

frutas.pop()

['laranja', 'abacaxi']

unshift

Adicionar um item no início do Array

frutas = ['pera', 'limão']

frutas.unshift('morango')

['morango', 'pera', 'limão']

shift

Remover o primeiro item do Array

frutas = ['laranja', 'pera', 'limão']

frutas.shift()

['pera', 'limão']

sumario

length

Mostra o tamanho total do array, ou o numero de elementos que o array tem.

frutas = ['banana', 'abacaxi', 'laranja']

console.log(frutas.length)

3

index

Procurar e retorna o indice do array que da match com a pesquisa.

frutas = ['laranja', 'abacaxi', 'pera']

frutas.indexOf('abacaxi')

index 1

splice

É utilizado para remover ou substituir itens do meio do array.
Ele recebe 3 parâmetros:

O index inicial da iteração.
O numero de elementos a serem removidos a partir do index inicial (contando com ele mesmo).
Os Elementos que serão adicionados no lugar dos elementos removidos.

const meuArray = [1, 2, 3, 4, 5, 6]

meuArray.splice(2, 3) 
// O parâmetro 2 é o index inicial da iteração,
// lembrando que o index 2 é o numero 3 deste array.
// O parâmetro 3 é o numero de elementos 
// que serão removidos a partir do index 2.

console.log(meuArray)
[1, 2, 6]
// O resultado mostra que o splice() removeu a partir do
// index 2, 3 elementos do array, contanto com o próprio index 2.

É possivel substituir ou até adicionar elementos no meio do array

const meuArray = [1, 2, 3, 4, 5, 6]

meuArray.splice(1,3, "teste") // index 1 é o numero 2 do array

console.log(meuArray)
[1, "teste", 5, 6] 
// A partir do index 1 (contando com ele mesmo),
// foi removido os indexs 1, 2, 3 e adicionado
// no lugar destes a string "teste".

OBS:
O splice modifica o próprio array, ele não gera um array novo, e por isso não da para atribuir o resultado do splice em uma nova variável.

const novoArray = meuArray.splice(1,3) // isso não funciona

//o novoArray será vazio []

Também é possivel adicionar um novo elemento ao array sem remover nenhum outro, basta passar 0 no segundo parâmetro.

const meuArray = [1, 2, 3, 4, 5, 6]

meuArray.splice(1,0, "teste")

[1, "teste", 2, 3, 4, 5, 6]

sumario

includes

Procura um item no array e retorna verdadeiro caso encontre.

[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false
[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true

reverse

Simplesmente reverte as posições de um array.

const numbers = ['one','two','tree','four']

console.log(numbers.reverse())

['four','tree','two','one']

join

Este método é muito utilizado para converter um array em uma string, pois ele junta todos os itens de um array e o retorna em uma string.
Ao chamar o método join() passamos como parâmetro o separador, nesse caso o '-'. Se não for passado nenhum separador, por padrão os elementos serão separados por ','.

const frutas = ['laranja', 'abacaxi', 'pera']

const stringFrutas = fruntas.join('-')

console.log(stringFrutas)

laranja-abacaxi-pera

split

Este método é muito utilizado para transformar strings em um array. Ele faz o contrario do join() dividindo uma string em elementos de um array. Os critérios da divisão são passados como parâmetros.
O domínio de regex é muito útil para utilizar esse método

const name = "joao pedro"

name.split() // ["joao pedro"]

name.split('') // ['j','o','a','o',' ','p','e','d','r','o']

name.split(" ") // ["joao", "pedro"]

O split também recebe como segundo argumento um delimitador, podendo assim criar arrays apenas com partes de uma string.

Veja um uso legal para os estes métodos aninhados em uma string

const name = "pedro"

const reverte = name.split('').reverse().join('')

console.log(reverte)

// ordep - revertemos as letras do nome pedro

sumario

some

O método some() compara cada elemento do array com uma condição. E retorna verdadeiro quando a condição for satisfeita.
A condição é passada como parâmetro em uma função. O some() percorrerá o array aplicando a condição para cada elemento.

const meuArray = [1,2,3,4,5]

meuArray.some(element => element === 5)

true

No exemplo acima, passamos uma função que testará se o valor é igual a 5. O some() percorrerá o array e passará para nossa função cada elemento do array na variável “element”, que por sua vez comparará o valor do element com o valor 5 testando assim a nossa condição. Uma vez satisfeita a condição ele retorna true.
É importante saber que já na primeira vez que a condição for satisfeita, o loop para, e retorna verdadeiro ignorando o resto do array.

Estes são os métodos básicos de manipulação de array. em breve adicionarei a este artigo os métodos (slice, splice, object.keys, sort, map, filter, reduce).

sumario

DEV Community: Junior Alves