[udemy] 한입 리액트 : 객체

객체생성방법으로는 객체 생성자 방식, 객체 리터럴 방식 2가지가 있다.

 

1. 객체 생성자 방식

let person = new Object();
//Object라는 새로운 객체를 생성한다.

 

2. 객체 리터럴 방식

let person = {
	key: "value",
	key1: 123,
	key2: true,
	key3: undifined,
	key4: [1, 2],
	key5: function() {}
};

생성자 방식과 다르게

let person = { }; 이렇게 괄호만 사용하여 객체를 생성할 수 있고,

괄호 안에는 객체가 저장하고 싶은 값을 넣어준다.

 

객체 생성자 방식보다는 객체 리터럴 방식을 더 많이 사용한다.

 

 

* 값을 넣는 형식       key: value

이렇게 key와 value로 구성된 것을 프로퍼티(=속성)라고 하며 객체 프로퍼티라고도 하는데,

객체가 가지고 있는 데이터를 의미한다.

 

- value는 위의 코드처럼 어떤 자료형이든 가능

- key는 문자열로만 작성 가능

  key끼리는 중복이 되지 않도록 작성하는 것이 좋은데, 중복된다면 가장 뒤의 프로퍼티를 기준으로 나타난다.

 

 

 

* 프로퍼티 값에 접근하는 방법

1. person.key1   (점표기법)

객체이름.프로퍼티명(key)

 

2. person["key1"]   (괄호표기법)

객체이름["프로퍼티명"]

프로퍼티명은 ""를 꼭 넣어주어야 한다 : ""를 빼고 넣으면 변수명으로 인식

 

person이라는 이름의 객체를 생성하고

name이 홍길동, age가 25인 데이터를 저장했다. (프로퍼티 저장)

그리고 name1이라는 변수를 선언하고 person의 key인 name을 저장한다.

 

콘솔에 person[name1]을 실행시키면, 홍길동이 출력된다.

 

-> 동적인 파라미터를 전달받는 상황에서 사용한다.

 

 

 

 

* 프로퍼티 추가하기

 

프로퍼티를 추가하려면

객체이름.프로퍼티명 = "키값";

객체이름["프로퍼티명"] = "키값";

이렇게 추가 할 수 있다.

 

 

 

* 프로퍼티 수정하기

 

프로퍼티를 수정하는 방법은 추가하는 방법과 동일하다.

객체이름.프로퍼티명 = "키값";

객체이름["프로퍼티명"] = "키값";

 

 

 

 

* 만약 예약어 let을 상수인 const로 바꿔서 변경한다면?

 

상수이기 때문에 프로퍼티를 추가/수정 하면 에러가 발생할 것 같지만 에러가 나지 않는다.

 

객체 내 프로퍼티 변경으로는 문제가 되지않고

 

이렇게 객체명을 입력하고 프로퍼티를 변경한다면 상수를 변경하는것으로 인식하여 에러가 발생한다.

 

즉, 객체를 상수로 선언했더라도 프로퍼티 추가/수정이 가능하다.

 

 

 

* 프로퍼티 삭제하기

 

 

 

 

* 객체의 메서드에서 멤버를 활용하여 출력하기

- 메서드 : 객체 내 함수. 메서드 명령문 내 console.log의 괄호 안에는 `(백틱)을 사용한다.

- 멤버 : 객체 내 멤버

 

 

name멤버의 값에 따라 say 메소드의 출력값도 변경을 하고 싶다면

name 프로퍼티명을 console.log안에 넣어주면 되는데

${this["name"]}

로 작성한다.

 

여기서 this는 자기 자신객체 즉, person을 말한다.

 

 

 

*  객체내 프로퍼티가 있는지 확인하기