반응형
250x250
«   2025/01   »
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Notice
Recent Posts
Today
Total
관리 메뉴

네이처리 노트

[javascript] 객체 object 기본기 본문

개발기록/Javascript

[javascript] 객체 object 기본기

네이처리 2022. 9. 5. 15:00
728x90
반응형

공부하면서 정리한 내용입니다
참고한 내용은 맨 아래의 링크를 확인해주세요




let object = {
	propertyName: propertyValue,  //속성 property
}

let sample = {
    name: "name",
    'i_am': "sample",     // 따옴표로 하이픈사용
    home: {               // 객체안에 객체
        name: '이름',
        color: '파랑'
    }
};
  • propertyName
    1. 첫글자는 반드시 문자, 밑줄( _ ), 달러기호( $ )중 하나로 시작
    2. 띄어쓰기 금지
    3. 하이픈(-)금지 : 따옴표로 사용 할 수 있음 'an apple' 'an-apple'
  • propertyValue
    1. 객체안에 객체를 넣을 수 있음

// 점 표기법 
sample.name

// 대괄호 표기법 
sample['i_am']

// 객체안의 객체 접근하기 
sample.home.color

// 객체에 속성이 없는 경우 
sample.age // undefined
// 추가 및 수정
sample.new = '추가 및 수정';       

sample['new'] = '이렇게도 가능';

// 제거 
delete sample.name;

delete sample['name'];   

// 객체내 존재 확인하기
console.log('name' in sample); // true

// 객체 길이
sample.keys( obj ).length; // 2



let greeting = {            //두 개의 메소드를 가진 객체
    sayHello: function() {    //함수이름은 속성이름이 대체됨
        console.log('Hello');	
    },
    sayBye: function(name) {   //파라미터를 넣을 수 있음
        console.log(`Bye ${name}!`);
    }
};

greeting.sayHello();            //Hello 출력
greeting.sayBye('점표기법');      //Bye 점표기법! 출력
greeting[sayBye]('대괄호표기법');  //Bye 점표기법! 출력

출력할 때 사용하는 console.log도, console객체에 log메소드 인 것

▼메소드를 사용하면 함수 이름의 중복을 피할 수 있다 !

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

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


파라미터 사용시 주의할 점
변수에 담긴 값을 가져올 때는 대괄호 표기법을 사용해 주어야 한다

let myVoca = {
  addVoca: function (word, trans) {
    return myVoca[word] = trans;
  },
  deleteVoca: function (word) {
    delete myVoca[word];
  },
  printVoca: function (word) {
    console.log(`"${word}"의 뜻은 "${myVoca[word]}"입니다.`)
  }
}









728x90
반응형
Comments