길벗개발일지14기(자율학습단html,css,js)

15일차 학습인증(객체속성 다루기)

twinkle_choi_toyprojectdev 2025. 5. 3. 19:39

*학습범위: 교재 p419 ~ p432

객체란?

= 자바스크림트에서의 범위는 매우 포괄적이지만,

자료형의 관점에서 보면 키(key)와 값(value)로 구성된 속성의 집합을 의미합니다.

따라서 객체는 여러 개의 값을 가질 수 있고, 다른 자료형의 값도 가질 수 있습니다.

(형식) { }를 이용해 생성할 수 있는데 이런 방법을 리터럴(literal) 방식으로 객체를 생성했다고 표현합니다.

그리고 속성이 한 개도 없는 객체를 빈 객체 라고 합니다.

const person = { };

const person = {name:"HeungMin Son"};

const person = {

name: "HeungMin Son"

};

객체는 데이터의 종류를 가리지 않으므로 모든 자료형의 데이터를 값으로 가집니다.

예를 들면, 배열, 숫자, 논리 데이터를 다음과 같이 한 객체의 속성으로 추가할 수 있음

const person = {

name:["HeungMin Son"],

age: 32,

isAdult:true

};

객체 안에 또 다른 함수도 들어갈 수 있음

const person = {

name:{

   firstName: "HeungMin",

   lastName: "Son"

},

age:32,

isAdult:true,

printInfo:function(){

   console.log('printInfo');

}

};

보통 객체의 키는 문자열로 작성하는데, 키에 공백이 들어갈 경우에는 따옴표를 꼭 사용할 것

const person ={

   "phone number":"010-000-0000"

};

함수와 메서드 

= 객체에서 속성의 값으로 함수가 들어갈 때에는 보통 함수라 하지않고

매서드(method)라고 합니다.

 

객체속성에 접근하기

= 자바스크립트에서는 대괄호 연산자와 마침표 연산자를 사용한 2가지 방법을 제공합니다.

1. 대괄호 연산자로 접근하기

=[ ] 를 사용해 객체의 속성에 접근하는 방법으로, 배열에서도 사용할 수 있음

* 객체의 속성에 접근하려면 객체명 뒤에 대괄호 붙이고 -> 대괄호 안에 키 넣고

-> 키에 반드시 "큰따옴표" 또는 '작은 따옴표' 감싼 문자열 형태로 작성해야 함.

(예시)

const person = {

   name:"HeungMin Son",

   age: 32

};

console.log(person["name"]); // HeungMin Son

console.log(person["age"]); // 32

 

(예시) 배열의 요소

const person = {

   name:{

     firstName:"HeungMin",

     lastName:"Son"

},

likes:["Soccer", "Galaxy"],

printHello:function( ){

   return: "hello";

}

};

 

(예시) 속성값이 함수일 떼

console.log(person["printHello"]); // [function: printHello]

함수 호출할 떄 ( ) 를 사용하므로 결국 person 객체의 printHello( ) 다음과 같이 접근한다.

console.log(person["printHello"]( );  // hello