Platzi
Platzi

¡Invierte en ti y celebremos! Adquiere un plan Expert o Expert+ a precio especial.

Antes: $349
$259
Currency
Antes: $349
Ahorras: $90
COMIENZA AHORA
Termina en: 7D : 1H : 19M : 12S

Debes iniciar sesión

Para ver esta clase crea una cuenta sin costo o inicia sesión

Curso de ECMAScript 6+

Curso de ECMAScript 6+

Oscar Barajas Tavares

Oscar Barajas Tavares

Default Params y Concatenación

2/11

Theme que utiliza el profesor: SynthWave '84 😎

Dejo aquí mis apuntes de esta clase concatenar.png

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

/**
 * 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);

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 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}`;

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

ALT96.jpg
screencapture-notion-so-Default-Param-Template-Literals-5a777fb329a9490caff7953d3b11646c-2020-07-18-23_06_50.png

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.
vscode_rigthbar.PNG

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

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()}`

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

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 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 >
screenshot_08.png

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

screenshot_09.png
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.
screenshot_10.png

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

Como instalo ese Theme?

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!

Para comillas invertidas alt + 96

“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?

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.
😄

Esas comillas francesas yo las puedo hacer con ctrl + alt + (la tecla que tiene el símbolo de ç (C-cedilla))

No me funciona el npm init. ¿Como hago para que funcione?

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

Solución al posible error: “node” no se reconoce como un comando interno o externo, programa o …
https://bertofern.wordpress.com/2019/01/08/solucion-node-js-npm-no-reconocido-como-comando-interno-o-externo/

npm init es el comando que usamos para iniciar nuestro proyecto con Node.js

Para ejecutar el Run Code también pueden darle directamente al botón de Play en la esquina superior derecha, Saludos

Para los que tienen teclado en ingles, quizá esto les puede servir
https://www.youtube.com/watch?v=tr10xeMnEBo

Notas de la clase
code.png

Para los que tengan teclado mecánico de 60% o 65% así se sacan estos símbolos ` y ~

` = FN + ESC.
= SHIFT + FN + ESC

Si en la opcion de licencia te aparece por defecto ISC, solo debes escribir MIT y darle enter.

hola disculpen saben porque mi sale la licencia ISC y no la MIT ![](Captura de Pantalla 2021-03-18 a la(s) 11.58.29.png)

Me encantó la extension de code runner, jajajaj, vengo de usar la consola de chrome

Apuntes. 😄

Clase 2 ECMAScript.png

Aquí lo trabajado en clase
ecmascript-1.png

Gran ayuda los template literals.

Para las comillas invertidas es: ``
Alt + 96 en Windows

en cuanto tiempo lo ejecuta tu ordenador

Por si le sirve a alguien encontré esta pagina donde corre ES6
https://es6console.com/

que es lo primero que inicia? con que programa lo hizo? como lo hago?

Por si alguien le sirve:

` = Alt Gr + ]

Lo mismo se ha nombrado, pero otra opción para probar código en VSCode es Quokka, con la versión gratuita funciona para estas cuestiones también.

Quokka

Un saludo.

como ya se esta manejando el nodejs, se puede correr desde la terminal escribiendo:
node index.js

Defailt Params y Concatenacion

/* 
CARACTERISTICAS QUE SE ANADIERON EN ECMASCRIPT 6

*/

//Forma Antigua
function newFunction (name, age, country) {
    //igual al nombre que se le pase por parametro o un valor por defecto
    var name = name || 'Alejandro';
    var age = age || 23;
    var country = country || 'Ecuador'; 
    console.log(name, age, country);
}

//es6
function newFunction2(name = 'Alejandro', age= 23, country = 'Ecuador'){
    console.log(name, age, country);
};

//si no se le pasa ningun valor en los argumentos tomara los valores por defecto
newFunction2();
newFunction2('Luis', 42, 'Panama'); 

//TEMPLATE LITERALS

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


//Podriamos hacer ese bloque anterior mas amigable 
let epicPhrase2 = `${hello} ${world}`;
console.log(epicPhrase2); //Hello World

`` Aquí les dejo las comillas francesas para que sigan la clase y luego lo busquen en su teclado.

🤓 Importante:
Si les pasa como yo y tenían un error que decía:

[Running] node "..../Programación/Platzi - ECMAScript 6+/src/tempCodeRunnerFile.js"
/bin/sh: node: command not found

Es porque no tienen instalado NodeJS. Basta con buscar en Google NodeJS e instalarlo. Con eso dejará de aparecer y problema solucionado, amiguitos y amiguitas 😄

C2.png
function newFuction(name, age, contry){
    var name = name || 'Victor';
    var age = age || 17;
    var contry = contry || 'CDMX';
    console.log(name, age, contry);
}
newFuction('Victor', 17, 'CDMX');

//es6
function  newFuncion2(name = "Victor", age = 17, contry = 'MX'){
    console.log(name, age, contry);
}
newFuncion2();
newFuncion2('Axel', 18, );


// Template Strings
let nombrePersona = "Victor Adrian";
let edad = 17;
console.log(`Hola ${nombrePersona}, edad: ${edad} `);

Para poder sacar las comillas invertidas Alt + 96

Los parametros por defecto son los valores que se le asignan a los parametros si vienen vacio

Despues de tener gir iniciado y tambien NPM. Debemos de crear una carpeta de nombre src y despues otra llamada es6 donde pondremos nuestro archivo index.js.

Una caracteristica anadida en ecmascript6 fueron los parametros por defecto. Nosotros podemos establecer ciertos valores que pasamos a una funcion por defecto. Un ejemplo seria:

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

De esta forma se establecia estos puntos, pero en Es6 se agrego una forma donde podemos establecerlo desde la asignacion de los parametros. Es asi:

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

Donde si mandamos a llamar la funcion y no le asignamos parametros, se le asignaran los elementos por defectos, pero al momentos de agregar parametros diferentes, estos reemplazaran a los por defecto.

Si compilamos el siguiente codigo:

newFunction2();
newFunction2('Joel', '20', 'MX');

La salida sera:

oscar 32 MX
Joel 20 MX

Existe otra asignacion con las que trabajamos en nuestro poryecto que son los Templates Literals que nos ayudaran a separar o unir varios elementos. Lo que es la concatenacion, antes se hacia de esta forma:

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

Actualmente con template Literals nos deja hacerlo de forma diferente, que tomando las variables hello y world, seria de esta forma:

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

De esta forma podremos concatenar todos los elementos que necesitemos sin algun problema.

Mis apuntes 😄

//De ésta manera se le asignaban valores por defecto a las funciones antes de ES6.

function newFunction(name,age,country){
    var name = name || 'jorge';
    var age = age || 25;
    var country = country || 'VZ';
    console.log(name, age,country);
}

//es6
function newFunction2(name='jorge',age=25,country='VZ') {
    console.log(name,age,country); 
}
newFunction2();
newFunction2('ricardo',23,"CO");

// templateL

let hello = 'hello';
let world = 'world';
//concatenacion vieja
let fraseEpica = hello + ' ' + world;
//concatenacion nueva
let fraseEpica2 = `${hello} ${world}`;

console.log(fraseEpica);
console.log(fraseEpica2);

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

ReferenceError: hello is not defined
Me sale eso cuando le doy a “Run code” 😦(

<h3>2. Default Params y Concatenación</h3>

Truco para sacar este tipo de comillas en windows: ``, es alt + 96.

Les comparto así mismo el código de la clase:

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

//es6 (estableciendo valores por defecto si no pasamos un valor)
function newFunction2(name = 'oscar', age = 32, country = 'MX'){
    console.log(name, age, country)
}

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

//temnplate literals
let hello = "Hello";
let world = "World";
let epicPhrase = hello + ' ' + world;
console.log(epicPhrase);
let epicPhrase2 = `${hello} ${world}`;
console.log(epicPhrase2);

Aca hay un articulo que explica un poco más acerca de los usos de las comillas invertidas

como detalle, no se si vendrá mas adelante… dentro de los string literals se pueden llamar funciones tambien asi como cualquier codigo JS que retorne algo ${giveMeApples()}

// Definir valores de parametros dentro de la funcion
function newFunction(name, age, country){
    var name = name || "matias"
    var age = age || "18"
    var country = country || "chile"
}

// definir valores directamente en los parametros de la funcion
function newFunction2(name = "matias", age = 18, country = "chile"){
    console.log(name, age, country)
}

// disparar funcion con parametros 'prestablecidos'
newFunction2();
// disparar funcion con nuevos valores para los parametros
newFunction2("diego", 14, "chile")


// definicion de variables
let hello = "hello"
let world = "world"

// diferencia de concatenacion
let frase1 = hello + ' ' + world;
let frase2 = `${hello} ${world}`

console.log(frase2);
console.log(frase1);

Mi resumen:
Funciones con valores por defecto

Una de las novedades que trae ecmascript6 es que se pueden crear funciones con valores por defecto de forma mas sencilla

Antes:

function miFuncion(edad,pais,nombre){
var edad= edad || 15;
var pais = pais || 'venezuela';
var nombre = nombre || 'andres';

console.log(edad, pais, nombre);
}

Con ecmascript6:

function miFuncion(edad=15, pais='venezuela', nombre='adnres'){
console.log(edad, pais, nombre);
}

Mucho más corto!


Templates:

Para concatenar elementos

let hello= "Hello"; 
let world = "World";

Antes:

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

Ecmascript6: con template literals (usar comillas francesas ``)

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

Theme que utiliza el profesor: SynthWave '84 😎

Dejo aquí mis apuntes de esta clase concatenar.png

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

/**
 * 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);

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 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}`;

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

ALT96.jpg
screencapture-notion-so-Default-Param-Template-Literals-5a777fb329a9490caff7953d3b11646c-2020-07-18-23_06_50.png

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.
vscode_rigthbar.PNG

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

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()}`

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

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 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 >
screenshot_08.png

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

screenshot_09.png
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.
screenshot_10.png

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

Como instalo ese Theme?

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!

Para comillas invertidas alt + 96

“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?

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.
😄

Esas comillas francesas yo las puedo hacer con ctrl + alt + (la tecla que tiene el símbolo de ç (C-cedilla))

No me funciona el npm init. ¿Como hago para que funcione?

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

Solución al posible error: “node” no se reconoce como un comando interno o externo, programa o …
https://bertofern.wordpress.com/2019/01/08/solucion-node-js-npm-no-reconocido-como-comando-interno-o-externo/

npm init es el comando que usamos para iniciar nuestro proyecto con Node.js

Para ejecutar el Run Code también pueden darle directamente al botón de Play en la esquina superior derecha, Saludos

Para los que tienen teclado en ingles, quizá esto les puede servir
https://www.youtube.com/watch?v=tr10xeMnEBo

Notas de la clase
code.png

Para los que tengan teclado mecánico de 60% o 65% así se sacan estos símbolos ` y ~

` = FN + ESC.
= SHIFT + FN + ESC

Si en la opcion de licencia te aparece por defecto ISC, solo debes escribir MIT y darle enter.

hola disculpen saben porque mi sale la licencia ISC y no la MIT ![](Captura de Pantalla 2021-03-18 a la(s) 11.58.29.png)

Me encantó la extension de code runner, jajajaj, vengo de usar la consola de chrome

Apuntes. 😄

Clase 2 ECMAScript.png

Aquí lo trabajado en clase
ecmascript-1.png

Gran ayuda los template literals.

Para las comillas invertidas es: ``
Alt + 96 en Windows

en cuanto tiempo lo ejecuta tu ordenador

Por si le sirve a alguien encontré esta pagina donde corre ES6
https://es6console.com/

que es lo primero que inicia? con que programa lo hizo? como lo hago?

Por si alguien le sirve:

` = Alt Gr + ]

Lo mismo se ha nombrado, pero otra opción para probar código en VSCode es Quokka, con la versión gratuita funciona para estas cuestiones también.

Quokka

Un saludo.

como ya se esta manejando el nodejs, se puede correr desde la terminal escribiendo:
node index.js

Defailt Params y Concatenacion

/* 
CARACTERISTICAS QUE SE ANADIERON EN ECMASCRIPT 6

*/

//Forma Antigua
function newFunction (name, age, country) {
    //igual al nombre que se le pase por parametro o un valor por defecto
    var name = name || 'Alejandro';
    var age = age || 23;
    var country = country || 'Ecuador'; 
    console.log(name, age, country);
}

//es6
function newFunction2(name = 'Alejandro', age= 23, country = 'Ecuador'){
    console.log(name, age, country);
};

//si no se le pasa ningun valor en los argumentos tomara los valores por defecto
newFunction2();
newFunction2('Luis', 42, 'Panama'); 

//TEMPLATE LITERALS

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


//Podriamos hacer ese bloque anterior mas amigable 
let epicPhrase2 = `${hello} ${world}`;
console.log(epicPhrase2); //Hello World

`` Aquí les dejo las comillas francesas para que sigan la clase y luego lo busquen en su teclado.

🤓 Importante:
Si les pasa como yo y tenían un error que decía:

[Running] node "..../Programación/Platzi - ECMAScript 6+/src/tempCodeRunnerFile.js"
/bin/sh: node: command not found

Es porque no tienen instalado NodeJS. Basta con buscar en Google NodeJS e instalarlo. Con eso dejará de aparecer y problema solucionado, amiguitos y amiguitas 😄

C2.png
function newFuction(name, age, contry){
    var name = name || 'Victor';
    var age = age || 17;
    var contry = contry || 'CDMX';
    console.log(name, age, contry);
}
newFuction('Victor', 17, 'CDMX');

//es6
function  newFuncion2(name = "Victor", age = 17, contry = 'MX'){
    console.log(name, age, contry);
}
newFuncion2();
newFuncion2('Axel', 18, );


// Template Strings
let nombrePersona = "Victor Adrian";
let edad = 17;
console.log(`Hola ${nombrePersona}, edad: ${edad} `);

Para poder sacar las comillas invertidas Alt + 96

Los parametros por defecto son los valores que se le asignan a los parametros si vienen vacio

Despues de tener gir iniciado y tambien NPM. Debemos de crear una carpeta de nombre src y despues otra llamada es6 donde pondremos nuestro archivo index.js.

Una caracteristica anadida en ecmascript6 fueron los parametros por defecto. Nosotros podemos establecer ciertos valores que pasamos a una funcion por defecto. Un ejemplo seria:

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

De esta forma se establecia estos puntos, pero en Es6 se agrego una forma donde podemos establecerlo desde la asignacion de los parametros. Es asi:

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

Donde si mandamos a llamar la funcion y no le asignamos parametros, se le asignaran los elementos por defectos, pero al momentos de agregar parametros diferentes, estos reemplazaran a los por defecto.

Si compilamos el siguiente codigo:

newFunction2();
newFunction2('Joel', '20', 'MX');

La salida sera:

oscar 32 MX
Joel 20 MX

Existe otra asignacion con las que trabajamos en nuestro poryecto que son los Templates Literals que nos ayudaran a separar o unir varios elementos. Lo que es la concatenacion, antes se hacia de esta forma:

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

Actualmente con template Literals nos deja hacerlo de forma diferente, que tomando las variables hello y world, seria de esta forma:

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

De esta forma podremos concatenar todos los elementos que necesitemos sin algun problema.

Mis apuntes 😄

//De ésta manera se le asignaban valores por defecto a las funciones antes de ES6.

function newFunction(name,age,country){
    var name = name || 'jorge';
    var age = age || 25;
    var country = country || 'VZ';
    console.log(name, age,country);
}

//es6
function newFunction2(name='jorge',age=25,country='VZ') {
    console.log(name,age,country); 
}
newFunction2();
newFunction2('ricardo',23,"CO");

// templateL

let hello = 'hello';
let world = 'world';
//concatenacion vieja
let fraseEpica = hello + ' ' + world;
//concatenacion nueva
let fraseEpica2 = `${hello} ${world}`;

console.log(fraseEpica);
console.log(fraseEpica2);

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

ReferenceError: hello is not defined
Me sale eso cuando le doy a “Run code” 😦(

<h3>2. Default Params y Concatenación</h3>

Truco para sacar este tipo de comillas en windows: ``, es alt + 96.

Les comparto así mismo el código de la clase:

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

//es6 (estableciendo valores por defecto si no pasamos un valor)
function newFunction2(name = 'oscar', age = 32, country = 'MX'){
    console.log(name, age, country)
}

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

//temnplate literals
let hello = "Hello";
let world = "World";
let epicPhrase = hello + ' ' + world;
console.log(epicPhrase);
let epicPhrase2 = `${hello} ${world}`;
console.log(epicPhrase2);

Aca hay un articulo que explica un poco más acerca de los usos de las comillas invertidas

como detalle, no se si vendrá mas adelante… dentro de los string literals se pueden llamar funciones tambien asi como cualquier codigo JS que retorne algo ${giveMeApples()}

// Definir valores de parametros dentro de la funcion
function newFunction(name, age, country){
    var name = name || "matias"
    var age = age || "18"
    var country = country || "chile"
}

// definir valores directamente en los parametros de la funcion
function newFunction2(name = "matias", age = 18, country = "chile"){
    console.log(name, age, country)
}

// disparar funcion con parametros 'prestablecidos'
newFunction2();
// disparar funcion con nuevos valores para los parametros
newFunction2("diego", 14, "chile")


// definicion de variables
let hello = "hello"
let world = "world"

// diferencia de concatenacion
let frase1 = hello + ' ' + world;
let frase2 = `${hello} ${world}`

console.log(frase2);
console.log(frase1);

Mi resumen:
Funciones con valores por defecto

Una de las novedades que trae ecmascript6 es que se pueden crear funciones con valores por defecto de forma mas sencilla

Antes:

function miFuncion(edad,pais,nombre){
var edad= edad || 15;
var pais = pais || 'venezuela';
var nombre = nombre || 'andres';

console.log(edad, pais, nombre);
}

Con ecmascript6:

function miFuncion(edad=15, pais='venezuela', nombre='adnres'){
console.log(edad, pais, nombre);
}

Mucho más corto!


Templates:

Para concatenar elementos

let hello= "Hello"; 
let world = "World";

Antes:

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

Ecmascript6: con template literals (usar comillas francesas ``)

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