JavaScript Fundamentos - Tipos Objetos

Nesse post vamos conhecer um pouco sobre o tipo objeto da linguagem, sendo esse mais um fundamento importante para fortalecer nossa base em JavaScript.

Os Tipos Objetos são valores que representam uma referência em memória que pode ser alterada, os principais objetos globais utilizados são: Object | Regex |Function | Arrays | Math | Date entre outros.

Em JS tudo é objetos, mesmo os tipos primitivos se comportam como objetos quando precisamos utilizar métodos para sua manipulação.

typeof function sum(a, b) {
  return a + b;
}; // => 'function'
typeof { name: "Linus Torvald" }; // => 'object'
typeof [1, 2, 3, 4, 5]; // => 'object'
typeof /[a-zA-Z_$]/; // => 'object'
typeof new Date(); // => 'object'

• Vamos conhecer os principais tipos de objetos e algumas das API's fornecidas.

Objetos

Um objeto é uma coleção dinâmica de propriedades definidas por chaves, que podem ser do tipo string ou symbol, e valores que podem ser de qualquer tipo de dados.

É possível criar objetos de várias formas : pela notação literal, por meio de uma função construtura ou do método create da Object API

{} // literal
new Object(); // Construtora
Object.create(null); // API

• Atribuindo um objeto a uma constante.

const book = {
  title: "Clean Code",
  author: "Robert C Martin",
  pages: 464,
  language: "English",
  available: true,
};

• Shorthand notation, quando o nome de uma variável é utilizado com o mesmo nome da chave, utiliza se apenas o nome da variável.

const book = { title, author, pages, language, available };

• É possível computar chaves em tempo de execução.

const key1 = "title";
book[key1] = "other title";

• Na criação de chaves com nomes composto é necessário utilizar aspas.

const person = {
  //name-sobrenome: "Jorge Nascimento",  -> gera erro na chave
  "nome-sobrenome": "Jorge Nascimento",
};

• Além do notação literal , é possível atribuir propriedades aos objetos por meio da usa referência.

const car = {};
car.marca = "Ferrari";
car.ano = "2020";
car.modelo = "Spider";

• Propriedades consultadas por meio de sua referência.

car.modelo; // => "Spider"

• É possível consultar uma determinada chave por meio do operador in.

"modelo" in car; // => true

• As propriedades de um objeto podem ser apagadas por meio do operador delete;

delete car.ano;

• Iterando objeto com o for in

for (let key in car) {
  console.log(car[key]); // iterando sobre as chaves do objeto
}

• Criando um cópia do objeto car.

const car2 = {};

for (let key in car) {
  car2[key] = car[key];
}

• A comparação dos objetos é feita por meio de sua referência , assim, ainda que dois objetos tenham exatamente as mesmas propriedades eles serão considerados diferentes.

const book = {
  title: "JavaScript",
  author: "Nascimento",
};

const book2 = {
  title: "JavaScript",
  author: "Nascimento",
};

book === book2; // => false

• Um das formas para comparar os objetos é analisando cada uma das propriedades por meio da comparação das chaves e valores.

let equal = true;

for (let key in book) {
  if (book[key] !== book2[key]) equal = false;
}

for (let key in book2) {
  if (book[key] !== book2[key]) equal = false;
}

Para garantir que um objeto é igual ao outro é necessário verificar seus protótipos.

• Herança - O principal objetivo de herança é permitir o reuso de código por meio do compartilhamento de propriedades entre objetos, evitando duplicação.

• • Na linguagem Javascript a herança é realizada entre objetos e não classes.
• • A propriedade proto é uma referência para o prototipo do objeto.

const functionalLanguage = {
  paradigm: "Functional",
};

const scheme = {
  name: "Scheme",
  year: 1975,
  // paradigm: "Functional" ,    - propriedade que se repete.
  __proto__: functionalLanguage,
};

const javascript = {
  name: "Javascript",
  year: 1995,
  // paradigm: "Functional"
  __proto__: functionalLanguage,
};

javascript.paradigm; // => Functional

• Quando a propriedade não é encontrada no objeto atual esse sera buscada na sua cadeia de protótipos, chegando até object que tem proto null.

O método hasOwnProperty pode ser utilizado para determinar se uma propriedade pertence ao objeto.

for (let key in scheme) {
  console.log(key, scheme.hasOwnProperty(key));
}

• Os métodos Object.setPrototypeOf e Object.getPrototypeOf permite setar ou retornar prototipo de um objeto.

// seta prototipo através da API do Object
Object.setPrototypeOf(objeto, prototipo);

// Retorna o seu prototipo
Object.getPrototypeOf(objeto);

• Com o método Object.create é possível criar um objeto passando seu protótipo como parâmetro.

const scheme = Object.create(functionalLanguage);
scheme.name = "Scheme";
scheme.year = 1975;

Sem prototipo o objeto perde algumas operações importantes ( método como hasOwnProperty)

• Vamos conhecer os métodos da Object API.
• - O método Object.assign faz a cópia das propriedades dos objetos passados por parâmetro para o objeto alvo, que é retornado.

const javascript = Object.create({});

Object.assign(
  javascript,
  {
    name: "JavaScript",
    year: 1995,
    paradigm: "OO and Functional",
  },
  {
    author: "Brendan Eich",
    influenceBy: "Java, Scheme and Self",
  }
);

• - O método Object.keys retorna um array com as chaves do objeto informado.

Object.keys(javascript); // ==> [ 'name', 'year', 'paradigm', 'author', 'influenceBy' ]

• - O método Object.value retorna um array os valores das propriedades.

Object.values(javascript); // => [ 'JavaScript', 1995,'OO and Functional', 'Brendan Eich','Java, Scheme and Self' ]

• - O método Object.entries retorna um array de arrays onde cada posição do array retornado possui o par chave e valor do objeto passado.

Object.entries(javascript); // ==> [ [ 'name', 'JavaScript' ], [ 'year', 1995 ],  [ 'paradigm', 'OO and Functional' ],[ 'author', 'Brendan Eich' ],[ 'influenceBy', 'Java, Scheme and Self' ] ]

• - O método Object.is compara dois objetos, considerando os tipos de dados, de forma similar ao operador === ( comparação de referência )

Object.is(javascript, javascript); // ==> true

• - O método Object.defineProperty define uma nova propriedade diretamente em um objeto, ou modifica uma propriedade já existente em um objeto, e retorna o objeto.

Na definição dessa propriedade essa pode ter configurações conforme abaixo:

configurable - Permite que uma determinada propriedade seja apagada.

enumerable - permite que uma determinada propriedade seja enumerada ( exibida ).

value - Define o valor de uma determinada propriedade.

writable - Permite que uma determinada propriedade tenha seu valor modificado

const JavaScript = {};

Object.defineProperty(JavaScript, "name", {
  value: "JavaScript",
  enumerable: true,
  writable: true,
  configurable: true,
});

Caso apenas o value seja especificada as demais são consideradas falsa (enumerable | writable | configurable)

• - O método Object.preventExtensions impede que o objeto tenha novas propriedades, mas permite modificar ou remover as propriedades existentes.

Object.preventExtensions(JavaScript);
Object.isExtensible(JavaScript); // => false

• - O método Object.seal impede que o objeto tenha novas propriedades ou apague propriedades existentes, mas permite modificar propriedades existentes.

Object.seal(JavaScript);
Object.isSealed(JavaScript); // => true

• - O método Object.freeze impede que o objeto tenha novas propriedades apague ou modifique propriedades existentes.

Object.freeze(JavaScript);
Object.isFrozen(JavaScript); // => true

RegExp

As expressões regulares são estruturas formadas por uma sequência de caracteres que especificam um padrão formal que servem para validar, extrair ou mesmo substituir caracteres dentro de um string.

let regExp = /john@gmail.com/ || new RegExp(/john@gmail.com/);

• O método test verifica se a string passada por parâmetro possui o padrão da regexp, retornando um booleano.

let result = regExp.test("john@gmail.com"); // => true - padrão identificado

• O método exec possui um retorno com mais informações ele retorna um array com index onde foi encontrado o padrão e input analisado, grupos.

regExp.exec("john@gmail.com");

/*[ 'john@gmail.com',
  index: 0,
  input: 'john@gmail.com',
  groups: undefined ] */

Documentação: RegExp

Function

Uma função é um objeto que contém código executável. Assim como o programa em si, uma função é composta por uma sequência de instruções chamada corpo da função. Valores podem ser passados para uma função e ela vai retornar um valor.

Na linguagem JavaScript, as funções são de primeira classe, ou seja, podem ser atribuída a uma variável, passadas por parâmetro ou serem retornada de uma outra função.

• function declaration forma padrão de declara com a palavra reservado function.

function sum(a, b) {
  return a + b;
}

Na function declaration a mesma é içada para o inicio do contexto de execução sendo assim ela pode ser chamada antes de declarada.

• function expression declaração de função atribuída a uma variável.

const sum = function (a, b) {
  return a + b;
};

• Função que retorna outra função - para ter acesso a a função interna é necessário realizar uma dupla invocação calculator()()

const calculator = function (fn) {
  return function (a, b) {
    return fn(a, b);
  };
};

calculator(sum)(2, 2); // => 4

• Definindo valores padrão para o parâmetro, no caso desse parâmetro não for passado ele irá assumir o default.

const subtract = function (a = 0, b = 2) {
  return a - b;
};

subtract(5); // => 3

• arguments é uma variável implícita que é possível acessar os parâmetros da função invocada, essa retorna um objeto com índice e valor passado.

const argsFunction = function () {
  return arguments;
};

argsFunction(1, 2, 3, 4, 5); // => { '0': 1, '1': 2, '2': 3, '3': 4, '4': 5 }

• Também é possível acessar os parâmetros da função invocada por meio do rest paramenter, esse retorna um array com os parâmetros passados, deve ser usado como último da lista de parâmetros.

const restFunction = function (...numbers) {
  return numbers;
};
restFunction(1, 2, 3, 4, 5); // => [ 1, 2, 3, 4, 5 ]

• constructor functions ( Funções Construtoras ) servem como molde para a criação de objetos, essas precisam ser instanciadas pelo operador new. O this dentro delas se referencia ao objeto criado a partir delas.

New permite que crie objetos tanto das funções construtoras quanto das classes.

const Person = function (name, city, year) {
  this.name = name;
  this.city = city;
  this.year = year;
};

• Toda função tem uma propriedade chamada prototype, que é vinculada ao __proto__ do objeto criado pelo operador new.

Person.prototype.getAge = function () {
  return new Date().getFullYear() - this.year;
};

const newPerson = new Person("Bill Gates", "Seattle", 1955);

• factory function ( Funções Fábricas ) são semelhantes às funções construtoras / funções de classe, mas em vez de usar new para criar um objeto, as funções de fábrica simplesmente criam um objeto e o retorna.

// Reaproveitando propriedades em comuns.
const personPrototype = {
  getAge() {
    return new Date().getFullYear() - this.year;
  },
};

const createPerson = function (name, city, year) {
  const person = {
    name,
    city,
    year,
  };
  Object.setPrototypeOf(person, personPrototype);
  return person;
};

const createPerson = createPerson("Linus Torvalds", "Helsinki", 1965);

• Call e Apply - Essas funções são capaz de alterar o valor this. Por padrão, o primeiro parâmetro que recebe é o valor do this e o demais parâmetros são da função que invoca o método.

const circle = {
  radius: 10,
};

function calculateArea(fn) {
  return fn(Math.PI * Math.pow(this.radius, 2));
}

calculateArea.call(circle, Math.round); // => 315
calculateArea.apply(circle, [Math.ceil]); // => 315

A diferença entre call e apply é que no apply os parâmetros são passando como um array.

• Bind funciona de uma maneira diferente do call e do apply, ao invés de executar uma função, este retorna uma nova função. O seu primeiro parâmetro continua recebendo o valor que será atribuído ao this e os demais argumentos serão os parâmetros que definirão os valores atribuídos da primeira função.

const calculateAreaForCircle = calculateArea.bind(circle);
calculateAreaForCircle(Math.round); // => 315

Arrow Function

As Arrow Functions tem uma abordagem mais simples e direta para escrever uma função e podem melhorar a legibilidade do código em diversas situações.

• Com a arrow function retiramos a palavra function e apos os parêntese se utiliza o =>, podendo também retirar as chaves { } que nesse caso será realizado um retorno implícito sem o uso da palavra return .

const sum = (a, b) => a + b;
// {
//   return a + b;
// };

const subtract = (a, b) => a - b;
// {
//   return a - b;
// }

• Um exemplo com função que retorna outra função.

const calculate = (fn) => (a, b) => fn(a, b);
// (fn) =>{
//   return (a, b) =>{
//     return fn(a, b);
//   };
// };

calculate(sum)(2, 3); // ==> 5

Cuidado com a legibilidade do código.

A Arrow functions nos permite também abrir mão dos parênteses nos casos onde é utilizado apenas um parâmetro.

• Arrow functions não possuem as suas próprias variáveis this e arguments.

// this
const person = {
  name: "James Gosling",
  city: "Alberta",
  year: 1955,
  getAge: () => {
    return new Date().getFullYear - this.year; // => NaN
  },
};

// arguments
const sum = () => {
  let total = 0;

  for (let argument in arguments) {
    total += arguments[argument];
  }
  return total;
};

sum(2, 3, 4, 5); // error

Arrays

Um Array é um objeto similar a uma lista que armazena diferentes tipos de dados e oferece operações para acessar e manipular suas propriedades.

• Podemos criar um array através da função construtora ou iniciando com [ ]

const languages = new Array("Python", "C", "Java");
const languages = ["Python", "C", "Java"];

• É possível iniciar um array passando apenas um Number para a função construtora.

const numbers = new Array(10);
console.log(numbers); // => [ <10 empty items> ]

• A propriedade length indica a quantidade de elementos que existem dentro do array. Os elementos vazios sao considerados no length, caso o array tenha elementos com indices com espaços com elementos vazios esses são contabilizados no length)

console.log(numbers.length); // => 10

AccessorAPI

Os accessor methods quando invocados retornam informações especificas sobre o array.

• indexOf: Retorna a posição do primeiro elemento encontrado, caso não exista o elemento no array é retornado -1.

const languages = ["Python", "C", "Java"];
console.log(languages.indexOf("Python")); // => 0

• lastIndexOf: Retorna a posição do último elemento encontrado, caso tenha mais de um elemento igual no array.

console.log(languages.lastIndexOf("Python")); // => 0

• includes: Retorna true se o elemento existir no array.

console.log(languages.includes("JavaScript")); // => false

• concat: Retorna um novo array resultante da concatenação de um ou mais array.

Arrays não são alterados, apenas é retornado um novo array com a concatenação.

const veiculos = ["HB20", "Opalla", "Agile"];
const motocicletas = ["Honda CB", "Kawasaki Ninja"];

console.log(veiculos.concat(motocicletas)); // => [ 'HB20', 'Opalla', 'Agile', 'Honda CB', 'Kawasaki Ninja' ]

• slice: Retorna partes de um determinado array de acordo com a posição inicio e fim, posição fim é o valor -1, caso passe apenas o valor inicial irá retornar desse ponto até o final.

console.log(veiculos.slice(1, 3)); // => ['Opalla,'Agile']

• join: Converte o array para uma String, juntando os elementos com base em um separador.

const joinArray = veiculos.join("-");
console.log(joinArray); // => HB20-Opalla-Agile

MutatorAPI

Os mutator methods quando invocados modificam o array.

• push: Adiciona um elemento no final e retorna o novo length do array.

const languages = ["Python", "C", "Java"];

languages.push("C#");
console.log(languages); // ==> [ 'Python', 'C', 'Java', 'C#' ]

• pop: Remove um elemento do final e o retorna.

console.log(languages); // ==> [ 'Python', 'C', 'Java' ]

• unshift: Adiciona um elemento no inicio e retorna o novo length.

languages.unshift("JavaScript");
console.log(languages); // ==> [ 'JavaScript', 'Python', 'C', 'Java' ]

• shift: Remove um elemento no inicio e o retorna.

languages.shift();
console.log(languages); // ==> ["Python", "C", "Java"]

• splice: Remove, Substitui ou Adiciona um ou mais elementos em uma determinada posição e retorna um novo array com os elementos removidos.
• - splice(posição do elemento a ser removido, quantidade de elementos a serem removido a parti daquele ponto)

languages.splice(1, 1); // Remove C e retorna ["C"];
console.log(languages); // ==> [ 'Python', 'Java' ]

• Inserindo elementos com splice, quando não for remover no segundo parâmetro utiliza se 0.

languages.splice(1, 0, "C++", "C#"); // Partindo da posição 1 é inserido os elementos C++ e C#
console.log(languages); // ==> [ 'Python', 'C++', 'C#', 'Java' ]

• Removendo os 2 elementos inseridos e colocando novamente o C.

languages.splice(1, 2, "C"); // Retorna ["C++", C#]
console.log(languages); // ==> ["Python", "C", "Java"]

• sort: Ordena os elementos de acordo com a função de ordenação.

• • Sort recebe uma função com parâmetros a e b, sendo seu retorno a - b pra ordenação crescente, b - a inverte a ordem.

const languagesObj = [
  {
    name: "Python",
    year: 1991,
  },
  {
    name: "C",
    year: 1972,
  },
  {
    name: "Java",
    year: 1995,
  },
];

languagesObj.sort(function (a, b) {
  return a.year - b.year;

  // return (a.name <= b.name) ? -1 : 1; // Para ordenação por ordem alfabética
  // return a.name.localeCompare(b.name);
});

console.log(languagesObj);
/*[ { name: 'C', year: 1972 },
    { name: 'Python', year: 1991 },
    { name: 'Java', year: 1995 } ] */

• reverse: Inverte a ordem dos elementos.

languages.reverse();
console.log(languages); // => ["Java", "C", "Python"]

• fill: Preenche os elementos de acordo com a posição de inicio e fim.
• - fill(value, pos. inicial,pos. final) - preenche com o value o intervalo passado no parâmetro.

languages.fill("JavaScript", 0, 2);
console.log(languages); // ==> [ 'JavaScript', 'JavaScript', 'Python' ]

IterationAPI

Os iteration methods quando invocados iteram sobre os elementos do array.

• forEach: Executa a função passada por parâmetro para cada elemento.

const frameworks = ["VueJS", "NextJS", "AngularJS"];
frameworks.forEach((framework) => console.log(framework)); // ==> "VueJS", "NextJS", "AngularJS"

• filter: Retorna um novo array contendo somente os elementos que retornaram true na condição da função passada por parâmetro.

const frameworks = [
  {
    name: "AngularJS",
    contributors: 1548,
  },
  {
    name: "EmberJS",
    contributors: 746,
  },
  {
    name: "VueJS",
    contributors: 240,
  },
];

const resultFilter = frameworks.filter(
  (framework) => framework.contributors < 1000
);

console.log(resultFilter);
// =>
/* [ { name: 'EmberJS', contributors: 746 },
     { name: 'VueJS', contributors: 240 } ]  */

• find: Retorna o primeiro elemento que retornou true na condição da função passada por parâmetro.

const resultFind = frameworks.find((framework) => framework.name === "VueJS");

console.log(resultFind); // ==> { name: 'VueJS', contributors: 240 }

• some: Retorna true se um ou mais elementos retornaram true na condição da função passada por parâmetro.

const resultSome = frameworks.some(
  (framework) => framework.name === "AngularJS"
);

console.log(resultSome); // ==> true

• every: Retorna true se todos elementos retornaram true na condição da função passada por parâmetro.

const resultEvery = frameworks.every(
  (framework) => framework.contributors > 1000
);

console.log(resultEvery); // ==> false

• map: Retorna um novo array com base no retorno da função passada por parâmetro.

const resultMap = frameworks.map((framework) => framework.name);

console.log(resultMap); // ==> ["AngulaJS", "EmberJS", "VueJS"]

• reduce: Recebe uma função de callback que possui 2 parâmetros principais o acc ( accumulator ) e o currentItem ( item atual do array iterado), o segundo parâmetro é o tipo de dado que será retornado do reduce.

const resultReduce = frameworks.reduce(function (total, framework) {
  return total + framework.contributors;
}, 0);

console.log(resultReduce); // ==> 2534 ( soma do total de contribuidores )

Math API

Math é um objeto global que contém constantes matemática e métodos para realização de operações envolvendo números.

• Constantes Matemáticas

Math.E; // => 2.718281828459045
Math.LN10; // => 2.302585092994046
Math.LN2; // => 0.6931471805599453
Math.LOG10E; // => 1.4426950408889634
Math.PI; // => 3.141592653589793
Math.SQRT2; // => 1.4142135623730951
Math.SQRT1_2; // => 0.7071067811865476

• Operações de arredondamentos

• • abs - converte o sinal de um número para positivo

Math.abs(10); // =>10
Math.abs(-10); // => 10

• - ceil - Arredonda o número para cima.

Math.ceil(1.1); // => 2
Math.ceil(-1.1); // => -1

• - floor - Arrendonda o número para baixo.

Math.floor(9.9); // => 9
Math.floor(-9.9); // => 10

• - round - Arredonda o número para cima se a parte decimal for de 5 a 9 e para baixo se for de 0 a 4;

Math.round(4.5); // => 5
Math.round(-4.5); // => -4

• - sign - Retorna 1 se o número for positivo e -1 se for negativo.

Math.sign(5); // => 1
Math.sign(-5); // => -1

• - trunc - Elimine a parte decimal do número ,tornando-o um inteiro.

Math.trunc(2.3); // => 2
Math.trunc(-2.3); // => -2

• Operações aritméticas / Trigonometria

• • cbrt - Retorna a raiz cúbica do número.

Math.cbrt(8); // => 2

• - cos - Retorna o cosseno de um ângulo

Math.cos(Math.PI / 3); // => 0.5000000000000001

• - exp - Retorna ex, onde x é o argumento, e e é a Constante de Euler, a base dos logaritmos naturais

Math.exp(1); // => 2.718281828459045

• - hypot - Retorna a raiz quadrada dos quadrado dos números.

Math.hypot(3, 4); // => 5

• - log - Retorna o logaritmo do número em base natural.

Math.log(1); // => 0

• - pow - Retorna o número elevado a um determinado expoente.

Math.pow(2, 10); // => 1024

• - sin - Retorna o seno de um ângulo.

Math.sin(Math.PI / 2); // => 1

• - sqrt - Retorna a raiz quadrada do número.

Math.sqrt(4); // => 2

• - tan - Retorna a tangente de um ângulo.

Math.tan(Math.PI / 4); // => 0.9

• Mínimo, Máximo e Random.

• • min - Retorna o menor número passado por parâmentro.

Math.min(1, 2, 3, 4, 5, 6); // => 1

• - max - Retorna o maior número passado por parâmetro.

Math.max(1, 2, 3, 4, 5, 6); // => 6

• - random - Retorna um número randômico entre 0 e 1, não incluindo o 1;

Math.floor(Math.random() * 1000);

Por hoje é isso pessoal, conseguimos ter uma boa noção dos principais tipos objetos e como manipula-los, nos próximo posts iremos conhecer conceitos como closures e assíncronismo ( Promises ).

Obrigado por ler.

** Exemplos são baseado no curso JavaScript - MasterClass do Rodrigo Branas.

• Links de referências e saiba mais.
• - Objetos Globais

Me paga um ☕ ? | pix: nascimento.dev.io@gmail.com

_{Este post tem como objetivo ajudar quem esta começando no aprendizado das tecnologias web, além de servir como incentivo no meus estudos e a criar outros posts pra fixação do aprendizado.}

Me Sigam :)

Linkedin | Github