TIL day1 Object 첫번째

1. object 1

let person = {
  name: 'Eric',
  age: 20,
  'Favorite Movie': 'The Godfather',
  family: ['Father', 'Mother', 'Brother']
};

• Object: person
• Properties:
  name: 'Eric',
  age: 20,
  'Favorite Movie': 'The Godfather',
  family: ['Father', 'Mother', 'Brother']
• keys(property name): name, age, 'Favorite Movie', family
• Value: 'Eric', 20, 'The Godfather', ['Father', 'Mother', 'Brother']

2. Accessing Properties

1. . (dot notation)
   objectname.propertyname(key)

person.name; // Returns 'Eric'
person.family; 
// Returns ['Father', 'Mother', 'Brother']

2. [] (Bracket Notation)
   objectname[propertyname];
   : key가 숫자, 공백(space) 또는 특수문자를 가질 때 무조건 [ ](bracket notation) 사용해야함.

['Father', 'Mother', 'Brother'][0]
//Return 'Father'

3. 존재하지 않는 property의 경우 undefined가 return된다.

person.address; // Return undefined

3. Property Assignment

• Objects are mutable

objectname.propertyname = value;
person.name = 'Teddy'

• property assignment 할 때
  1. object 내에 property가 이미 존재한 다면 value는 새로 재할당 된다.
  2. object 내에 property가 존재하지 않을 때 object에 새로 추가된다.
• const로 선언한 object는 재할당 될 수는 없으나 properties의 변경, 추가는 가능하다.

const persion = {age: 20};
person = {type: '22'}; 
//Return TypeError, const 변수에는 재할당 할 수 없기 때문

person.age = 22;
//Return 22, property 재할당은 가능

person.country = 'Korea';
//Create new property, property 추가됨

delete person.country;
//Remove country property, delete 사용 시 property 삭제 가능

4. Methods

//anonymous function expression
const person = {
    motto: function () {
    console.log('No gain No pain');
    }
};

//new method syntax(ES6)
const person = {
    motto () {
    console.log('No gain No pain');
    }
};

person.motto(); 
//Prints 'No gain No pain'

5. Nested Objects

const person = {
    name: 'Teddy',
    age: 20,
    friends: {
    	school: {
            name: 'mory',
            age: 20,
            'Favorite color' : ['black', 'white']
            },
        'Mid-Gym': {
            name: 'Hans',
            age: 29
            }
        }
    };
    
person.frinds['Mid-Gym'].name;
//Return 'Hans'

const yellow = person.friends.school['Favorite color'][0]
// Return 'Favorite color' : ['yellow', 'black', 'white']

• object를 Array로 만들려면 property: [{property}]로 작성

...
        'Mid-Gym': [{
        	name: 'Hans'
            age: 29
            }] // Array
...

6. Pass By Reference

Objects are passed by reference.

설명 참조:

• https://hackernoon.com/grasp-by-value-and-by-reference-in-javascript-7ed75efa1293
• https://codeburst.io/javascript-passing-by-value-vs-reference-explained-in-plain-english-8d00fd06a47c

7. Looping Through Objects

Loops are programming tools that repeat a block of code until a condition is met.
We learned how to iterate through arrays using their numerical indexing, but the key-value pairs in objects aren’t ordered !
JavaScript has given us alternative solution for iterating through objects with the for...in syntax .

for...in will execute a given block of code for each property in an object.

const person = {
    name: 'Teddy',
    age: 20,
    friends: {
    	school: {
            name: 'mory',
            age: 20,
            'Favorite color' : ['black', 'white']
            },
      'Mid-Gym': {
            name: 'Hans',
            age: 29
            }
        }
    };
    
 //for...in
 for (let place in person.friends) {
	console.log(`${place}: ${person.friends[place].name}`)};

출처 codeacademy javascript object