객체(Obejct) & 메서드(Method)

객체란(Obejct)?!

- 자바스크립트의 객체는 키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합

 

// 왼쪽이 객체의 property name(key), 오른쪽이 객체의 property value 
{   
  '1st': null,
  '2nd' : 연아,  
  friend: {name: 'crew', age: 3}, 
  'my-name': 'yunajoe'
}

Property Name 의 자료형은 문자열이지만, 반드시 따옴표로 감싸줄 필요는 없다. 
다만  아래의 사항들을 어길시에는 따옴표로 감싸줘야 한다. 

1. 첫번째 글자는 반드시 문자, 밑줄, 달러기로 시작해야 한다  
2. 띄어쓰기 금지  
3. 하이픈 금지 

// 데이터에 접근해보자 

let profile = {
    name: "yuna", 
    'born Year': 2018, 
    personality : true, 
    weankness: null, 
    favoritefood :{
        coffee: "americano",
        'ordered pizza' : "peperroni" 
    } 
};

console.log(profile.bornYear); // 2018

// 만약에 bornYear ==> born Year 됬다면?!(즉, 띄어쓰기를 했다면?!)
// profile.born Year 라고 하면은 born과 Year를 다른 property 로 인식한다. 
// 따라서 대괄호로 감싸주자 

console.log(profile['born Year']); // 2018 
console.log(profile['born' + ' Year']); // 2018  
let propertyName = "name";
console.log(profile[propertyName]);  // yuna

// 객체 property안에 있는property에 접근해보자 

console.log(profile.favoritefood.coffee); // americano
console.log(profile.favoritefood['ordered pizza']); // peperroni 

// 존재하지 않는 properety 
console.log(profile.favoritefood['ordered drink']); // undefiend

 

// 실습 -- 객체만들기

let myVoca = {
    function:'함수', 
    variable: '변수',
    constant: '상수',
    local: '지역의',
    global: '전반적인' 
}; 

console.log(myVoca);
console.log(myVoca.local);
console.log(myVoca.constant);
console.log(myVoca.function);

// 실습2 - 수정, 삭제 해보기 

let myVoca = {
    function:'함수', 
    variable: '변수',
    constant: '상수',
    local: '지역의',
    global: '전반적인',
    name : 'yuna'
}; 

// 수정하기 
console.log(myVoca.name); // yuna
myVoca.name = "조연아";
console.log(myVoca.name) // 조연아

// 삭제하기
console.log(myVoca.function); // 함수 
delete myVoca.function;
console.log(myVoca.function); // undefined

메소드(Method)란?!

- property 값이 함수 일때! 객체의 메소드라고 한다 

// property값으로 함수를 정의하고 있다
// 메소드 활용1
let greetings = {
    sayHello: function(name){
        console.log(`Hello ${name}`); // console이라는 개체에 log라는 함수
    }, 
    sayHi: function(){
        console.log("Hi");
    },
    sayBye: function(){
        console.log("Bye");
    } 
};


greetings.sayHello("yuna");  // Hello yuna
greetings["sayHello"]("yuna2"); // Hello yuna2
greetings.sayHi(); // Hi


// 메소드 활용2

let rectAngle = {
    width :30, 
    height: 50, 
    getArea : function(){
        return rectAngle.width * rectAngle.height;
    } 
}


let triAngle = {
    width :15, 
    height: 40, 
    getArea : function(){
        return triAngle.width * triAngle.height / 2 ;
    } 
}   


// 실습3

let myVoca = {
    // 단어를 추가하는 addVoca메소드
    // 영어단어와 뜻, 총 두 개의 문자열 값을 파라미터로 전달
    addVoca: function(key, value){     
        myVoca[key] = value;
  },
  
    deleteVoca: function(key){
        delete myVoca[key];
    }, 

    printVoca: function(key){
        console.log(` "${key}"의 뜻은 "${myVoca[key]}"입니다`)
    }
};  

  // addVoca메소드 테스트 코드
  myVoca.addVoca('parameter', '매개 변수');
  myVoca.addVoca('element', '요소');
  myVoca.addVoca('property', '속성');
  console.log(myVoca);
  
  // deleteVoca메소드 테스트 코드
  myVoca.deleteVoca('parameter');
  myVoca.deleteVoca('element');
  console.log(myVoca);
  
  // printVoca메소드 테스트 코드
  myVoca.printVoca('property');

 

dd때 입니다. 객체