JavaScript



Aula 1 - Objetos


Alex Rios 
@alextrending
alex.rios1337@gmail.com



Tipos Simples

JavaScript possui tipos simples, são eles:
  • numbers
  • strings
  • booleans
  • null
  • undefined

Qualquer outro coisa em JS são...



Objetos!

Na verdade strings, numbers e booleans são parecidos com objetos por terem métodos, porém são imutaveis.


Em JS:


Arrays são objetos,
Funções são objetos,
Regexp são objetos,
Objetos  são objetos (sério ?!?).



O que é um Objeto?

Um container de propriedades, onde essa propriedade
tem um nome e um valor.



Nome da propriedade

Pode ser uma string ou até mesmo uma string vazia.



Valor DA PROPRIEDADE

Pode ter qualquer valor, a não ser undefined



UTILIDADE

Armazenamento e Organização dos dados.


Objetos podem 

conter objetos

Podendo facilmente representar uma árvore/gráfo de estruturas complexas.



Prototype Linkage

Permite que um objeto herde propriedades de outros objetos. O que reduz o tempo de inicialização e consumo de memória.



Literais

Chega de PT/BR para esses temas vamos usar os nomes certos para poder fazer buscas assertivas na internet.



Object Literals

Agora sim! (:



Object Literals

Uma notação conveniente (e muito) para criação de novos objetos.



Notação

Um par de chaves cercando zero ou mais pares de nome e valor.




Exemplo


var empty_object = {};
var person = {
           first_name: "Alex",
           last_name: "Rios"
           }



Property NAme

Pode ser uma qualquer string (até uma string vazia).



PAres

Usa-se virgulas para separar os pares.



Valor das Propriedades

O valor da propriedades pode ser obtido de qualquer expressão da linguagem, incluindo outro object literal.

Exemplo



var person = {
  first_name: "Alex",
  last_name: "Rios",
  house: {
    name: "Rua do Alex"
    number: 656
  }
}



REcuperando VAlores

Valores podem ser recuperados de um objeto usando a "notação ponto".



Exemplo


person.house.number // "656"



propriedades Inexistentes

Ao tentar recuperar uma propriedade inexistente, a execução retorna undefined



Valores DEFAULT

O operador || pode ser usado para preencher valores default.


Exemplo


var name = person.name || "Alex"


Type Error

Caso tente recuperar algum valor de undefined será lançado um exceção TypeError.


Exemplo


person.car //undefined
  person.car.color // Lança TypeError
Como evitar essa exceção? 
person.car && person.car.color //undefined


Atualizando Valores

A atualização de valores é feito via atribuição de valores
Se a propriedade já existir o valor será substituido.


Aumentando Objetos

Caso a propriedade a ser atualizada não exista, o objeto será aumentado.


Exemplo


person.status = "tired;


REferência

Objetos são passados sempre como referência.
Eles nunca são copiados.

Exemplo


var temp = person;
temp.name = 'Adriano';
var name = person.name;
//name terá o valor 'Adriano', 
//pois ambos referenciam ao mesmo objeto


Exemplo


var x = {}. y = {}, z = {};
//x, y e z referenciam a objetos diferentes.

x = y = z = {};
//referenciam ao mesmo objeto.


Prototype

Todos os objetos estão ligados ao prototype object do qual herdam suas propriedades.

Todo object literal criado está ligado a 
Object.prototype, um objeto que vem por padrão em JavaScript


Prototype

Quando um objeto é criado, você pode escolher quem será o seu prototype.
A forma como Javascript provê isso é extremamente confusa e bagunçada.



Mais Prototype?

Aguarde a aula sobre Funções! :)


Reflection


Existe um jeito fácil inspecionar um objeto para saber quais propriedades ele tem e seus tipos?


Typeof

Determinando o tipo de uma propriedade
typeof person.house.number //'number'
typeof person.name //'string'
typeof person //'object'
typeof person.ranking //'undefined'
typeof person.toString //'function'


Reflection

Como descobrir se um objeto tem uma propriedade especifica?


Has OWN PROPERTY

hasOwnProperty só irá responder true para as propriedades que pertencerem ao objeto.
Propriedades herdadas retornarão false.
person.hasOwnProperty('name'); //true
person.hasOwnProperty('toString'); //false


Enumeration

Usando o 'for in' conseguimos iterar sobre todas as propriedades de um objeto.

Nessa iteração as propriedades herdadas do prototype object e as funções do objeto também irão aparecer.


Exemplo


var name;
for (name in person) {
  if (typeof person[name] !== 'function') {
    document.writeln(name + ': ' + person[name]);
  }
}


Exemplo


var name;
for (name in person) {
  if (person.hasOwnProperty(name)) {
    document.writeln(name + ': ' + person[name]);
  }
}


For IN

Usando for in a ordem dos elementos pode (e vai) variar.

Portanto, esteja preparado para elementos em qualquer ordem


Como Evitar?

Use o for com um array contendo o nome das propriedades na ordem desejada.

Exemplo

Isso evita iterar sobre propriedades prototype. 

var index;
var properties = [name, age];
for (index = 0; index < properties[index]; index += 1 ) {
  document.writeln(properties[i] + ': ' + person[properties[index]]);
}


Delete

O operador delete pode ser usado para remover uma propriedade de um objeto.

O delete não afeta o prototype linkage :)

Delete

Remover uma propriedade de um objeto que tem um prototype.
person.toString = 'bla bla bla';
person.toString //'bla bla bla'
delete person.toString; // true
person.toString; //function toString() { [native code] }

delete person.name // true
person.name //'undefined'
delete person.name // false


global scope

Em Javascript é fácil definir variáveis globais para guardar todas as funcionalidades da sua aplicação.
Isso é uma má pratica e deve ser evitada. 


APPLICATION

Uma forma de minimar o uso de variaveis globais é criar uma única variavel global para sua aplicação.
var AWESOMEAPP = {};


Application

A nova variavel se torna o container de sua aplicação.
AWESOMEAPP.person = {name: "Alex"};
AWESOMEAPP.job = {title: "Developer"};


Vantagens

Reduzindo o uso global em um único nome/variável, conseguimos reduzir as chances de conflitar com outras aplicações, widgets e libs.


FIM :`(

Chegamos ao fim...
Nas próximas aulas iremos explorar mais o protype.
Falaremos também de closure 
para fazer "Information hiding" e utilizar essa técnica para manter seu global scope de forma mais eficiente.

Made with Slides.com