[유튜브 '드림코딩'] 자바스크립트(JavaScript ES6) 7강 (1)

Object, Literals and properties, Computed properties

오늘 내가 배운 것

1. Literals and properties 

 

일반적으로 작성 시 parameter 가 많아지면 추가해야 할 것이 많아지기 때문에 관리하기 힘들고 그룹으로 묶어서 생각할 수 없기 때문에 힘들다.

이것을 개선하고자 Object 를 사용한다.

object = { key : value };  구조로 이루어짐

Object 는 key와 value의 집합체이다.

 

 

Object를 만드는 방법은 2가지가 있다.

1. 괄호 {}를 사용하는 방법 (object literal)
const obj1 = {}
2. new 키워드를 이용해서 만드는 방법 (object constructor)
const obj2 = new Object();

2. Computed properties (계산된 properties)

object ['key']의 구조로 쓰임

Key는 반드시 string 형태로 지정해서  써야한다.

object 안에 있는 데이터를 접근할 때에는 ' object. '을 이용해서 접근 

' object. '을 이용해서 쓰는 경우는 코딩하는 순간 키의 값을 받아 오고 싶을 때

 

 다른방법 object 안에 있는 변수의 이름을 string 형태로 접근

computed properties 는 코딩할 때 정확하게 어떤 키가 필요한지 모를 때

(Runtime 에서 결정되어 실시간을 보고싶을 때)

 

---

 

동영상 보면서 따라 적어보기

'use strict'
//Objects
//one of the JavaScript's data types.
//a collection of related data and / or functionality.
//Nearly all objects in JavaScript are instances of Object.
//object = { key : value };  구조로 이루어짐
/* 
const name = 'ellie'
const age = 4;
print (name, age);
function print(name, age) {
    console.log(naem);
    console.log(age);
}
*/

//parameter 가 많아지면 추가해야할 것이 많아지기 때문에 관리하기 힘들고 그룹으로 묶어서 생각 할 수 없기 때문에 힘들다.
//이것을 개선하고자 Object 를 사용한다.


// 1. Literals and properties 
const obj1 = {}  //괄호를 사용해서 오브젝트를 만드는 것을 'object literal' syntax
const obj2 = new Object(); //class/ new 키워드를 이용해서 만드는 것을 'object constructor' syntax 
function print(person){
    console.log(person.name);
    console.log(person.age);
}
const ellie = {name : 'ellie', age : 5};   
//오브젝트로 관리하면 되니까 11행처럼 따로 받지않고, 21행 처럼 person데이터를 받고 person. 으로 출력
print(ellie);

//with JavaScript magic (dynamically typed language)
//can add properties later 나중에 다른 특성을 추가할 수 있다.
ellie.hasJob = true;
console.log(ellie.hasJob);

//can delete properties later 지울수도 있다.
delete ellie.hasJob;
console.log(ellie.hasJob);

//2. Computed properties (계산된 properties)
// key should be always string
// object['key']
console.log(ellie.name);    //object 안에 있는 데이터를 접근 할 때에는 object . 을 이용해서 접근
                            //. 을 이용해서 쓰는 경우는 코딩하는 순간 키의 값을 받아 오고 싶을 때
console.log(ellie['name']); // 다른방법 object 안에 있는 변수의 이름을 string 형태로 접근 
                             //computed properties 는 코딩할 때 정확하게 어떤 키가 필요한지 모를 때 (Runtime 에서 결정되어 실시간을 보고싶을 때)
ellie['hasJob'] = true;   
// 36줄에서 제거 한 것을 다시 추가한다. (computed properties인 object['key']를  이용해서 할당)

function printValue(obj, key) {
    console.log(obj[key]);
}
printValue(ellie, 'name');
printValue(ellie, 'age');