[JS] Property

초이지수·2022년 10월 12일

JavaScript

목록 보기

2/4

🙋🏻‍♀️ Property란?

Property란 속성이란 뜻으로 javascript에서는 객체 내부의 속성을 의미한다.
객체는 property로 구성된다.

property는 key : value 의 형식으로 객체 안의 콤마로 구분되어 할당된다.
Key(속성명)는 문자열만 가능 (따옴표는 띄어쓰기가 있는 경우에만 필수)
Value(속성값)는 어떤 값이든지(문자열, 숫자, 객체, 함수 등) 상관없다.

객체에 함수를 정의할 경우 속성값이 아닌 Method라고 부른다.
특정 객체가 가지고 있는 정보를 품고 있기에, 해당 객체가 가진 정보에 직접적으로 접근할 수 있게 해준다

☄️ 객체의 property 접근

대괄호 (브라캣 연산자)
점 표기법

변수명.a; // 'a'
변수명['a']; // 'a'

☄️ 하위 Namespaces

다른 객체를 객체 멤버의 값으로 갖는 것도 가능하다

const obj = {
  a : {
    bb: 'bbb',
    cc: 'ccc'
  }
}

obj.a.bb; // 'bbb'
obj.a.cc; // 'ccc'

☄️ 객체의 속성 삭제

앞에 delete 키워드를 붙여주면 된다.

const obj = {
  a : {
    bb: 'bbb',
    cc: 'ccc'
  }
}

delete obj.a.bb;
obj.a; // { cc: 'ccc' }

☄️ 객체와 반복문

배열에 있는 값을 가져올 때
객체의 속성들을 반복하여 작업할 때 사용

const obj = { 'prop1': 100, 'prop2': 200, 'prop3': 300 } // 변수에 객체 만들기
for (key in obj) {
  console.log('key: '+key+', value: '+obj[key]);
}

// key: prop1, value: 100
// key: prop2, value: 200
// key: prop3, value: 300

☄️ 객체 안의 함수

객체의 속성값으로 함수가 저장될 수 있다.
자바스크립트에서는 함수도 일종의 값이며, 변수에 저장될 수 있다.

어떤 객체의 속성으로 접근해 사용하는 함수는 Method라고 부름.
프로퍼티 안에 함수를 받는 프로퍼티를 일반적으로 Method라고 지칭함.

하나의 객체 안에 서로 관련된 데이터와 함수를 그룹핑 할 수 있는데, 이러한 프로그래밍 기법이 객체지향 프로그래밍이다!

const obj = {
  'list': { 'a': 10, 'b': 20, 'c': 30 },
  'show': function() {
    for (const key in this.list) { 
      console.log(key + ': ' + this.list[key] + '<br />');
    }
  }
};

obj.show();

// a: 10
// b: 20
// c: 30

const obj = {
  a: 1,
  b: function bb() {
    console.log(this); // obj
  },
  c: function() {
    console.log(this.a); // 1
  }
};

obj.b(); // 메소드 호출
obj.c(); // 메소드 호출

console.dir(obj.b); // bb()
console.dir(obj.c); // c()