객체 (Object)

Yeonkor·2020년 9월 17일
0

Javascript

목록 보기
11/12

객체와 객체 리터럴

객체는 유사의 데이터와 함수의 단일 또는 집합 모음이다. 데이터들 과 함수 중 객체에 속해 있는 것을, 각각 프로퍼티메소드라고 지칭한다. 아래에서 더욱 자세한 풀이가 나온다.


let objTest = {}; // 새로운 객체 선언

objTest = { // 객체 값을 새로이 할당
  name: `yeonkor`,
  age: 28,
  sex: `male`,
  interests: [`learning new`, `workout`],
  profile: function () {
    console.log(`${this.name} is ${this.age} years old `);
  }, // 템플릿 리터럴 사용 , 프로퍼티의 값으로 함수를 할당
  greeting: function () {
    console.log(`Hi ! I,m ${this.name} .`);
  },
};

객체는 Key, Value라는 쌍의 값으로 이루어져있다. 객체 안에서 갖게되는 변수들을 Key , 즉 프로퍼티라고 부르며 여기에 담기는 값들은 어떠한 값도 될 수 있다. 상단의 예제에서는, 문자열, 숫자, 배열, 함수들이 그 값으로 담겨 있다. 심지어 객체의 값으로 또 다른 객체를 담을 수도 있다. 객체의 값으로 함수를 갖게 될 때, 우리는 그것을 메소드로 지칭한다.

Object : { 
  A /* key 값 */ : 'A value', 
  B /* key 값 */ : function(){ 
        alert(`B value`); // 값이 함수일경우 메소드
}

 //  => 이러한 객체를 객체 리터럴이라고 부른다. 

점 표기법

객체의 내부는 캡슐화 되어있다. 우리는 이에 접근하려면 점 표기법을 이용해 접근한다. 그 후 접근항목을 기입한다. 그 종류는 어떠한 것이든 가능하다.


objTest.name;
objTest.age;
objTest.sex;
objTest.greeting;

괄호 표기법

프로퍼티에 접근법으로, 점 표기가 아닌 괄호 표기도 존재한다.

// 점 표기법
objTest.name
objTest.interests[1]
objTest.prifle

// 괄호 표기법
objTest[`name`]
objTest[`interests[1]`]
objTest[`profile`]

// => 둘은 같은 값을 갖는다.

객체 멤버 설정

또한 객체의 값을 새로 설정(갱신 또는 할당의 의미)또한 가능하다.

objTest[`name`] = `yeonkorKim`  // name 설정
objTest[`interests[1]`] = `prototyping` // interests의 2번째 인덱스 설정
objTest[`profile`] = function(){ 
  console.log(`ERROR!!`); // 로그 값 설정
}
                               

'this'

this 키워드는 지금 동작하고 있는 코드를 가지고 있는 객체를 가리킨다. 위의 예제에서 this 는 objTest 객체와 동일하다. this는 모 객체의 인자 값이 달라지는 새로운 초기화에서도, 지칭되는 그 값이 정확하게끔 도와준다.


  profile: function () {
    console.log(`${this.name} is ${this.age} years old `);
  }, //  objTest의 메소드인 profile에서 사용되고 있는 this는 원 객체인 objTest와 동일하다.
  greeting: function () {
    console.log(`Hi ! I,m ${this.name} .`); // greeting 메소드 또한, objTest에서 속해서 실행되므로 this는 objTest이다.
  },
};

profile
CTO를 꿈꾸는 CDO

0개의 댓글