[부스트코스][BoostCourse] 8. Javascript 객체

본 게시글은 생활코딩 강의를 듣고 정리한 글입니다

---

객체의 개념

snupi.tistory.com/100

[부스트코스][BoostCourse] 6. Javascript 함수(1/2) (JS 함수의 개념 / 장점)

우리는 전 포스팅에서 함수를, 한 줄이라도 그 구현의 의미를 명확하게 하기 위해 활용하였다

하지만 프로그램에서 기능들이 많아진다면, 중복이 되지 않게 함수의 이름을 계속 길게 작성할 것이다

이를 방지하게 위해 우리는 폴더로 정리한다

 

이와 같이 우리는 함수(메소드)와 속성(프로퍼티)들을 객체로 정리할 수 있다

 

객체의 고유한 속성을 프로퍼티(property)라고 부른다

객체는 여러 프로퍼티와 값의 쌍으로 표현된다

또한 객체는 여러 개의 함수를 가질 수 있는데 함수를 메소드(method)라고 부른다

 

다음 은행 계좌 객체를 예로 들어보자

프로퍼티 : 값)
소유자 : 홍길동
계좌번호 : 111
잔액 : 35000

메소드)
입금하기
출금하기

 

다음은 코어 객체로, 언어가 실행되는 어디서나 사용 가능한 객체들이다

 

• Array
• Date
• String
• Math

---

객체의 생성과 접근

다음과 같이 { }, 중괄호, 컬리 브라켓 안에 값을 적어 객체를 생성할 수 있다

 

// asia, europe 프로퍼티에 값을 추가, inquiry 메소드 (1) - 리터럴 표기법
var countries = {
  "asia" : "korea",
  "europe" : "england",
  
  inquiry : funtion () { 
    for(var key in this) {
      document.write(key + '<br>');
    }
  }
};

// asia, europe 프로퍼티에 값을 추가, inquiry 메소드 (2) - new Object()
// 빈 객체 생성
var countries = new Object();

countries.asia = "korea";
countries.europe = "england";

countries.inquiry = function () { 
  for(var key in this) {
    document.write(key + '<br>');
  }
}

 

Line 3) 콤마(,) : 프로퍼티와 프로퍼티 사이에 구분지어 사용한다

Line 7) for in : 배열에서 반복문을 사용하듯이, 객체에서 순회(iteration) 사용 - Java에선 없다

Line 7) this : 함수 안에서 함수가 소속되어 있는 객체를 가리킨다 (예외도 있다! 메서드 바인딩을 따로 공부해보자)

Line 17) 점(.) : 객체에 접근하는 연산자로 사용한다

 

위와 같이 선언한 프로퍼티를 [ ] 로 접근도 가능하다

 

countries[key] === countries.key

// ===, !==는 ==, !=와 달리 부가적인 형변환을 하지 않는다

object.prop1.prop2 === object["prop1"]["prop2"]

 

---

프로토타입 객체

Java에서 클래스라고 부르는 개념이 있다

이를 JS는 new 연산자로 프로토타입을 만들고 활용한다

비유를 해보자면, 붕어빵 틀을 프로토타입이라고 하고 붕어빵을 객체라고 할 수 있다

 

다음과 같이 프로토타입을 함수로 작성한다

 

// 프로토타입 Student
function Student(name, score) {
  // 프로퍼티 name, score
  this.name = name;
  this.score = score;
  
  // 메소드 getGrade
  this.getGrade = function() {
                    if(this.score > 80) return "A";
                    else return "F";
                  }
}

 

이를 new 연산자로 객체를 생성하고 활용한다

 

// Student 객체 생성 및 활용
var snupi = new Student("nupi", 98);
document.write(snupi.name + "의 학점은 " + snupi.getGrade());

 

---