JavaScript Object Literals

# Intro Object Literals

• Objects are collections of properties.
• Properties are a key-value pair. It is like little pieces of data where there's not an order, there's not a priority. It is just the pairs. So we can store whatever we want 
• Rather than accessing data using an index, we use custom keys.
• We can instead lable thinks there's not really an order here that matters. It is all about labeling our information, giving it a name. 

const fitbitData = {
	totalSteps : 30800,
    totlaMiles : 211.7,
    avgCalorieBurn : 5755
}

• key : value pairs and these are all properties. There is a no real order. The order doesn't matter at all. And they are all floating around inside this one shared object.

 

#Creating object literal

• Key-value pair data store, this data structure. we creat using curly braces.  
• We can creat an object we can store all sorts of data in there as values. You can put whatever you want as a value.

let commonet = {
	username : 'silliyGoose420',
    downVotes : 19,
    upVotes : 214,
    netScore : 195,
    commentText :'Tastes like chicken lol',
    tag: ['#hilarious','#funny','#silly'],
    isGilded : false
}

 

# How to access data out of an object 

• In order to access data in object literal, we use squre brackets[]. The only case we use curly braces is when you declare objects. But to access data out, we use squre brackets and need to use quotation mark as well. 
• Also there's another way to access. Just use dot(.)

let person = {firstName : James , lastName : Jagger}

person["firstName"] // James

person.firstName //James

• In objects, Key is actually strings, which means you need to use quotation mark when you are trying to access data. Whether it looks like boolean , number and null, it is just strings. So you can just call person[firstName] like this. 
• There is a difference between dot syntax and bracket syntax. When you use dot syntax, you can access what it is exactly in object, but if you use [], you have an availabilty to have expression in squre brackets.

person.firstName // James (You can get what exactly in object)
person['first' + 'Name '] // James (Also you can get the same result)

• What you need to understand at this point is that when you use dot syntax, it is looking for exactly same thing in object. But If I use squre brackets instead, the expressoin in bracket should evaluate to a string or a symbol that represents the property's name. So it can be any string.  
• 추가적 설명 : []표현은 변수로 접근이 가능하지만 .표현은 바로 객체의 속성에 접근한다.
• 아래 예시를 보면, [] 표현은 b가 변수가 되어 실제로 a의 속성 값인 2를 출력하지만, a.b에서는 b가 변수가 아닌 실제 속성 b에 접근하여 1을 출력하게 된다.

var a = {
 b : 1,
 c : 2
}
var b = ‘c’
console.log(a[b] + ‘ vs ‘ + a.b) // 2 vs 1

 

 

# Adding or Updating data in object literal

• As we learned, Key in object is going to be changed into strings. If you use 'danielle' as a key, it will be changed into strings but if you just use 'danielle' and it is not going to be defiend itself. 
• When you want to change the value of key, you can use doy syntax or bracket sytanx 

const midterms = {danieele : 96, thomas : 78}

midterms.thomas = 79 // the result will be changed

• Just like an array, when we use the key word, const to declare an object variable, the container, the object itself needs to stay the same, but insdies can be swapped. 
• If you want to add one more key : value pair, you can also use dot syntax

midterm.haily = 99; // It will be add in object
midterm['antonio'] = 44;

 

#Array and nested object

• combination of array and object together is more powerful and it is really common pattern. we often have some data that has an order and we cannot put it in array or in other time we have data that make sense to have key : value pairs but sometimes some of it's ordered so we will use an array. 

const = [
	{
    	product : 'janga classic',
        price : 6.88,
        quantity : 1,
    }
    {
    	product : 'Echo Dot',
        price : 29.99,
        quantity : 3,
	}
    {
    	product : 'Fire stick',
        price : 39.99,
        quantity : 2,
    }
] // objects in array


const student ={
	firstName : 'David',
    lastName : 'Jones',
    strengths : ['music', 'Art'],
    exams : {
    	midterm : 92,
        fianl : 88
    }
} // array and nested object in object