JavaScript Tutorial.16

15949 단어 JavaScript공부w3schoolsJavaScript

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)라고 한다.
PropertyProperty Value
firstNameJohn
lastNameDoe
age 50
eyeColorblue

Accessing Object Properties

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

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

Object Methods

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

  • 메소드는 속성으로 저장된 함수이다.
PropertyProperty Value
firstNameJohn
lastNameDoe
age50
eyeColorblue
fullNamefunction() {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>

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

JS 변수가 new 키워드로 선언되면 변수는 객체로 생성된다.

문자열, 숫자 및 booleans 개체로 선언하지 말자.코드가 매우 복잡해지고 실행 속도가 느려진다.

챗봇 만들기
1021 TIL

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage