JavaScript Tutorial.16

ansunny1170·2021년 12월 7일

w3schools.JS Tutorial(웹제어용)

목록 보기

16/63

JS OBJECTS

Real Life Objects, Properties, and Methods

실생활에서 자동차는 물건이다.
자동차에는 무게와 색상과 같은 속성과 시작 및 중지와 같은 매서드가 있다.
모든 자동차는 동일한 속성을 가지고 있지만 속성값은자동차마다 다르다.
모든 자동차에는 동일한 방법이 있지만 방법은 서로 다른 시간에 수행된다.

Object	Properties	Methods
	car.name = Fiat car.model = 500 car.weight = 850kg car.color = white	car.start() car.drive() car.brake() car.stop()

JavaScript Objects

JS 변수가 데이터 값의 컨테이너 라는 것을 배웠다.
아래 코드는 car라는 변수에 간단한 값(Fiat)을 할당한다.

객체도 변수이다. 그러나 개체에는 많은 값이 포함될 수 있다.
이 코드는 car라는 변수에 많은 값(Fiat, 500, 흰색)을 할당한다.

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

※const키워드를 사용하여 객체를 선언하는 것이 일반적이다.
JS const장에서 객체와 함께 const를 사용하는 방법에 대해 자세히 알아볼 수 있다.

w3schools
(참조 : https://www.w3schools.com/js/js_const.asp)
velog 정리
(참조 : https://velog.io/@ansunny1170/JavaScript-Tutorial.9-q4u544nk)

Object Definition

아래 예제와 같은 객체문으로 JS 객체를 선언한다.

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p id="demo"></p>

<script>
// Create an object:
const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

// Display some data from the object:
document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>

빈칸과 줄바꿈(Enter)는 중요하지 않고, 객체 선언시 여러 줄로 만들 수 있다.

Object Properties

JS 객체의 이름:값 의 한 쌍으라 속성(properties)라고 한다.

Property	Property Value
firstName	John
lastName	Doe
age 50
eyeColor	blue

Accessing Object Properties

객체 속성에 접근하는 방법은 두가지가 있다.

※JS 객체는 속성이라고 하는 명명된 값의 컨테이너이다.

Object Methods

객체도 메소드를 가질 수 있다. 매소드는 객체에 대해 수항할 수 있는 작업이다.
메소드는 속성에 함수 정의로 저장된다.

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

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

The this Keyword

함수 정의에서 this는 함수의 소유자를 나다탠다.
위의 예시에서 this는 fullName 함수를 소유한 사람 개체이다.
즉, this.firstName은 이 객체의 firstName 속성을 의미한다.

JS의 this키워드에대해 자세히 알아보자
(참조 : https://www.w3schools.com/js/js_this.asp)

Accessing Object Methods

아래 코드예시처럼 객체의 메소드(함수)에 접근 가능하다.

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>An object method is a function definition, stored as a property value.</p>

<p id="demo"></p>

<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>

</body>
</html>

만약 괄호( )없이 메소드에 접근을 하게되면, 함수의 내용을 문자열로(정의된 내용을) return한다.

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p>If you access an object method without (), it will return the function definition:</p>

<p id="demo"></p>

<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>

</body>
</html>