¿Qué se implementó en ES8?

RESUMEN:

En esta clase vimos las algunas implementaciones de ES8, como Object entries, Object Values, Padding y Trailing-Comas.

En el siguiente código se lista los ejemplos comentariados.

//Object entries deveule los valores de una matriz.

const data ={
    front:'Alej',
    back: 'Rel'
};

//Tranformar este objeto en una matriz. 
const entries =Object.entries(data);
console.log(entries);
//Si queremos saber cuantos elementos posee nuestro arreglo ahora es posible con length
console.log(entries.length);



//Objetc Values: Me devuelve los valores de un objeto a un arreglo. 


const data= {
    front:'Alej',
    back: 'Rel'
}

const values = Object.values(data);
console.log(values);

// Padding: nos permite añadir cadenas vacías a string, pudiendo modificar la cadena string como tal.
//Podría servir del lado del front , para mostrar una estructura de elementos.

const string ='hello';
console.log(string.padStart(7,'hi')) // se añade al inicio la palabra 'hi'
console.log(string.padEnd(12,'hi')) // Se añade al final la palabra 'hi'


//Trailing comas, nos permite asignar elementos al objeto mediante comas.
const data= {
    front:'Alej', // Puede existir
    back: 'Rel'
}

Onject.entries()

// Object.entries 
const data = {
    frontend: 'Juan',
    backend: 'Carlos',
    design: 'Ana'
}
const entries = Object.entries(data)
const key = Object.keys(data)
const values = Object.values(data)
console.log(entries)
console.log(key)
console.log(values);

Clase muy importante

ES8

- async / await
https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Operadores/await

- Object.entries: convertir un objeto a un matriz donde los propiedades de objeto clave, valor se transformarán en un arreglo [clave,valor]
https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/entries

**- Object.values: **devuelve los valores de un objeto convertidos en un arreglo.
https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/values

- “texto”.padStart() | “texto”.padEnd()
https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/padStart
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/String/padEnd

Buen ejemplo de los mdn web doc

const fullNumber = '2034399002125581';
const last4Digits = fullNumber.slice(-4);
const maskedNumber = last4Digits.padStart(fullNumber.length, '*');
console.log(maskedNumber);
// expected output: "************5581"```

Ademas de reducir los errores, las Trailing_commas nos permite una lectura más limpia de los cambios en un archivo con Git, ya sea consola (git diff) o desde herramientas como gitlab y github.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Trailing_commas

‘data’ = hice toro este llanto por nara…

ECMAScript 8(2017)
At the TC39 meeting in January 2017, the last feature of ECMAScript 2017, “Shared memory and atomics” .

Major new features:

• Async Functions (Brian Terlson)
• Shared memory and atomics (Lars T. Hansen)

Minor new features:

• Object.values/Object.entries (Jordan Harband)
• String padding (Jordan Harband, Rick Waldron)
• Object.getOwnPropertyDescriptors() (Jordan Harband, Andrea Giammarchi)
• Trailing commas in function parameter lists and calls (Jeff Morrison)

Además del metodo Object.values() también existe el metodo Object.keys() el cual nos devuelve en un Array el nombre de la propiedad del objeto, pero desconozco en que version de ECMAScript salió.

Comparto apuntes de la clase:

// Object.entrie (+agregado)

const data = {
  frontend: 'Oscar',
  backend: 'Isabel',
  design: 'Ana'
} 

// -entries- { Transforma un objeto a matriz } 
const entries = Object.entries(data)
console.log(entries)
console.log(entries.length)

// -values- { Toma sólo los valores, pasándolos a un Array } 
const values = Object.values(data)
console.log(values)
console.log(values.length)


// padStart & padEnd (Agregan caracteres al princio y al final respectivamente, toman 2 parametros (limite, string))

const myString = 'hello'
console.log(myString.padStart(8, 'hi '))
console.log(myString.padEnd(12, ' _____'))
console.log('food'.padEnd(12, ' ______'))

Combinando .includes con Object.values

const data = {
    frontend: 'Leonardo',
    backend: 'Victoria',
    desing: 'Paco',
}

const values = Object.values(data);
console.log(values);

if (values.includes('Leonardo')){
    console.log('Si lo tiene');
}else {
    console.log('no lo tiene');
}```

El objecto Object (valga la redundancia) posee también la propiedad keys, para retornar las claves del objeto.

const data = {
    frontend: 'Moisés',
    backend: 'Moisés',
    design: 'Ana',
};

const values = Object.keys(data); 
console.log(values);

Response: 
[ 'frontend', 'backend', 'design' ]

2:05, como esto es un arreglo, es mejor utilizar console.table(entries) y les regresará algo así:
┌─────────┬────────────┬───────────┐
│ (index) │ 0 │ 1 │
├─────────┼────────────┼───────────┤
│ 0 │ ‘frontend’ │ ‘Miguel’ │
│ 1 │ ‘backend’ │ ‘Roberto’ │
│ 2 │ ‘design’ │ ‘Perla’ │
└─────────┴────────────┴───────────┘
En su consola se verá mejor jaja

Los Trailing Commas son llamadas tambien Final Commas (comas finales) y aunque no son necesarias en ese último elemento se considera útil ponerla, ya que si algun desarrollador quisiera añadir un nuevo elemento podría evitarse ese error común de la coma dfaltante entre los dos ultimos elementos.

Los Trailing Commas aplican para arreglos, objetos, parametros en funciones, llamados en funciones y desestructuracion.
Pero no están permitidas en JSON!

Mas info. (Está en inglés)

la documentaciòn está muy interesante
entries
https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/entries

values
https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/values

padStart
https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/padStart

Se nota la evolución de js

const data = {
    frontend: 'Fran',
    backend: 'Juanda',
    design: 'Paola',
}

//como transformar un objeto a una matriz

const entries = Object.entries(data);
console.log(entries);
console.log(entries.length);

const data = {
    frontend: 'Fran',
    backend: 'Juanda',
    design: 'Paola',
}

//convertimos un objeto en un arreglo solo con los datos
const values = Object.values(data);
console.log(values);
console.log(values.length);

//añade a una cadena de caracteres otra en el inicio de la misma
const string = 'hello';
//añade a una cadena de caracteres otra en el inicio de la misma
console.log(string.padStart(7, 'hi'));
//añade a una cadena de caracteres otra al final de la misma de la misma
console.log(string.padEnd(12, '----'));
console.log('food'.padEnd(12, '  ----'));

const obj = {
    name: 'Fran',
}

por si alguien le gusta el tema de VS que el profesor esta utilizando es SynthWave '84

luego presionan shift+ctr+p y escriban “enable neon dreams”

Vale, en ES8 se añadió Object.entries, padStart, padEnd y trailings comas, siempre pensé que ya eran nativas de JavaScript D:

Esta caracteristicas es de ES5 pero no olvidemos que tambien existe
Object.keys() que te devuelve los nombres de las keys del objeto:

console.log(Object.keys(data));
>> [ 'frontend', 'backend', 'Design' ]

trailing commas 😃

No hay como un ejemplo de la vida real, que podamos aplicar con código!

padstart y padend es similar al strpad de php o right , left en bases de datos oracle, digamos que por ejemplo para colocar ceros (0) a la derecha en numeros.

Les comparto mis apuntes compañeros.

En esta sección se habló del uso de “Trailing commas”. Pero no aclaró si eran parte de las novedades de ES8 o ya existían. Así que me puse a verificar y encontré que las “trailing commas” se pueden usar en Arrays, Objetos y Funciones.

La novedad en ES8 es su uso en funciones. A continuación un ejemplo de cada una. (Ref. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Trailing_commas

// Arrays
let miArray = [1, 2, 3, ];

// Objetos
let miObjeto = {
    nombre: "Auerliano",
    apellido: "Buendia",
}

// Funciones
function foo(bar,) {console.log(bar)};
foo("hola",);

Estoy impresionado y lo sigo estando con tantos implementos útiles que nos ha aportado EcmaScript con el fin de facilitar nuestro progreso en JavaScript 😦

" Desde los inicios de JavaScript las trailing commas se han podido utilizar para arreglos y objetos, pero desde ES8, se pueden utilizar al definir parámetros o al llamar funciones."

// both are the same:
function f(a,b) {}
function f(a,b,) {}
// both are the same:
f(1,2);
f(1,2,);

Learn where you can and can’t use trailing commas in JavaScript

Ahorra mucho codigo estas actualizaciones De ES8

Definitivamente cada año hay que estar actualizándose para entender las novedades lanzadas por Ecmascript

Muy buenoas aportes, el padSart no se aun donde usarlo jajaj, ya llegara la necesidad cuando mejore mi programación.

Object.entries(): devuelve una matriz de pares propios de una propiedad enumerable [key, value] de un objeto dado.

Object.values(): devuelve un array con los valores correspondientes a las propiedades enumerables de un objeto.

padStart(): rellena la cadena actual con una cadena dada, el relleno es aplicado desde el inicio (izquierda).

padEnd(): rellena la cadena actual con una cadena dada, el relleno se aplica desde el final

es8 junio 2017 fue lanzada

Me demore enteder padStart y padEnd, pero ya esta claro el primero coloca los caracteres an inicio y el segundo al final.

3 años de desarrollo y evolución de JavaScript resumidos en menos de 30 minutos.

Bastante informativa esta clase

NO entiendo mucho que diferencia hay entre concatenar y esto… Lo que comenta oscar esta claro esta en la documentacion tambien… pero no hay como un aporte real a esto y concatenar

les comparto este ejercicio, que vi cuando es intenta recuperar una contraseña de alguna cuenta, te dicen en algunos servidores:

Enviaremos un email a este correo:

entonces, preparé estos scripts:

const email = '[email protected]_organizacion.mi_dominio';
const firtsLetterEmail = email.substr(0,1); 
//primera letra del correo = 'm'

const arroba_at = email.indexOf('@');       
//ubicación de la posición del @

const dominio = email.substr(arroba_at);    
//Determinación del dominio de correo: en este caso = "@mi_organizacion.mi_dominio"

const nombreUsuario = email.slice(0,arroba_at);
// Hasta antes del @: mi_usuario

const lastEmailLetter = nombreUsuario.slice(-1); 
// última letra del nombre de usuario: o

//salida final
console.log(firtsLetterEmail.padEnd(nombreUsuario.length-1,'*')+lastEmailLetter +dominio);

Saludos, Dios los bendiga

/* object.entries() you can give back keys and values from an Array */

const data = {
    frontend: 'Kevin',
    backend: 'Alan',
    design: 'David'
}

const entries = Object.entries(data)
console.log(entries)
console.log(entries.length)

/* object.values() you can give back values from an object to an arregement*/

const data2 = {
    frontend: 'Kevin',
    backend: 'Alan',
    design: 'David'
}

const values = Object.values(data2)
console.log(values)
console.log(values.length)

/* paddign */

const string = 'hello'
// you can push more letters in a string in the beginning with padStart(maxOfcaracters, 'letters_or_sentence for add')
console.log(string.padStart(8, 'hi '))
// The same but in the end with padEnd(maxOfcaracters, 'letters_or_sentence for add')
console.log(string.padEnd(10, '------'))

console.log('food'.padEnd(12, '------'))

Si utilizan:

console.table(tuArray)

Les saldrá en la consola de esta manera:

https://www.youtube.com/watch?v=cX9X59G5njE Les dejo un video donde muestran otros casos en los que se puede utilizar el padding en javascript

Las primeras características son el uso de Object.entries() & Object.values(). Cada transforma lo que hay en un objeto a una matriz, que si tiene algo dentro, son más matrices de la transformación de los elementos del objeto. Se puede hacer uso de las funciones que permiten las matrices.

const data = {
  frontend: 'Andrés',
  backend: 'Miguel',
  design: 'Marcela'
}

/***Obj to Mtx */
const entries = Object.entries(data)
console.log('entries: \n', entries)
console.log('entries.lenght: \n', entries)

const values = Object.values(data)
console.log('values: \n', values)
console.log('values.length: \n', values)

La siguiente característica es el poder rellenar cadenas de texto con más cadenas de texto. Útil cuando es necesario agregar texto dentro de otro por algún evento o acción del usuario.
Usa padStart & pad End para agregar al inico o al fin, respectivamente

• La clave está en comprender que el texto resultante tiene una longitud y se debe definir. Ese es el número que se pasa

/***padStart & padEnd*/

const string = 'agrego'
console.log(string.padStart(17, 'aca'))  //R: acaacaacaacagrego
console.log('food'.padEnd(7, 'aca'))     //R: foodaca
console.log('cadena'.padStart(12, '*.-'))     //R: *.-*.-cadena
console.log('_texto'.padEnd(11, '///-'))     //R: _texto///-/

¿Qué se implementó en ES8?

1. Convertir un objeto de elementos a una matriz

/* Convertir un objeto de elementos a una matriz */
const data = {
  frontend: 'santiago',
  backend: 'isabel',
  design: 'ana'
}

const entries = Object.entries(data)
console.log(entries)
console.log(entries.length)

1. Object Values: Obtener los valores de un objeto y ponerlos en un array

/* Object Values: Obtener los valores de un objeto y ponerlos en un array */

const data = {
  frontend: 'santiago',
  backend: 'isabel',
  design: 'ana'
}

const values = Object.values(data)
console.log(values)
console.log(values.length)

1. Modificación de strings

/* Modificación de strings */

const string = 'hello'
console.log(string.padStart(7, 'hi'))
console.log(string.padEnd(12, 'hi'))

1. Trailing Commas

/* Trailing commas */
const obj = {
  name: 'santiago',
}

En un Objeto o Array, las comas permiten agregar un nuevo valor aunque este vacío, es ayuda a evitar problemas que puede ocacionar no poner las comas.

Esta versión de JS salio el 17 de junio del 2017 el cual incorporo nuevas caracteristicas como;

• Asyn Await.
• Object entries.
• Object Values.
• Padding.
• Trailing-Comas.

Object entries

Con esto podemos imprimir el objeto en forma de matriz “[ ‘variable’, ‘resultado’ ]” y saber el numero de elementos que contiene dicho objeto.

//Object entries 
const data = { 
    frontend: 'Oocar', 
    backend: 'Isabel', 
    design: 'Ana', 
} 
const entries = Object.entries(data); 
console.log(entries); 

//Imrime el numero de elementos 
console.log(entries.length);

> 
  [ 'frontend', 'Oocar' ], 
  [ 'backend', 'Isabel' ], 
  [ 'design', 'Ana' ]

> 3

Object values

Esta función nos permite imprimir los valores del objeto de manera de lista “[‘dato’, ‘dato’, ‘dato’]”.De igual forma podemos traer a length para saber el numero de elementos del arreglo

//Object values 
const data = { 
    frontend: 'Oocar', 
    backend: 'Isabel', 
    design: 'Ana', 
} 
const values = Object.values(data); 
console.log(values);

> [ 'Oocar', 'Isabel', 'Ana' ]

Padding

Esto lo que hace es añadir caracteres a un string ya sea al final o al inicio de este string. Nos puede servir del lado del frontend.

const string = 'Hello';
console.log(string.padStart(10, '-'));
console.log(string.padEnd(10, ' guys'));

> -----Hello
> Hello guys

Esto nos demuestra que no importa que no importa que el string sea un cost ya que no modifica el dato y que el nuevo string que ingresemos se puede replicar hasta que llenemos el espacio que le indicamos como en ejemplo de “.padStart”.

Trailing-Comas

Esto nos ayuda para a poner comas al final de nuestros objetos y ya no nos dará error como en el siguiente ejemplo.

const data = { 
 
    design: 'Ana', 
}

En el ejemplo dejamos esa coma indicando que posiblemente en el futuro se le va a ingresar un error pero no afecta a la hora de compilar nuestro código.

for (const [key, value] of arr) {
  console.log(`${key} -> ${value}`);
}

Me gusto mucho lo de colocar una coma al final en el objeto

Respecto al padding, yo sugiero utilizar la propiedad length de los strings y no utilizar magic numbers.
Se puede llegar a jugar bastante con esta nueva característica de ECMAScript 8 jejeje, por ejemplo:

const name = 'Brayan';
const lastname = 'Mejía Salazar';
const complete_name = name.padEnd((name.length + lastname.length + 1), ` ${lastname}`);
console.log(complete_name);

Básicamente lo que tenemos son dos constantes, name y lastname, y, a partir de estas, creamos una última utilizando la función padEnd sobre name y pasándole la longitud tanto de name como de lastname a la misma. Y, por último, lo que ya se vio hace algunos vídeos, string templates.

//Object.entries
const data = {
    frontEnd : "Axel",
    backEnd : "Victor",
    desing : "Gabriel"
}
//Devuelve una matriz (Array) de forma ordenada
const valores = Object.entries(data);
console.log(valores);
console.log(valores.length)


//Object.values
const dataDos = {
    frontEnd : "Axel",
    backEnd : "Victor",
    desing : "Gabriel"
}
//Devuelve los valores en arrays
const values = Object.values(dataDos);
console.log(values);
console.log(values.length);


//padStart --- sirve para agregar texto a un string
let nombre = "Victor";
console.log(nombre.padStart(9, "dfg")); //Aumenta la longitud del texto y despues agrega esos valores al principio

console.log(nombre.padEnd(9, "---")); //Lo mismo que el otro solo que este lo agrega al final

const data = {
  frontend: 'Victor',
  backend: 'Israel',
  design: 'Ana',
};

const entries = Object.entries(data);
console.log(entries);
console.log(entries.length);

const values = Object.values(data);
console.log(values);
console.log(values.length);

/*
| padStart() and padEnd() method
*/
const folio = '8';
const name = 'Victor';
console.log(folio.padStart(8, '0'));
console.log(name.padStart(15, ' *')); 

Que se implemento en ES8

// permitir devolver el valor de una matriz
const data = {
    fronted : 'Alejandro',
    backend : 'Sofia',
    design : 'Stefy',
}

//trasnformar estos objetos en una matriz
const entries = Object.entries(data);
console.log(entries); 

//permitir saber cuantos elementso hay
console.log(entries.length);

//OBJECT VALUES

const data = {
    fronted : 'Alejandro',
    backend : 'Sofia',
    design : 'Stefy',
} // trailing commas establece que puede existir un valor despues del final como que no

const values = Object.values(data);
console.log(values); //[ 'Alejandro', 'Sofia', 'Stefy' ]
console.log(values.length); //3



// PADSTART

const string = 'my fr'; 
console.log (string.padStart(7, 'hi ')); 
console.log(string.padEnd(12, '------------'));

ES8
Método entries

const data = {
   frontEnd = 'Alberto',
   backEnd = 'Ana'
}
const entries = Object.entries(data)
console.log(entries)
//Nos devuelve:
[
   ['frontEnd', 'Alberto'],
   ['backEnd', 'Ana']
]

En suma, el objeto nos lo devuelve como un arreglo,
y sus atributos dentro un arreglo cada uno, es decir, un arreglo de arreglos.
Con este método tenemos acceso al método length que
nos devuelve el número de elementos que tiene un arreglo.

Trailing-Comas jajajaja siempre lo use y nunca sabia porque no saltaba error. Sumamente interesante!!!

Clase muy util, he aprendido mucho hasta el momento

El método Object.entries() devuelve una matriz de pares propios de una propiedad enumerable [key, value] de un objeto dado.

Sintaxis

Object.entries(obj)

By: https://mzl.la/2SiXaZ9

Cosas que no sabia que existian, me gusto aprender esas cosas. 😃

Mis apuntes:
https://nasal-zoo-be9.notion.site/Qu-se-implement-en-ES8-c04465ec6d1c4237a9ffd924e68ac002

Lo bueno del padStart y End es que tambien deja agregar numeros 😛

const string= "Hello";
console.log(string.padEnd(8,4256)) //Resultado: Hello425

// Caracteristica Object
// OBJECT ENTRIES
const data = {
    frontend: 'Joao',
    backend: 'Isabel',
    design: 'Jose',
}

const entries = Object.entries(data);
console.log(entries);
console.log(entries.length);
// ==========================================================


// OBJECT VALUES
const persona = {
    nombre: 'Jose',
    apellido: 'Morelos',
    telefono: 16678225,
    estado: 'Jonalapa',
    ciudad: 'Maninita',
}

// como hacemos la transformacion
const value = Object.values(persona);
console.log(value);
console.log(value.length);

// Devuelve un arreglo

// ==========================================================


// PADDING
const string = 'hello';

console.log(string.padStart(7, 'hi'));
console.log(string.padEnd(12, ' ----------'));

console.log('food'.padEnd(12, ' ----------'));
// ==========================================================

// TRAILING-COMAS
const obj = {
    name: 'Joao',
}

//Trailing comas, nos permite asignar elementos al objeto mediante comas.
const data= {
    front:'Alej', // Puede existir
    back: 'Rel'
}

//Trailing comas, nos permite asignar elementos al objeto mediante comas.
const data= {
front:‘Alej’, // Puede existir
back: ‘Rel’
}

Padding
Se usa para rellenar un string con otro string
primer parámetro : es la longitud que tendrá el string original una vez rellenado.
segundo parámetro: corresponde al string que rellenara al string original.

const string='hello';
console.log(string.padStart(7,'hi')) //add al inicio
console.log(string.padEnd(12,'-'))  //add al final

// ==========ECMAScript 8============
 const data ={
     frontend: "Santiago",
     backend: "Ricardo",
     design: "Jaime",
 }
// Objects .entries nos permite  reccorrer cada elemento del objeto y volverlo un array 
 const array = Object.entries(data);
 console.log(array);
 // Ahora si lo qie se quiere es tener un array con solo los valores de 
 //cada atributo del objeto usamos el metodo .value
const data ={
    frontend: "Santiago",
    backend: "Ricardo",
    design: "Jaime",
}

const array2 = Object.values(data);
console.log(array2);
// ====== .padStart y .padEnd=======
// para agregar caracteres a un string al incio o al final podemos usar estos nuevos metodos usados en 
// la verdion ecma8 

const string = "hola";
console.log(string.padStart(8," 🙂"));

// podemos hacer lo mismoal final del string con el metodo .padEnd

const string = "Nunca pares de";
console.log(string.padEnd(23," aprender"));
//Podría servir del lado del front , para mostrar una estructura de elementos.

TRANSFORMA OBJETO EN ARRAY. EN TODOS LOS CURSOS LO VIMOS COMO ARRAY.
ES LO QUE HACÍA EL PIBITO EN EL CURSO PRÁCTICO QUE DIO POR VISTO ESTO… ACÁ LO EXPLICAN.

// ecmaScript 8

// Object.entries()
// Este metodo estatico del super prototipo object nos permite devolver las llaves y valores de las propiedades de un objeto en un array =>
// [["key",value],["key",value],["key",value]]

const luis = {
    name : "luis",
    age: 19,
    country : "ARG"
};

const luisArray = Object.entries(luis);

console.log(luisArray);
// luisArray = [ [ 'name', 'luis' ], [ 'age', 19 ], [ 'country', 'ARG' ] ]


// Object.values():
// // Este metodo estatico del super prototipo object retorna un array con los valores de las propiedades del objeto que le pasemos como parametro =>
// [value,value,value];

const oscar = {
    name : "Oscar Barajas Tavares",
    age : 35,
    country: "COL"
};

const oscarValues = Object.values(oscar);

console.log(oscarValues);
//  [ 'Oscar Barajas Tavares', 35, 'COL' ]


// Padding:
//  nos permite añadir cadenas vacías a string, pudiendo modificar la cadena string como tal.
//Podría servir del lado del front , para mostrar una estructura de elementos.

const string ='hello';
console.log(string.padStart(7,'hi '));
console.log(string.padEnd(12,'hi'));

// ES8 Object.entries
const names = { foo: true, bar: false }
Object.entries(names) // [[foo, true], [bar, false]]

// ES8 Object.values
const names = { foo: true, bar: false }
Object.values(name) // [true, false]

// ES8 padding
'bar'.padStart(7, 'foo ') // foo bar
'foo'.padStart(7, ' bar') // foo bar

Me doy cuenta que si vienes de Python, aprender JS es muy sencillo, y estoy seguro que es verdad viceversa.
Todos estas funciones y métodos son supersimilares a como funciona en python los dict.items(), dict.values(), dict.keys().
Y los paddings que se ven aquí, existen igual como métodos de strings.

This is my practice:

https://github.com/eliabjselvacruz/practice/commit/ac5e3b69236550a4169197cdd74938b3d9c27314

Notemos que al usar .padStart o .padEnd lo que hace la función es repetir el segundo parámetro entregado (normalmente un string) tantas veces sea necesario hasta que el string resultante tenga el largo indicado por el número del primero parámetro.
De esta forma, si el string original a trabajar tiene un largo mayor al número que le dimos como argumento a .padStart o .padEnd, la función no hará nada.

# Caso largo justo
let money = "200"
console.log(money.padEnd(4, "$"));
-> "200$"

# Caso largo menor
let money = "200"
console.log(money.padEnd(2, "$"));
-> "200"

# Caso largo mayor
let money = "200"
console.log(money.padEnd(10, "$"));
-> "200$$$$$$$"

aplicando Object:
entries: devuelve las keys y los valores
values: devuelve los valores
keys: devuelve las keys

gracias por sus comentarios compañeros, son enriquecedores, aquí una compilación de ellos

Dato curioso, puedes usar padding end para autocompletar emails, de tal forma que:

const email = "My_email";
const email_lenght = email.length;

console.log(email.padEnd(email_lenght + 10, "@gmail.com"));

Una utilidad para padStart y padEnd es el de ordenar, por ejemplo:

const stringIn = 'Hello';
console.log(stringIn.padEnd(12, ' ')+ 'Carlos');
console.log('food'.padEnd(12, ' ') + 'Maria');

Hice un ejemplo de menú con la función padding para que vean su utilidad

let frutas = ['Manzana', 'Banana', 'Kiwi', 'Fresas', 'Papa', 'Arracacha'];
number = 1;

frutas.forEach(element => { 
    console.log(element.padEnd(20, '-----') + number);
    number ++;
});

//RESULTADO
// Manzana-------------1
// Banana--------------2
// Kiwi----------------3
// Fresas--------------4
// Papa----------------5
// Arracacha-----------6

//uniendo caracteres string
    function unirStrings(stg1,stg2) {
    return stg2.padStart(stg2.length+stg1.length,stg1)
    }

Resumen de la clase

//Para devolver clave valor de una matriz

const data = {
    frontend: 'oscar',
    backend: 'Isabel',
    design: 'Ana',
}

// Object.entries('diccionario')
const entrada = Object.entries(data);
console.log(entrada)
//se puede usar lenght con el objeto al que se le hace entries
console.log(entrada.length)


const data2 = {
    frontend: 'Oscar',
    backend: 'Isa',
    design: 'Anita',
}
// Si se desea solamente obtener el valor y no todo el diccionario
const valores = Object.values(data2);
console.log(valores)
// asi mismo, puede utilizarse length
console.log(valores.length)


//Padding
const string = 'hello'
//Se coloca primero el maxlength para definir cuantos caracteres va a tener el string y los caracteres a agragar al principio de la palabra
console.log(string.padStart(7,'hi'))
//sucede lo mismo pero agragando los caracteres al final de la palabra
console.log(string.padEnd(12,'_____'))
// Tambien se puede hacer lo anterior si necesidad de tener una variable definida previamente
console.log('food'.padEnd(12,'_____'))

//Object entries deveule los valores de una matriz.

const data ={
    front:'Alej',
    back: 'Rel'
};

//Tranformar este objeto en una matriz. 
const entries = Object.entries(data);
console.log(entries); 

/* devuelve
[
    [ 'front', 'Alej' ],
    [ 'back', 'Rel' ]
]
*/


//el metodo length nos permite saber cuantos elementos posee un array
console.log(entries.length); // 2



//Objetc Values: Me devuelve los valores de un objeto a un arreglo. 

const data= {
    front:'Alej',
    back: 'Rel'
}

const values = Object.values(data);
console.log(values); // [ 'Alej', 'Rel']

// Padding:
// el primer parametro es para asignar el numero de caracteres maximos de string, el segundo la cadena que se desea agregar

const string ='hello';
console.log(string.padStart(7,'hi')) // hihello
console.log(string.padEnd(10,'hi')) // hellohihih


//Trailing comas, nos permite asignar elementos al objeto mediante comas.
const data= {
    front:'Alej', 
    back: 'Rel', // puede haber una nueva propiedad como no
}
```javascript

RESUMEN DE LA CLASE:

¿Qué tema de vsCode está usando el profe Oscar?

• Object.entries es una función que nos devuelve un objeto pero en forma de array (esto entendí).
• Object.values, nos devuelve únicamente los valores de nuestros objetos ignorando la asignación del mismo.
• var.padStart(nueva_longitud, string_agregado)
  ponemos un máximo de strings y luego el que agregaremos al principio.

const string = "string"
console.log(string.padStart(9, "hi ")) // hi string

• var.padEnd(nueva_longitud, string_agregado)
  ponemos un máximo de strings y luego el que agregaremos al Final

//Se incorporaron caracteristicas muy interesantes

const data = {
    frontend: 'oscar',
    backend: 'Isabel',
    design: 'Ana'
}

// Asi puedes pasar este objetos a un array en donde se crea un array general y dentro de el se crean otros arrays los cuales cada uno va a contener en la posicion 0 la key y en la posicion 1 el valor de dicha key, la longitud del arreglo en general dependera de la cantidad de elementos del objeto que pasamos por Object.entries();

const entries = Object.entries(data);
console.log(entries);

//Asi puedes ver la cantidad de elementos de tu objeto
console.log(entries.length);

// De esta forma puedes crear un arreglo el cual va a contener dentro de el todos los valores de todos los elementos del objeto que pases por Object.Values();
const data = {
    frontend: 'oscar',
    backend: 'Isabel',
    design: 'Ana',
}

const values = Object.values(data);
console.log(values);
// de igual manera asi puedes ver cuantos elementos tiene tu arreglo
console.log(values.length);

//EL padding sirve para transformar un string

const string = 'hello';
//EL primer parametro hace referencia a la cantidad de caracteres maxima que tendra el string a mostrar, en el segundo parametro se pasan los strings a agregar.

//con Start pones los caracteres al inicio del string
console.log(string.padStart(7, 'hi'));
//con End pones los caracteres al final del string
console.log(string.padEnd(12, '1234567'));


//Trailing-Comas se recomienda finalizar el ultimo elemnto de un objeto con una coma la cual refiere de que el objeto se puede tener un elemento siguiente o no

Entre la clase, las preguntas de los compañeros que casi siempre son las nuestras y quienes responden; uno va complementando todos estos nuevos conocimientos

// asi se transforma un arreglo de objetos a puros arreglos;
const data = [
{
frontend: ‘Oscar’,
backend: ‘Isabel’,
design: ‘Ana’
},
{
frontend: ‘Mauricio’,
backend: ‘Carlos’,
design: ‘Jose’
}
]

const entries = Object.entries(data[1]);
// se puede utlizar keys para obtener la llave osea el atributo
// se puede utilizar values para obtener el valor del atributo
console.log(entries);

if (entries[1]) {
console.log(‘Te encontre’);
} else {
console.log(‘No te veo’);
}

Me gusta utilizar // para apuntes del codigo y sea facil de entender.

// Objects values me devuelve valores de objecto a un arreglo
const data1 = {
  frontend: 'Juan',
  backend: 'Carlos',
  desing: 'Alejandra',
};

const values = Object.values(data1);
console.log(values);
console.log(values.length);

// String.padStart add caracteres al string hello
const string = 'Hello';
console.log(string.padStart(7, 'hi'));
console.log(string.padEnd(12, 'Developer'));
console.log('Food'.padEnd(12, ' ----- '));

También se agrego el método Object.getOwnPropertyDescriptors(data) - Devuelve un objeto que contiene todos los descriptores de propiedad propios de un objeto.

Trailing commas

padStart / padEnd

elemento esencial para conocer la cantidad de elementos que tiene un objeto - length

Genial

Un poco confuso el curso, pero ahí vamos

const data = {
    frontend: 'Iván',
    backend: 'Jorge',
    design: 'Luis',
}

const values = Object.values(data);
console.log(values)

Esta característica del ES8 nos permite devolver la clave y valores de un objeto en forma de matríz.

comparto mis codigo de la clase:

//********************************************************
//************* OBJECT.Entries
//********************************************************
// Permite devolver la clave y valores de una matriz

const data = {
    frontend: 'oscar',
    backend: 'isabel',
    design: 'ana'
}
const entries = Object.entries(data); //objeto se devuelve en matriz
console.log(entries);
console.log(entries.length);

//********************************************************
//************* OBJECT.values
//********************************************************
// Devuelve los valores de una objeto a un arreglo

const data = {
    frontend: 'oscar',
    backend: 'isabel',
    design: 'ana'
}
const values = Object.values(data);
console.log(values);
console.log(values.length);

//********************************************************
//************* padStart  & padEnd
//********************************************************
const string = 'hello';
console.log(string.padStart(7,'hi'));
console.log(string.padEnd(12,'---'));

Excelente!

recien en 2008??

En Archivos y enlaces solo se encuentra el Readme.md