자바스크립트 객체(JavaScript Objects)

실생활 객체, 속성 및 메소드(Real Life Objects, Properties, and Methods)

실생활에서, 차는 객체이다.

차는 무게, 색깔 그리고 출발과 멈춤같은 방법(메소드)의 속성들을 갖고 있다.

 

객체	속성	방법(메소드)
	car.name = Fiat car.model = 500 car.weight = 850kg car.color = white	car.start() car.drive() car.brake() car.stop()

 

모든 자동차는 동일한 속성을 갖고 있지만, 속성 값은 자동차마다 다르다.

모든 자동차는 동일한 방법을 갖고있지만, 서로 다른 시간에 실행된다.

 

 

---

 

 

자바스크립트 객체(JavaScript Objects)

자바스크립트 변수는 데이터 값을 담기 위한 컨테이너라고 이미 배웠었다.

이 코드는 car라는 변수에 단순 값을 할당한다.

 

let car = "Fiat";

 

 

객체들은 변수이다. 그렇지만 객체는 많은 값을 포함할 수 있다.

해당 코드는 car라는 변수에 많은 값(Fiat, 500, white)을 할당한다.

 

const car = {type:"Fiat", model:"500", color:"white"};

 

값은 이름:값 쌍으로 작성된다.(이름과 값은 콜론(:)으로 구분된다.)

💡 const 키워드로 객체를 선언하는 것이 일반적이다.

 

 

---

 

 

객체 정의(Object Definition)

객체 리터럴을 사용해서 자바스크립트 객체를 정의(생성)한다.

 

const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

 

 

공백과 줄 바꿈은 중요하지 않다. 객체 정의는 여러 줄에 걸쳐 있을 수 있다.

 

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

 

 

---

 

 

객체 속성(Object Properties)

자바스크립트 객체에서 이름:값 쌍은 속성이라 불린다.

 

속성	속성값
firstName	John
lastName	Doe
age	50
eyeColor	blue

 

 

---

 

 

객체 속성에 접근(Accessing Object Properties)

두 가지 방법으로 객체 속성에 접근이 가능하다.

objectName.propertyName

objectName["propertyName"]

 

 

예제 1

person.lastName;

예제 2

person["lastName"];

 

자바스크립트 객체는 속성이라 불리는 값의 컨테이너다.

 

 

---

 

 

객체 메소드(Object Method)

객체는 메소드를 가질 수 있다.

메소드는 객체에서 수행될 수 있는 작업이고, 속성에 함수 정의로 저장된다.

 

속성	속성 값
firstName	John
lastName	Doe
age	50
eyeColor	blue
fullName	function() {return this.firstName + " " + this.lastName;}

 

💡 메소드는 속성으로 저장된 함수이다.

 

 

---

 

 

예제

const person = {
  firstName: "John",
  lastName : "Doe",
  id       : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

 

위의 예제에서, this는 person 객체를 나타낸다.

- 즉, this.firstName 은 this의 firstName 속성을 의미한다.

- 즉, this.firstName 은 person의 firstName 속성을 의미한다.

 

 

---

 

 

this란 무엇인가?(What is this?)

자바스크립트에서 this 키워드는 객체를 나타낸다.

어떤 객체가 호출(사용 또는 호출)되는에 따라 다르고,  어떻게 객체가 사용되는지에 따라 다르게 나타난다.

 

객체 메소드에서, this는 객체를 나타낸다.

단독으로, this는 전역 객체를 나타낸다.

함수에서, this는 전역 객체를 나타낸다.

함수내의 엄격모드에서 this는 정의되지 않는다.

이벤트에서, this는 이벤트를 수신한 요소를 나타낸다.

call(), apply() 그리고 bind() 같은 메소드들은 this를 어떤객에서든 참조할 수 있다.

 

💡 this는 변수가 아닌 키워드이다. this의 값을 변경할 수 없다.

 

 

---

 

 

this 키워드(The this Keyword)

함수 정의에서 this는 함수의 "소유자"를 나타낸다.

상단 예제에서, this는 fullName 함수를 "소유"하는 사람 객체이다.

다시 말해, this.firstName은 this 객체의 firstName 속성을 의미한다.

 

 

---

 

 

객체 메소드에 접근(Accessing Object Methods)

다음 구문을 사용하여 객체 메소드에 접근한다.

 

objectName.methodName()

 

예제

<script>
// Create an object:
const person = {
  firstName: "John",
  lastName: "Doe",
  id: 5566,
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
};

// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName();
</script>



//John Doe

 

 

만약 () 없이 메소드에 접근하게 되면, 함수 정의 값을 리턴 받는다.

 

<script>
// Create an object:
const person = {
  firstName: "John",
  lastName: "Doe",
  id: 5566,
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
};

// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName;
</script>



//function() { return this.firstName + " " + this.lastName; }

 

 

---

 

 

문자열, 숫자 및 불린을 객체로 선언하지 마라!

(Do Not Declare Strings, Numbers, and Booleans as Objects!)

자바스크립트 변수가 "new"라는 키워드로 선언되면, 변수는 객체로 생성된다.

 

x = new String();        // 문자열 객체로 x를 선언
y = new Number();        // 숫자 객체로 y를 선언
z = new Boolean();       // Boolean 객체로 z를 선언

 

문자열, 숫자 및 불린 객체는 피해라. 코드를 복잡하게 하고 실행 속도를 늦출 것이다.