Javascript para CSharpers 2 - Functions

Javascript para
Desenvolvedores C#

Sobre o curso
Javascript
Comparação
Parte 1:
Functions
Parte 2:
Conceitos
Parte 3:
POO
Parte 4:

Javascript para CSharpers
Javascript para desenvolvedores acostumados com as estruturas do .Net

• Functions são o coração do Javascript
• Parâmetros
• Retornos
• Functions como objetos
• Functions como delegates
• “this”
• Callbacks
• Promises
• Namespaces

Functions
Parâmetros
• Como no C#sqn
function fn(um, dois, tres) {
console.log('1: ' + um);
console.log('2: ' + dois);
console.log('3: ' + tres);
}
fn(1, "2", !!'tres');
fn(true);
fn(1, 2, 3, 4, 4, 5);
 Sobrecarga?
function foo(fst) {
console.log("Primeiro");
}
function foo(fst,sec) {
console.log("Segundo");
}
foo(1); //Segundo

Functions
Arguments
• Nomear parâmetros servem apenas para mapear argumentos
function bar(fst, sec, thr) {
console.log(arguments.length);
}
bar(1); //1
bar(1,2,3,4,5); //5
function bar() {
console.log(arguments[1]);
}
bar("primeiro", "segundo"); //segundo

Functions
Return
• Todas as functions retornam um valor
• Se não for definido, será undefined
function foo() {
return;
return "";
return
"";
}
Var x = foo() //undefined
Var x = foo() //string

Functions
Apenas um objeto qualquer
• É possível acessar e adicionar propriedades à uma function
como qualquer objeto
function fn(a, b, c, d) {
console.log('im fn body');
}
console.log(fn.length); //4
console.log(fn.name); //"fn"
console.log(fn); //"function(){console.log('im fn body');} "
fn.outraFunction = function() {
console.log("im inside fn's body");
};
fn.outraFunction(); // "im inside fn's body"

Functions
Closures e Escopos
//C#
var a = "hi";
if (true)
{
var b = a; //ok
}
var c = b; //não compila
//Javasctipt
var a = "hi";
if (true) {
var b = a; //ok
}
var c = b; //ok
//Javasctipt
var a = "hi";
function fn() {
if (true) {
var b = a; //ok
}
}
var c = b; //Não mais

Exercícios
Functions
• Faça uma function que simule chamadas ajax
• Ela recebe dois argumentos do tipo string: tipo e o url da chamada, ex:
“GET”, “POST”, “DELETE”;
• E simplesmente loga o dado de acordo com o tipo da chamada
Ex: Fazendo um POST para http://www.sega.com
• Pendure na function outras functions que sirvam de atalhos para as
chamadas acima
• Ex: chamarAjax.get() ao ser invocado, chamara a própria function já
passando “GET”
• Altere a function para realizar todas as chamadas que são passadas
independentemente da quantidade de argumentos
• Ex: chamarAjax(“get”,”sega.com”,”ndd.com”,”moc.com”)

This
• No C# representa a instancia da classe
class Foo {
private string _name;
void Run(string newName)
{
this._name = newName;
}
}

• No Javascript, representa o contexto do proprietário da função.
• É possível mudar este contexto com os métodos .apply() e .call()
var obj = {
name: "algum obj",
myFunc: function () {
log(this.name);
}
};
obj.myFunc(); //algum obj
function Person() {
this.Nome = "Apenas um Teste";
console.log(this.Nome);
console.log(this.Rg);
}
var g = new Person();
h = Person.apply({Rg:'1234'});
This

This
apply() e call()
• Metodos pertencentes a todo objeto “function”.
• Utilizados para alterar o contexto do this
Call recebe o this como contexto e
sequencialmente os parâmetros (como
params[] no C#)
Apply recebe o this como contexto e um
array com os parametros
function Person(nome, rg) {
this.Nome = nome;
this.Rg = rg;
};
var p = {};
Person.call(p, "nome", "14324");
var args = ["nome", "14324"]
Person.apply(p, args);

Callbacks
• São parâmetros de um método que representam uma
instancia de uma função a ser chamada posteriormente.
• Similares aos Delegates em .Net.
• Função nomeadas ou anônimas.
• Podem ser “engatilhadas” para serem executadas em
condições específicas

Callbacks
Função nomeada
• Cria um novo escopo de execução
• Atribui o valor de “this” para a janela
de execução do browser
Callbacks
Função anônima
• Assume o contexto aonde foi criada
• A referência “this” passa a ser o objeto
atual em que a função foi declarada
function request(callback) {
callback();
}
request(executeAfterRequest);
function executeAfterRequest() {
}
function request(callback) {
callback();
}
request(function () {
});

Exercícios
Callbacks
• Adicione na function que faz chamadas ajax um argumento de
callback que determine como o request será logado:
• document.write();
• console.log();
• alert();
• Também recebe um callback de erro, caso a url não contenha
“https://” ele loga uma mensagem nada agradavel;

Promises
• São objetos utilizados para coisas demoradas ou que
saem do escopo da aplicação
• Chamadas para API
• Animações
• Processos “paralelos”
• Simula programação async
• Similar ao objeto Task<T>
• Depois de criado deve ser invocado
com .then();
- --
- -
- -

Promises
• São objetos utilizados para coisas demoradas ou que
saem do escopo da aplicação
• Chamadas para API
• Animações
• Processos “paralelos”
• Simula programação async
• Similar ao objeto Task<T>
• Depois de criado deve ser invocado
com .then();
- -
- - -
- -

Promises
• Utiliza a função Promise
• Esta recebe no construtor um callback com 2 parâmetros
• Resolve
• Callback utilizado para finalizar a Promise com sucesso
• Reject
• Callback para finalizar a Promise com erro
- -
- - -
- -
- -

Promises
var promise = new Promise(function(resolve, reject) {
// processamento “assíncrono”
if (/* teste se o processamento foi satisfatório */) {
resolve("Sucesso");
}
else {
reject(Error("Falha")));
}
});

Promises
• Utiliza o método “then” para invocar o Promise.
• O método “then” recebe 2 parâmetros (ambos
opcionais):
• Um callback para as situações de sucesso.
• Utilizando o método “resolve”.
• Um callback para as situações de erro.
• Utilizando o método “reject”.
• Pode ser criado uma corrente de chamadas “then”.

JavaScript - Promises
Consumo
var promise = new Promise(function(resolve, reject) {
....
});
promise.then(
function (result) {
console.log(result); // "Sucesso"
},
function (err) {
console.log(err); // Error: "Falha"
}
);

Consumo – Cadeia de chamadas
var promise = new Promise(function (resolve, reject) {
resolve(1);
});
promise
.then(function (val) {
console.log(val); // 1
return val + 2;
})
console.log(val); // 3
});

Consumo – Cadeia de chamadas
- -
-
- -
- -
- -
- -
- -
- -
- -
.then()
.catch()
.then()
.catch()
.then()
.catch()

Consumo – Tratamento de erros
• Pode ser utilizado o método “catch” ao invés do segundo callback no
“then”.
• É um atalho para o equivalente à “.then(undefined, func)”.
• Utilizando os 2 callbacks, somente 1 será chamado.
• Utilizando “then” seguido de “catch” ambos são chamados se a
promise for rejeitada.

Consumo – Tratamento de erros
promise
console.log("Sucesso", val);
})
.catch(function (error) {
console.log("Falha", error);
});
promise
console.log("Sucesso", val);
})
.then(undefined, function (error) {
console.log("Falha", error);
});

Exercícios
Promises
• Faça a classe AjaxWithPromise que retorna uma promise com o
resultado da operação

Functions
Namespace
• Problema: Colisão de nomes em aplicativos de grande porte
• Solução: Simular Namespaces do C# usando IIFEs (Immediately Invoked Function Expression)
(function() {
var appName = 'foo';
var compileTime = new Date();
function printAppInfo() {
return appName + " : " + compileTime;
}
})();
console.log(printAppInfo()); //nope

Functions
Namespace
• Javascript não tem namespaces reais
• Podem ser criados como objetos
var Enterprise = Enterprise || {};
Enterprise.currentTime = function() {
return new Date();
};
Enterprise.Models = Enterprise.Models || {};
Enterprise.Models.Aluno = function() { };

Functions
Namespace
• Diminuindo a poluição global e encapsulando cada
funcionalidade
(function(ns) {
var currentTime = new Date();
ns.currentTime = function() {
return currentTime;
};
})(NDDigial = NDDigial || {});

Quiz
• É possível fazer sobrecarga de métodos no Javascript.
• Verdadeiro
• Falso
• Você deve colocar ao menos um return em cada function
• Verdadeiro
• Falso

Quiz
• Promises são functions configuradas para executarem imediatamente
• Verdadeiro
• Falso
• Invocar catch(success,error) é o mesmo que then(undefined, error)
• Verdadeiro
• Falso

Quiz
• O que é o this no javascript?
• window
• document
• A própria function
• Quem chama a function

Quiz
• O que é o this no javascript?
• window
• document
• A própria function
• Quem chama a function
• Todas ou nenhuma das anteriores

Quiz
O que é o código vai logar?
var a = 0;
if (a) {
while (a === 0) {
var b = a - 1;
a += 1;
}
}
console.log(b);
• 0
• 1
• -1
• undefined

Quiz
O que é o código vai logar?
var a = 0;
if (a) {
while (a === 0) {
var b = a - 1;
a += 1;
}
}
console.log(b);
• 0
• 1
• -1
• Undefined (não chegou a executar)

Quiz
• Por que devemos separar código em namespaces?

Quiz
• Por que devemos separar código em namespaces?
• I – Facilita encontrar erros em grandes aplicações
• II – Evita conflitos com nomes de variáveis
• III – Evita problemas de precisar de módulos ainda não
inicializados
• IV – Organiza o código
• V – Protege nosso código de bibliotecas externas

Revisão
• Let me function that for you
• Parâmetros são totalmente flexíveis
• Não existe sobrecarga
• Functions são objetos
• Callbacks que vão e voltam
• O futuro é uma Promise
• O “this” pode ser alterado
• Apenas functions definem escopos
• Que podem ser usados para proteger
namespaces

Javascript para CSharpers 2 - Functions

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Javascript para CSharpers 2 - Functions

Similar a Javascript para CSharpers 2 - Functions (20)

Más de Wesley Lemos

Más de Wesley Lemos (11)

Javascript para CSharpers 2 - Functions

Notas del editor