Curso de ECMAScript 6+

Curso de ECMAScript 6+

Oscar Barajas Tavares

Oscar Barajas Tavares

Default Params y Concatenación

2/14
Recursos
Transcripción

Aportes 348

Preguntas 82

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Theme que utiliza el profesor: SynthWave '84 😎

Dejo aquí mis apuntes de esta clase

Estimado compañero de Platzi:
.
Si por algún motivo estás en este curso y aún no entiendes mucho de lo que el profesor indica te recomiendo pasar antes por los cursos:
.

  • Prework: Configuración de entornos de desarrollo.
  • Curso básico de Javascript.
  • Fundamentos de Javascript.
    .
    Lo comento porque hace algunos meses yo no seguí la ruta de aprendizaje de la Escuela de JavaScript. Y, empecé a llevar cursos a mi elección sin entender muchas cosas de lo que allí se decía. Lo comento para que no pases lo mismo, las rutas de aprendizaje están pensadas para hacernos la vida más fácil al organizar los conocimientos de manera secuencial.
    .
    Dicho esto, y si quieres seguir con el curso, te recomiendo no complicarte con conceptos como GIT, NPM, CODE RUNNER, PLUGINS, etc. A final de cuentas lo que el profesor está haciendo es simplemente escribir texto en un editor de texto (que hasta puede ser el block de notas), solo que él trata de ser ordenado y aplicar conocimientos previos que permiten optimizar el desarrollo.
    .
    Si no conoces esto aún, puedes aplicar los conocimientos que aquí se dictan unicamente creando un documento HTML simple y un archivo JavaScript simple. Algo así:
    .

    .
    Cuando tengas estos dos archivos creados, enlaza el archivo JavaScript a tu archivo HTML. Algo así:
    .

    .
    Escribe el mismo código que el profesor escribe en su ejemplo en el archivo JavaScript. Y luego, abre tu archivo HTML en cualquier navegador, de preferencia Chrome o FF. Para ver el resultado de tu práctica abre la consola del navegador (anticlick en la pantalla / inspeccionar elemento / consola). Algo así:
    .

    .
    De esta manera podrás realizar los ejemplos sin necesidad de instalar paquetes, plugins o software adicional.
    .
    Pero ¿Estos paquetes, plugins, software adcional son importantes? Mucho 😬😬😬. Algunos te permitirán organizar tus proyectos, otros versionar tu software y muchos más beneficios. ES MUY IMPORTANTE que no dejes de lado estos conocimientos, en Platzi hay recursos de sobra para dominarlos, sin embargo, si quieres avanzar a la par con este curso, puedes seguir los pasos que te indiqué.
    .
    Recuerda siempre que al fin y al cabo la esencia de lo que hacemos es escribir caracteres en un editor de texto, y eso se puede hacer de muchas formas, algunas más complejas que otras.
    .
    Te lo dice alguien que no entendía nada de esto hace muy poco (Y sigo así a decir verdad 🥴). Espero te sirva.
    .
    ¡Saludos!

Para añadir algo mas a esta clase, tambien le podemos asignar un default param a los elementos dentro de un objeto al momento en que estamos haciendo destructuring

const obj = { name:'pepe', lastName: undefined }
const { name, lastname = "perez" } = obj
console.log(name, lastname)
// console output -> pepe perez 

Esto es de bastante ayuda en momentos en los que tenemos un funcion que recibe muchos parametros, para evitar confundirnos en la posicion de algun parametro podemos simplemente recibir un solo parametro en la funcion y que este sea un objeto, luego hacemos destructuring para poder obtener sus elementos de manera mas facil.

//Funcion recibiendo todos los parametros  sin un objeto
function saveUser( name, lastName, age, country, city, postalCode, userName, password ){
	//...
}
//Al recibir todos los parametros de esta forma podemos equivocarnos al momento de invocar esta funcion
saveUser('pepe', 'perez', 20, 'Toronto', 'Canada', 0000,  'peperez', '123pass' ) // intercambiamos el parametro Country por el parametro City accidentalmente

//funcion recibiendo solo 1 objeto como parametro
function saveUser({ name, lastName, age, country, city, postalCode = 0000, userName, password }){
	//...
}
saveUser({ name: 'pepe', lastName: "perez", age: 20, city: 'Toronto', country: 'Canada', userName: 'peperez', password:'123pass' })//aqui intercambiamos la posicion de country y city nuevamente, pero esta vez no importa ya que todo se esta pasando dentro de un objeto, adicionalmente no estamos enviando el elemento postalCode pero su valor por defecto es 0000

Para sacar las comillas de template literals:
windows: alt + 96

Para buenas prácticas se recomienda inicializar con git init

  1. Se abre terminal hasta la ruta donde se va a trabajar el proyecto.
  2. se inicializa con el comando npm initesto nos va a permitir inicializar todo mi proyecto
    1. Package name: nos arroja por default uno, se puede cambiar si gusta
    2. Version: por default nos pone (1.0.0) le damos enter
    3. Description: Poner una breve descripción del proyecto
    4. entry point: (index.js) Aqui nos dice que cual es nuestro punto de entrada para inicializar, volvemos a poner index.js
    5. Test command: enter
    6. git repository: enter
    7. Keywords: enter
    8. Author: Poner tu nombre
    9. license : (MIT) enter
    10. nos aparecerá un resumen y le decimos que yes
    11. Abrir con tu editor de code, desde de la terminal code .

Crea una función como anteriormente se hacía (Parámetros):

function newFunction ( name, age, country){
    var name = name || 'Soter';
    var age = age || 27;
    var country = country || 'MX';
    console.log(name, age, country);
}

Ahora con ES6

function newFunction2(name = 'Soter', age = 27, country = "MX") {
    console.log(name, age, country);
};

Ahora para ejecutar lo anterior yo necesito inicializar

//Si lo quiero ejecutar necesito inicializar el llamado de esta función:
newFunction2(); //llamamos lo que tenemos de datos
newFunction2('Ricardo', '23', 'CO');// ingresamos datos

Necesitamos instalar un paquete en nuestro proyecto del cual nos va a permitir trabajar de forma más ordenada ‘Run code’ la extensión que ocupare se llama code Runner

Ahora trabajaremos con otra asignación en este proyecto lo cual son los template literals

Sirve para separar o unir dependiendo del caso los elementos

Ejemplo:

let hello = "Hello";
let world = "World";
let epicFrase = hello +' '+ world;
console.log(epicFrase);

//El resultado a mostrar es: Hello World , en la consola

Los templates literals nos permitirán hacer ese tipo de uniones más amigables sin utilizar el valor de +

Ahora con ES6, para hacerlo es:

let epicFrase2 = `${hello} ${world}`;
console.log(epicFrase2);

Nota: El Theme que utiliza el profesor es: SynthWave '84

/**
 * Default Params
 */
function newFunction(name, age, country) {
  var name = name || 'Oscar';
  var age = age || 32;
  var country = country || 'MX';
  console.log(name, age, country);
}

// es6
function newFunctionES6(name = 'Oscar', age = 32, country = 'MX') {
  console.log(name, age, country);
}

newFunctionES6();
newFunctionES6('Ricardo', 23, 'Colombia');

/**
 * Concatenation - Template Literals
 */
let hello = 'Hello';
let world = 'World';
let epicPhrase = hello + ' ' + world + '!';

// es6
let epicPhraseES6 = `${hello} ${world}!`;

console.log(epicPhrase);
console.log(epicPhraseES6);

Default params y concatenacion
Una de las características añadidas a ecmascript6 son los parámetros por defecto
Esto significa que podemos establecer ciertos valores que le pasamos a una función de una manera por defecto.
Ejemplo;
Antiguamente se utilizaba este metodo

function newFunction(name, age, country){
    var name = name || 'Angel';
    var age = age || 23;
    var country = country || 'VE';
    console.log(name, age, country);
}

Hoy en dia se pueden asignar los valores dentro de los parámetros de esta manera

function newFunction2 (name='Angel', age = 23, country = 'VE'){
    console.log(name, age, country)
}

Y al llamar la función, esta por defecto si no le pasamos algún otro parámetro al llamarla nos dira el nombre, edad y país que le hemos indicado.

Otra de las novedades es la concatenación
Antes para concatenar algo simple como un “Hello world”

let hello = "Hello";
let world = "World";
let epicPhrase = hello + ' ' + world;
console.log(epicPhrase);

Debíamos hacer algo como lo que esta en nuestra “let” “epicPhrase”
Llamar a nuestras variables y usar strigs para crear un espacio y los signos de mas.
Hoy en dia es mucho mas sencillo concatenar, porque podemos hacerlo de esta manera

let epicPhrase2 = `${hello} ${world}`;

console.log(epicPhrase2);

Nuestras variables estan dentro de las strings francesas, solo debemos respetar las sintaxis para llamarlas y escribir nuestro texto adicional fuera de ellas.

Parametros por defecto:

  • Poder establecer ciertos valores que le pasamos a una funcion de forma por defecto. Esto hace que siempre que se llame la funcion ya tenga estos parametros consigo, si queremos cambiarlos solamente debemos modificarlos en el momento en que la llamamos cambiando los parametros.
// Antes de ES6
function newFunction (name, age, country) {
	var name = name || 'Juan';
	var age = age || 20;
	var country = country || 'Col';
	console.log(name, age, country);
}

//ES6
function newFunction2 (name = 'Juan', age = 20, country = 'Col') {
	console.log(name, age, country);
}

newFunction2(); // 'Juan', 20, 'Col
newFunction2('Maria', 23, 'Mx');

Themeplates Literals

  • Nos facilita la vida si queremos concatenar varios elementos en un mensaje
// Antes de ES6
var hello = 'hello';
var world = 'world';
var phrase = hello + ' ' + world;

// ES6
var phrase2 = `${hello} ${world}`;

Cuando usamos esta “expresion” ${ } estamos interpolando datos, no necesariamente solo admite variables, sino que ahí se puede aplicar metodos, por ejemplo.

let nama = 'Daniel';
let lastName= 'Molina';

let str = `Hola, me llamo ${name.toUpperCase()} ${lastName.toLowerCase()}`

Para agregar la consola en sublime

  1. Ir a tools->build system->new build system
  2. Agregar en el file
{
"cmd": ["node", "$file"],
"selector": "source.js"
}

3.Guarda como node.sublime-build
4. Seleccionar en el build system que acabamos de crear.
5. Con cmd + b ejecutamos

Dentro de los template literals tambien puedes hacer operaciones matematicas. Ejemplo:

let hello = 'Hola';
let world = 'Mundo';


let epiFrase2 = ` ${hello} ${world} ${1 + 1}  `

console.log(epiFrase2);

El resultado es: Hola Mundo 2

Cual plugin usas para ver el código así ?! Se ve bien, Saludos!

Tip🐱‍🚀

Para que no se les mueva el código en vscode, muevan el panel a la derecha. Al principio es un poco raro, pero uno se acostumbra rápido y es más cómodo hacer código.

A template literals también es igual de conocido como template strings

Para los que presenten el problema de “npm” no se reconoce como un comando interno o externo, primero deben asegurarse de tener instalado npm instalado, lo puedes descargar aquí, yo recomiendo la versión LTS.
Después, en Windows 10: abrimos nuestro panel de control (Windows + i) y escribimos, “variables de entorno” o “Environment Variables” y seleccionamos las de nuestra cuenta o sesión >

Después seleccionamos las de nuestro usuario y damos doble clic en Path / Ruta


Finalmente, dando clic en New / nuevo, agregamos la ruta de Node.js que usualmente es C:\Program Files\nodejs, damos ok > ok, reiniciamos nuestra pc y ya no debería haber problema.

Como instalo ese Theme?

Cuando llegas a aprender en el curso de ES6 y sales con varios pluggins para instalar en el vscode.

Código de la clase

<code>
function newFunction(name, age, country){
    var name = name;
    var age = age;
    var country = country;
    console.log(name,age,country);
}

//es6
function newFunction2(name = "oscar", age = 32, country = "IT"){
    console.log(name, age, country);
}
newFunction2();//si no le paso ningun parametro, me tomara los valore por defecto que le dimos a la función
newFunction2("Ricardo,", 23, "CO");

//Template literals
let hello = "Hello";
let world = "World";
let epicPhrase = `${hello} ${world}`;
console.log(epicPhrase);
Como curiosidad, aquí en España tenemos el catalán y el valenciano en los que usamos ` y no lo llamamos comillas francesas. Lo llamamos "accent diacrític", acento diacrítico, lo usamos en la "a", "e" y la "o". para diferenciar vocales abiertas de las cerradas. La "à" siempre se acentúa así mientras que la "e" i la "o" pueden llevar o no ambos: é, è i ò, ó.

Yo usaba Template Literals y no sabia que se llamaban asi.
Solo los conocía como concatenación jaja.
Vamos bien!

En la pestaña de extensiones del visual studio tambien puedes buscar el code runner para instalarlo.

Para comillas invertidas alt + 96

Concatenación

Las plantillas de texto (o Template Strings) son cadenas literales de texto incrustadas en el código fuente que permiten su interpolación mediante expresiones.

Sintaxis:

Se utilizan las comillas invertidas ( ) para delimitar las cadenas.
Para añadir marcadores de posición (o placeholders) utilizamos el signo de dólar ( $ ) seguido de llaves { }

Antes y Ahora:

Con alt + 96 Se puden “invocar” las comillas
``

Muy buena clase profesor Orlando Naipes. Estoy tomando estos cursos por la escuela de JS y es bueno repasar esto ya que hace poco lo había aprendido.

Alternativa a code runner Quokka

La extension que usa el profesor para tener esos iconos cool en VSC se llama Material Icon Theme de Philipp Kief
XD

Documentacion Ecmascript

Hola que tal?, dejo mi aporte de la clase para entornos windows:

  1. npm traduce Node Package Manager, es uno de los componentes incluidos en NodeJS (Entorno de desarrollo para JavaScript)
  2. Puedes buscar en Google “Node JS” y llegarás a la página que te dejo en este enlace: https://nodejs.org/en/.
  3. Descargate la versión mas reciente LTS (Long Term Service).
  4. Una vez lo instales reinicia tu consola o git bash y podrás usar su funcionalidad tal como es declarada en esta clase de Default Params y Concatenación de variables tipo String.
    Saludos a todos!

Los templates literales son una excelente forma de trabajar.

Lo mejor, esa extensión de Code Runner. 😄

Ejecutar código JS en vivo, extensión: Quokka.js

Genial muy claro!

Este curso salió galardonado por los premios platzi!

no hay un orden, para llegar a mostrar este video sin saber instalar Node.js… y saber utilizar los comandos de instalacion… y demas… por favor dar un orden en este tipo de curso

Sencillo:

  • Parametros por defecto: Nos permiten asignar un tipo de dato por defecto que se asignan a una función, en caso de que no se le indique ningún valor en su invocación.

Por defecto el valor de los parámetros es undefined.

  • Template String: Es una forma más sencilla de concatenar ( unir texto con variables ).

Lo que hace JS con los Template Strings es pasar las cadenas a una función implícita la cual transforma todo a una cadena de texto.
😄

Apuntes. 😄

Notas de la clase

Me llamo Ricardo, tengo 23 y soy de Colombia, me encantó ese ejemplo 😄

“node” no se reconoce como un comando interno o externo,
programa o archivo por lotes ejecutable.

1- Parametros por defectos, son los valores que establecemos que le pasamos a una funcion por defecto
Antes de ECMAScript 6

function newFunction(name, age, country){
       	var name = name || 'Isaac'
        var age = age || 25
	var country = country || 'Venezuela'
	console.log(name, age, country)
}
        
newFunction()
newFunction('Emanuel', 26, 'Argentina')

Despues de ECMAScript 6, se añadio una forma en la cual se puede establecer desde la asignacion de los parematros

function newFunction2 (name = 'Valentina',  age = 3,  country = 'Venezuela') {
	console.log(name, age, country)
}
        
        newFunction2()
        newFunction2('Isabella', 4, 'Argentina')
    

2- Template literals, nos permiten unir valores de forma mas intuitiva

let hello = 'Hello'
let world = 'World'
        
        //Antes de ECMAScript 6
        let epicPhrase = hello + '  ' + world
        console.log(epicPhrase)
        
        //Despues de ECMAScript 6
        let epicPhrase2 = `${hello} ${world} `
        console.log(epicPhrase2)

Genial, debí haber tomado este curso hace tiempo, a darle 😄

Vengo de los fundamento de Js y está muy bien porque te explican los cambios que ha habido en el tiempo.

El tema del editor me gusta mucho, me pueden decir cuál es? 😃

También se puede utilizar runjs o utilizar el plugin de VSC llamado [quokkajs]
(https://quokkajs.com/)

para las comillas francesas/invertidas a mi me funciono Alt 96

No sabía lo de || (OR) en una función normal. Además me gusto mucho el plugin para correr código y no tener que copiarlo en la consola del navegador.

Lo de ${} lo aprendí en el curso de javascript con Sacha.

Profe, ¿Cómo se llama tu theme neón de VSCode?

Que buena extensión es Code Runner, no la conocía!

Empezando muy bien el curso 😃

Que genial el code runner.

Sacha debiste enseñarnos eso en el curso anterior jajaja

Saludos

Recomiendo usar Nodemon para la ejecución. Detecta los cambios y hace la ejecución de sus funciones automáticamente.

// Prev. ES6
function newFunction(name, age, country) {
	var name = name || 'Pablo';
	var age = age || 28;
	var country = country || 'ES';

	console.log(name, age, country);
}

// ES6. Default Params
function newFunctionES6(name = 'Pablo', age = 28, country = 'ES') {
	console.log(name, age, country);
}

newFunctionES6();
newFunctionES6('Richard', '21', 'CO');
// Prev. ES6
let hello = 'Hello';
let world = 'World';
let epicPhrase = hello + ' ' + world;
console.log(epicPhrase);

// ES6. Template Literals
let epicPhraseES6 = `${hello} ${world}`;

RESUMEN

Default params: Hace referencia a cómo podemos declarar as variables de una función y concatenación: Se refiere a cómo podemos concatenar sin la propiedad de suma+espacio+suma.

//Forma Normal
function newFunction (name,age,country) {

    var name = name || 'etrx';
    var age=age || 33;
    var country=country || "etrx";
    console.log(name, age,country);

}


//Default Params es6

function newFunction_es6(name = "name_input",age= "age_input",country="country_input"){
    console.log(name, age,country);
}

newFunction();
newFunction_es6('Pepe','32','yg');


//Forma Normal
let hello= "Hello";
let world="Mundo";
let frase = hello+" "+world;
console.log(frase);

//Template literal es6
let fraseTemplateLiteral = `${hello} ${world}`;
console.log(fraseTemplateLiteral);

Ahora entiendo por qué al imprimir lo hacían de una manera y de otra.

Que bueno. Esta revisión se parece un poco más a otros lenguajes de programación. No digo que antes estaba mal sino que mejoró mucho la legibilidad.

Con ES6 se simplifica la forma de pasar Parámetros, pues se pueden dar valor a las variables que recibe una función desde que las recibe.
Por otro lado la forma de concatenar variables de string se hace un poco más legible con los Template Literals, al permitir con la comilla francesa o invertida, y una clave para escribir variables en una cadena de string:

function newFunc2(name = "andres", edad = "27", country = "CO") {
  console.log(name, edad, country)
}
let hello = "Hello"
let world = "World"

let epicPhrase2 = `${hello} ${world}`
console.log(epicPhrase2)

Acento grave:

<code>Alt + 96
///////////////Clase 2///////////////////

let hello = 'Hello';
let world = 'world';
let epicPhrase = hello + ' ' + world;
console.log(epicPhrase);

let epicPhrase2 = `${hello} ${world}`;
console.log(epicPhrase2);

Les dejo mis apuntes:

Default Param

El primer cambio de produce en cómo se asignan los valores por defecto, veamos el método antiguo:

function newFuntion (name, age, country) {
name = name || “peter”;
age = age || 28;
country = country || “USA”;
console.log (name, age, country);
}

Tenemos una función que le pasamos 3 parámetros que serán los que le pasemos o los valores por defecto. Pero ahora se puede hacer así:

function newFunction (name = “pete”, age = “28”, country = “USA”) {
console.log (name, age, country);
}

newFunction ();
newFunction (“MaryJane”, “27”, “MX”);

Si no se le pasan valores en la llamada serán los por defecto y, si se le pasan, muestra los que le pasamos.

NOTA: Para comprobar que nos está funcionando hay que instalar un plugin de VSCode llamado Code Runner. Se descarga desde la zona de plugins/extensiones de la web de VSCode. Vemos como ahora con botón derecho tenemos la opción de run code y en la consola/output nos sale el resultado.

Template Literals

Nos permite separar o unir varios elementos.
Como lo hacíamos antes:

let hello = ‘helo’;
let world = ‘world’;
let epicSentence = hello + ’ ’ + world;
console.log (epicSentence);

Como lo podemos hacer ahora:

**let epicSentence2 = ${hello} ${world};
console.log (epicSentence2);
**

Bien, asi entendemos cosas que no entendíamos en cursos anteriores

las comillas francesas en Windows con el comando alt+96 ``

Me encanta el tema del profe, ilumina las funciones estilo retro

¿Que diferencia existe entre las funciones de JavaScript y las de otros lenguajes de programación?
La diferencia radica en que las de JS se pueden asignar en variables, arrays y objetos. Es decir, son tratadas como first-class objects

el profe utiliza la frase "código que no es intuitivo"
pero esto:

let epicPhrase = `${hello} ${world}`;

no es precisamente mas intuitivo que esto:

let epicPhrase = hello + ' ' + world;

supongo que existe una razón, pero ¿cual es?

🟥IMPORTANTE "NODE"🟥

hola, si estás siguiendo la ESCUELA DE JAVASCRIPT en esta clase él usa una extensión llamada code runner con la cuál tu puedes correr código de javascript en Visual Studio Code e problema es que no funciona la extensión o eso parece te pide que instales node PRESTA ATENCIÓN si buscaste la solución y no entendiste como esque hay fallos en la escuela de javascipt y no te enseñan a instlar node hasta casi de los últimos cursos en la escuela de JAVASCRIPT y estarás pensado a quién se le ocurre hacer eso!!! pedirte algo y dar por hecho que ya lo sabes lo entiendes y lo tienes instalados desde unos 8 CURSOS ANTES bien mi respuesta es que creo que esta mal diseñada la escuela porque de hecho si entras al curso de “Curso de fundamentos de node.js” te dará cuenta que la primera clase o lección es precisamente instalar node.js !!! ve aquí por si quieres saber como resolver el problema POR FAVOR hagamos de esta la publicacióncon más like de esta clase para que todos los nuevos que cabamos de entrar a platzi y no tenemos ni idea de que esta sucediendo acá lo vean y encuentren la solución para este 2022!!!

Mi aporte para esta clase


Para sacar las "comillas francesas" usar 
alt + 96  = `soy una tilde invertida`.

Comparto mis apuntes de la clase implementando ambos conceptos en conjunto. Salu2!!

//? ┌────────────────────────────────┐
//? │ Default Params & Concatenation │
//? └────────────────────────────────┘

//* Default Params & concatenation before ECMAScript 6
function JSnewFunction(name, age, country) {
	//? The default values are assigned to variables that are not passed as parameters, using the same name as the parameter with a default value assigned by OR operator.
	var name = name || 'Oscar';
	var age = age || 32;
	var country = country || 'MX';
	//? The concatenation operator is used to join two or more strings.
	var text = 'My name is ' + name + ', I am ' + age + ' years old and I am from ' + country;
	console.log(text);
}

//* Default Params & concatenation after ECMAScript 6
function ESnewFunction(name = 'Oscar', age = 32, country = 'MX') {
	//? The default values are assigned directly to the parameters.
	//? The concatenation is done using the template literals.
	var text = `My name is ${name}, I am ${age} years old and I am from ${country}`;
	console.log(text);
}

//* Execute the params functions with and without parameters

JSnewFunction();
JSnewFunction('Mario', 23, 'JP');

ESnewFunction();
ESnewFunction('Mario', 23, 'JP');

El resultado al usar Code Run es el siguente:

My name is Oscar, I am 32 years old and I am from MX
My name is Mario, I am 23 years old and I am from JP
My name is Oscar, I am 32 years old and I am from MX
My name is Mario, I am 23 years old and I am from JP

[Done] exited with code=0 in 0.033 seconds

Comparto mis apuntes de Default Params…

Default Params y concatenación

Antes de es6 si queríamos utilizar parámetros por default se hacia de la siguiente forma:

//Antiguas versiones
function newFunction(name, age, country) {
  var name = name || 'oscar';
  var age = age || 32;
  var country = country || 'MX';
  console.log(name, age, country);
}

Además si queríamos concatenar esta era la forma de hacerlo:

let hello = "Hello";
let world = "World";
let epicPhrase = hello + ' ' + world;

Veamos lo que nos trajo consigo es6

Default Params

Con la versión de es6 ahora podemos definir valores por defecto como veremos en el siguiente ejemplo bajo la funcion “newFunction2”.

// es6
function newFunction2(name = 'oscar', age **= 32**, country **= "MX"**) {
  console.log(name, age, country);
};

**newFunction2();**
**newFunction2('Ricardo', '23', 'CO');**

Obviamente tambien podemos asignar valores, como se ve en la última línea de código del ejemplo.

Concatenación

Forma con es6 haciendo uso de los template literals “``" y utilizamos “{}” dentro de estas para asignar nuestra variable. Observemos el siguiente ejemplo.

let hello = "Hello";
let world = "World";
**let epicPhrase2 = `${hello} ${world}`;**
console.log(epicPhrase2);

ojo para que utilicen npm deben terner instalado Node.js solo lo descargan y vuelven abrir el terminal o en caso de windows lo instalan en cmd como : npm install [email protected] -g
y listo ya lo pueden utilizan en powershell

.
Añadiendo más información acerca de los Default Params. Podemos indicar que:

  • Si llamamos a una función que requiere parámetros y no le colocamos ninguno, el resultado será undefinido.
function funcionPrueba(a){
	return a;
}
funcionPrueba(); // Undefined
  • Si queremos llamar a un parámetro sin un valor por defecto, los resultados serán los siguientes:
function funcionPrueba(a=3, b){
	return b;
}
funcionPrueba(5); // Undefined

function funcionPrueba2(a=3, b){
	return a + b;
}
funcionPrueba2(5); // NaN
  • Podemos usar una función como parámetro por defecto.
function funcionPrueba(){
	return 3;
}
function funcionSuma(a = funcionPrueba(), b = 5){
	return a + b;
}
funcionSuma(); // 8

Y este sería mi granito de arena para todos nosotros. ¡Nunca pares de aprender!

Ahora podemos poner los valores de las funciones en los parentesis y ya no adentros, esto para ahorrarnos algo de tiempo y si queremos tener un valor como predeterminado, poderlo tener y si lo queremos cambiar también poderlo hacer.

Se creo una nueva forma de concatenar utilizando backtiks que se activan en windows con ctrl + alt + boton de cierre de este signo } o el que esta alado izquierdo inferior del enter `` ejemplo de concatenación

let pajaro = pajaro;
let volando = volando;
let concatenación = `/*Signo de dolar + llaves*/ ${pajaro} ${volando} `;
/*Para que nos sirve esto? Pues no sirve para no tener que estar sufriendo teniendo que concatenar con sumas y poder escribir a libertad si es que queremos agregar nuevos strings*/

guthub copilot hizo todo el trabajo de escribir :v quedo igual XD, que suerte que estoy repasando porque seria tedioso para alguien que comienza como una maquina ya sabe que vas a hacer solo con el titulo del documento Xd

Si quieren escribir: let epicPhrase2 = ${hello} ${world}
Para poner ` tienen que pulsar alt+96, ese es el código ascii.

Comillas francesas
Alt + 96 = `

Con las funciones de flecha, quedaría en una sola línea

const newFunction2 = (name = "Adrian", age = 25, country = "Costa Rica") => console.log(name, age, country);
newFunction2();

Desde la terminal también se tiene la posibilidad de correr archivos con node usando, de esta manera:

node file.js

Con editores como vim se puede ejecutar instrucciones como esta:

!node %

Para una explicación más a detalle tengo este repo

Para quien le interese, las config de la terminal de Oscar con las siguientes:

Y por si a alguien le interesa tengo una herramienta que automatiza eso:

Chicos, tambien pueden instalar Quokka.js, una extenison de VS CODE en lugar de Code Runner

Parámetros por defecto

se pueden establecer ciertos valores que se pasan a una función de forma predeterminada, primero un ejemplo de como se realizaba anteriormente

function  newFunction(name, age, country) {
    var name = name || 'oscar';
    var age = age || 32;
    var country = country || 'VE';
    console.log(name,age,country);
}

Ahora con ECMAScript 6 (ES6), se puede realizar de la siguiente manera

//ES6
function  newFunctionES(name = 'oscar', age = 32, country = 'VE') {
    console.log(name,age,country);
}

Al momento de ser ejecutada se puede hacer de dos formas distintas

//Sin enviar valores
newFunction2();
//Enviando Valores
newFunction2('Kevin', 27,'VE');

Templates Literals

Nos permite hacer uniones de string de forma mas amigable sin utilizar el valor de +, Ejemplo:

let hello = "Hello";
let world = "World";
let epicPhrase = hello + ' ' + world;
console.log(epicPhrase);

Con Template Literals se hace de la siguiente forma:

let epicPhrase2 = `${hello} ${world}`;
console.log(epicPhrase2);

Importante se deben usar la comilla francesa `` para utilizar los Templates Literals

// Antes de ES6
function newFunction(name, age, country) {
    var name = name || 'oscar';
    var age = age || 32;
    var country = country || 'MX';
    console.log(name, age, country);
  }
  
// con es6
function newFunction2(name = 'oscar', age = 32, country = "MX") {
    console.log(name, age, country);
  };
// dos formas de llamar a la funcion
newFunction2();
newFunction2('Ricardo', '23', 'CO');

// concatenar antes de ES6
let hello = "Hello";
let world = "World";
let epicPhrase = hello + ' ' + world;
console.log(epicPhrase);
//Concatenar con ES6 con templates ${}
let epicPhrase2 = `${hello} ${world}`;
console.log(epicPhrase2);
me gusta full como explica Oscar, no había tenido la oportunidad de ver un curso de el. con respecto a la versión de ECMAScript 6 no se ve tan difícil y es facil de realizar, o por lo menos en el ejemplo se ve de esa manera.
Que pro se ve trabajar en consola.... Osea, super brutal

Como sacar las ``

  • Windows:

Alt + 96

  • Linux:

Alt Gr + }

ya usaba ecmascript 6 y no lo sabía 🤔

porque los profesores se escuchan cansados, ya he visto varios cursos y así lo noto

Para instalar el SynthWave en Linux, en la consola

whoami // aca obtienen su nombre de usuario
whereis code // ubicacion del vscode
sudo chown -R <user> /usr/share/code

Y listo

mas abajo dejo el pequeño comentario sobre como tener las comillas invertidas

//javascript formal antes de Ecmascript 6
function newFunction(name, age, country){
   var name = name || "carlos";
   var age = age || 24;
   var country = country || "Mx"; 
}


// EcmaScript 6
//ahora en las funciones se pueden definir los parametros dentro de las funciones donde mismo que se indican
function newfunction2(name = "Fernando", age = 24, country = "mx"){
    console.log(name, age, country);
}

newfunction2();
newfunction2('Ricardo', '23', 'CAN');

//Template Literals
//antes para concatenación
let hello = "hello";
let world = "world";
let apicPhrase = hello + ' ' + world;
console.log(apicPhrase);

//despues de ECMAScript6

let epicPhrase2 = `${hello} ${world}`;
console.log(epicPhrase2);

/*para que funcione esta clase de concatenación es necesario tener en cuenta las comillas invertidas que se pueden encontrar en la distribución 
mexico con ALT Gr y la tecla del corchete de cierre, junto con el ${} se concatenaria ahora en ecmascript 5
*/

<let> a diferencia de <var> limita su escope solo al bloque, no como <var> que puede utilizarse en global o local.

Genail Ese plugin Code Runner 😃

Ciertamente, en ecmascript 6 el codigo se ve mucho mas limpio y legible

muchas gracias por el plug in, es taaaaan util.

// Antes de EcmaScript 6 se inicializaba una funcion con parametros que tienen valores por defecto de la siguiente manaera:

function newFunction(name, age, country) {
    var name = name || 'Johan';
    var age = age || 29;
    var country = country || 'Colombia';
    console.log(name, age, country);
}


// en ECMAScript 6 se crea de la siguiente forma:

function newFunction2(name = 'Johan', age = 29, country = 'Colombia') {
    console.log(name, age, country);
}

// Cuando ejecutamos la funcion sin argumentos mostrara como resultado los valores que establecimos en los parametros de la funcion.

newFunction2();

newFunction();

// Cuando pasamos argumentos, estos reemplazaran los valores que dimos a los parametros en la funcion

newFunction2('Juan', '7', 'Peru');

newFunction('Luis', '0.1', 'Ecuador');

// Asi se concatenaban antes las strings

let hello = 'Hello';
let world = 'World';
let epicPhrase = hello + ' ' + world
console.log(epicPhrase)

//Ahora lo puedes hacer mas facil utilizando las plantillas literales o templates literals

let epicPhrase2 = `${hello} ${world}`;
console.log(epicPhrase2);