funciones variables tipos - keblato/TutorialesTalleres-Angular GitHub Wiki

Funciones Variables Tipos

Referencia: Documentación "Basic Types"

Para ejecutar los ejemplos siguientes utilice stackblitz funciones

Operaciones sobre number

var vNumber2: number = 2;
var respuesta: number = 0 ;
respuesta = vNumber1 + vNumber2 ;
 console.log("Suma:        "+respuesta);   
 
 respuesta = vNumber1 - vNumber2;  console.log("Diferencia: "+respuesta);
 respuesta = vNumber1*vNumber2;
 
 console.log("Multiplicación:    "+respuesta);
 respuesta = vNumber1/vNumber2;
 console.log("Cociente:   "+respuesta);
 respuesta = vNumber1%vNumber2;
 console.log("Residuo:   "+respuesta);
 vNumber1++;
 
 console.log("Valor de vNumber1 después de incrementar "+vNumber1);  
 vNumber2--;
 console.log("Valor de vNumber2 después de decrementar "+vNumber2);
Ir al Inicio

Declaración de una función simple

En el siguiente código declaramos la función sumar. Está definida con dos parámetros de tipo number y retorna un number.

function sumar(x: number, y: number): number {
  return x+y;
}

console.log(sumar(5,5))

Utilizando el mismo ejemplo, para ilustrar el sistema de tipos, vamos a cambiar la función para que devuelva el resultado de la suma en un string. Note que estamos usando la palabra reservada let para definir una variable local, de tipo number, a la función. También usamos el método toString(), predefinido para las variables de tipo number

function sumar(x: number, y: number): string {
  let result: number = x+y;
  return result.toString();
}

console.log(sumar(5,5))
Ir al Inicio

Función anónima

Las funciones anónimas son funciones que no tienen nombre. En el siguiente ejemplo, una función anónima se asigna a una variable llamada msg. Luego la variable se utiliza para invocar la función.

var msg = function() { 
   return "Hola Mundo";  
} 
console.log(msg())
Ir al Inicio

Función módulo y parámetro opcional

Una función puede definir parámetros opcionales, es decir que al llamar la función, puede no estar el parámetro. En el siguiente ejemplo, el parámetro opcional es modulo. Se indica que es opcional con el símbolo ?.

El ejemplo también muestra el uso del operador módulo: %. Si no se da el valor del módulo se devuelve el residuo de dividir por 2.

function fmodulo(x: number, modulo?: number): number {
  if (modulo && modulo > 0) {
    return x % modulo;
  } else {
    return x % 2;
  }
}

console.log(fmodulo(35, 30));
console.log(fmodulo(35));
Ir al Inicio

Arreglo de string y un ciclo

De manera general un arreglo se puede declarar:

var nombrearreglo: tipoelementos []

Y para inicializar:

nombrearreglo = [elemento1, elemento2, ...]

Por ejemplo, tenemos la declaración del arreglo de string llamado lista y al mismo tiempo su inicialización.

En el siguiente ejemplo, tenemos un ciclo estándar sobre el arreglo que lo recorre desde la posición 0 hasta su longitud:

var list :string[] = ["juan","pedro","maria","luisa"];

function concatenateNames(list: string[]) {
  let concatenatedNames = "";
  for (let index = 0; index < list.length; index++) {  
      concatenatedNames +=  list[index] + "";  
  }
  return concatenatedNames;
}

El siguiente ejemplo es una variante del anterior en donde se utiliza forEach para aplicar una función sobre cada uno de los elementos de la lista:

function concatenateNamesForEach(list: string[]) {
  let concatenatedNames = "";
  list.forEach(function(value) {concatenatedNames += value +" "}) ;
  return concatenatedNames;
}

console.log(concatenateNamesForEach(list));

La función dentro del forEach también puede definirse con el operador =>

function concatenateNamesForEach(list: string[]) {
  let concatenatedNames = "";
  list.forEach(value => {concatenatedNames += value +" "}) ;
  return concatenatedNames;
}
console.log(concatenateNamesForEach(list));

El siguiente ejemplo es otra variante en donde se utiliza map para aplicar una función definida con el operador => sobre cada uno de los elementos de la lista:

function concatenateNamesMap(list: string[]) {
  let concatenatedNames = "";
  list.map(value => {concatenatedNames += value +" "});
  return concatenatedNames;
}
console.log(concatenateNamesMap(list));

Otra manera es utilizando la función reduce la cual invoca una función "reducidora" por cada uno de los elementos, las funciones reducidoras pueden llegar a tener 4 parámetros:

  • acomulador
  • valoractual
  • indiceactual
  • arreglo

El siguiente ejemplo es una implementación de la concatenación de un arreglo utilizando reduce con un acumulador y el valor actual:

function concatenateNamesReduce(list: string[]) {
  return list.reduce(conc);
}
function conc(concatenatedNames, valor) {
    return concatenatedNames + " " + valor;
}
console.log(concatenateNamesReduce(list));

La función dentro del reduce también puede definirse con el operador =>

function concatenateNamesReduce(list: string[]) {
  return list.reduce((concatenatedNames, valor) => concatenatedNames + " " + valor);
}
console.log(concatenateNamesReduce(list));
Ir al Inicio

Funciones como objetos

Como se vio en la función anónima en TypeScript/JavaScript las funciones también son objetos. En los siguientes ejemplos podemos ver algunas de las funcionalidades que esto nos trae.

Funciones que retornan una función

function hola() {
    console.log('Hola');
    function mundo(){
        console.log(' Mundo!'); 
    }
    return mundo;
}
    
var s = hola();
console.log('mundo: ' + s);

Al ejecutarlo se imprime lo siguiente en consola: Holamundo: function mundo(){ console.log(' Mundo!'); } En el siguiente ejemplo se ejecuta al función mundo que retorna la función hola:

function hola() {
    console.log('Hola');
    function mundo(){
        console.log(' Mundo!'); 
    }
    return mundo;
}
    
var s = hola();
console.log('break');
s();

En consola: HolaBreakMundo

Pregunta: Que sale en consola al ejecutar el siguiente código? 
function hola() {
    console.log('Hola');
    function mundo(){
        console.log(' Mundo!'); 
    }
    return mundo();
}
var s = hola();
console.log('break');
s();

Funciones por parámetro

De la misma manera las funciones también se pueden enviar por parámetro:

function hola() {
    console.log('Hola');
    function mundo(){
        console.log(' Mundo!'); 
    }
    return mundo;
}
function funcionPorParametro(f : function){
    f()
    f()()
}

funcionPorParametro(hola);

En consola: HolaMundo

Ir al Inicio