TIL / 20211011 / js 객체 학습

장정윤·2021년 10월 11일
0

TIL

목록 보기
35/41

1. 객체

  • JS 객체는 프로퍼티와 메서드로 이루어져있음
  • JS 객체의 프로퍼티는 보통 키와 값으로 이루어져있음
  • 키는 보통 문자열과 심볼 값으로 구성되고, 값은 해당 키에 저장하고자 하는 데이터가 들어감
  • 메서드는 일반 함수와 달리 객체가 가지고 있는 함수를 뜻함
  • JS 에서 객체 생성 방법 3가지 : 객체 리터럴 방식, new Object() 방식, 생성자 함수 방식

1. 객체 리터럴

  • JS는 클래스 기반 객체 지향 언어가 아닌 프로토타입 기반 객체 지향 언어 so 이를 객체 리터럴이라 부름(ex. Json 방식)
const user = {
  age: 10,
  name: "dave",
  details: {
    hobby: "coding",
    major: "japanese",
    get_hobby: function () {
      return this.hobby;
    }
  },
  get_name: function () {
    return this.name;
  },
  get_data: () => 1 + 2 //화살표 함수 사용가능, but this 사용 불가
};

console.log(user.age); //10
console.log(user.get_name()); //dave
console.log(user.details.get_hobby()); //coding
console.log(user.get_data()); //3

getter setter

객체의 내부함수 프로퍼티를 직접 제어하는 것을 지양하고 getter, setter를 이용해서 제어하기 위함이다.

getter는 프로퍼티 값을 접근할 때 (읽을 때)호출되는 메서드
getter는 프로퍼티 값을 수정할 때 (설정할 때)호출되는 메서드

사용법)

get prop(인자 없음){
...
}

set prop(한개의 인자){ // 한개의 인자를 변경할 수 있게됨
...
}

예시)

const user = {
  age: 10,
  name: "Dave Lee",

  get get_age(){
    return this.age;
  },
  set set_age(value){
    this.age = value
  }

};

console.log(user.get_age); //10
user.set_age = 20;
console.log(user); //{age: 20, name: "Dave Lee", get_age: 20, set_age: undefined}

===============================================

2.new Object() 방식 (요즘은 잘 사용 x)

-> 지금은 잘 사용하지 않지만 이전에 사용하던 문법

const user = new Object();

user.age = 10;
user.name = 'Dave';

console.log(user.age);

===============================================

3.생성자 함수로 생성하는 방식

생성자 함수는 함수를 의미함
new 함수()를 써 객체처럼 사용 가능
프로토타입 이용해서 객체이름.prototype.프로퍼티명 = 코드와 같이 사용가능


function User(age, name){
  this.age = age;
  this.name = name;
}

User.prototype.message = function(){
  return 'Hello';
}

User.prototype.hobby = 'coding';

const dave = new User(10, 'Dave');
console.log(dave.age, dave.name, dave.hobby); //10 "Dave" "coding" 
console.log(dave.message()); //Hello 
profile
꾸준히 꼼꼼하게 ✉ Email: jjy306105@gmail.com

0개의 댓글