[Javascript] 자바스크립트 참조타입(객체타입)

* 자바스크립트 참조 타입(객체타입)

자바 스크립트에서 숫자,문자열,불린값,null,undefined 같은 기본타입을 제외한 모든값은 객체다.

따라서 배열,함수,정규표현식 등도 모두 결국 자바스크립트 객체로 표현됨

자바스크립트에서 기본타입은 하나의 값만을 가지는데 비해, 참조타입인 객체는 여러 개의

프로퍼티들을 포함 할수 있으며, 이러한 객체의 프로퍼티는 기본 타입의 값을 포함하거나, 다른 객체를 가르킬수 있다.

( 쉽게말하면 기본타입은 변수에 값을 할당하면 알아서 하나의 데이터 타입으로 설정이되는데,

 객체 타입은 객체를 생성해서 그안에 string ,number등 여러 데이터타입 값을 추가할수 있고, 호출할수 있다)

 

* 객체 생성

자바에서는 클래스를 정의하고 , 클래스의 인스턴스를 생성하는 과정에서 객체가 만들어진다.

이에 비해 자바스크립트는 클래스라는 개념은 없고 객체를 생성하는 방법은 크게 세가지가 있다.

1. 기본 제공 Object() 객체 생성자 함수를 이용하는 방법

2. 객체 리터럴을 이용하는 방법

3. 생성자 함수를 이용하는 방법

 

* 객체 생성 ( Object() 생성자 함수 이용)

아래 코드는 Object() 생성자 함수를 이용해서 kim 이라는 빈 객체를 생성한후, 

몇가지 프로퍼티(name, age,gender)를 추가한것이다.

//Object()를 이용해서 kim 빈 객체 생성
var kim = new Object();
 
//kim 객체 프로퍼티 생성
kim.name = "kim";
kim.age = 30;
kim.gender = "male";
 
console.log(typeof kim); // 출력값 Object
console.log(kim); // 출력값 {name: "kim", age: 30, gender: "male"};
 

 

* 객체 생성 ( 리터럴 방식 이용)

리터럴 이란 용어의 의미는 표기법 이라 생각하면됨.

객체 리터럴 방식은 간단한 표기법 만으로 객체를 생성할수 있는 JS의 강력한 문법이다

객체 리터럴은 중괄호 {} 를 이용해서 객체를 생성한다.{} 안에 아무것도 없으면 빈객체 생성.

//객체 리터럴 방식으로 kim 객체 생성
var kim = {
  name: kim,
  age: 30,
  gender: "male",
};
 
console.log(typeof kim); //출력값 object
console.log(kim); // 출력값 {name: "kim", age: 30, gender: "male"};
 

 

*객체 생성 ( 생성자 함수 이용)

함수를 통해서도 객체를 생성할수 있다 . 나중에 글에서 작성한다.

 

*객체 프로퍼티 읽기/쓰기/갱신

객체는 새로운 값을 가진 프로퍼티를 생성하고, 생성된 프로퍼티에 접근해서

해당값을 읽거나, 또다른 원하는 값으로 프로퍼티의 값을 갱신할수 있다.

접근하려면 두가지 방법이 있다. 

1) 대괄호 [] 표기법

2) 마침표 . 표기법

//객체 리터럴 방식을 이용한 kim 객체 생성
var kim = {
  name: "kim",
  age: 25,
  major: "computer",
};
 
//객체 프로퍼티 읽기
console.log(kim.name); //출력값 kim;
console.log(kim.age); //출력값 25;
console.log(kim["major"]); //출력값 computer;
 
//객체 프로퍼티 갱신
kim.major = "computer updater";
console.log(kim.major); //출력값 computer updater;
console.log(kim["major"]); //출력값 computer updater;
 
//객체 프로퍼티 동적 생성
kim.phone = 1;
console.log(kim.phone); //출력값 1;
 
//대괄호 표기법만을 사용해야 할경우
kim["full-name"] = "kim tae";
console.log(kim["full-name"]); //출력값 kim tae;
console.log(kim.full - name); // 출력값 Nan
console.log(kim.full); // 출력값 undefined

 *프로퍼티 읽기

 객체의 프로퍼티 접근은 대괄호 표기법이나 마침표 표기법으로 가능

마침표 표기법은 객체 다음에 마침표를 찍고 원하는 속성을 적으면됨.

대괄호 표기법은 접근하려는 프로퍼티 이름을 문자열 형태로 만들어야함.

kim["name"] 대신 kim[name]이라고 접근하면 undefined 값이 출력됨

(JS에선 접근하려는 프로퍼티 이름을 문자열 형태로 만들지 않으면 모든 JS 객체에서 호출가능한

toString() 메서드를 자동 호출해서 이를 문자열로 바꾸려는 시도를함)

 

* 프로퍼티 갱신

 프로퍼티에 접근해서 객체의 기존 프로퍼티 값을 갱신할수도 있다.

 

* 프로퍼티 동적 생성

 자바스크립트 객체의 프로퍼티에 값을 할당할때, 프로퍼티가 이미 있을경우는 해당 프로퍼티의 값이

갱신되지만, 객체의 해당 프로퍼티가 없을경우에는 새로운 프로퍼티가 동적으로 생성된후 값이 할당됨.

 

*대괄호 표기법만을 사용해야 하는경우

일반적으로는 JS또한 다른언어와 비슷하게 마침표 표기법을 이용해서 객체의 프로퍼티에 접근하는방식을 이용함

가끔 대괄호 표기법을 써야할떄가 있는데, 프로퍼티가 표현식이거나, 예약어 일경우다

(위의 예제 같은경우에는 full-name 프로 퍼티경우는 ' - ' 연산자가 있는 표현식이라 대괄호 표기법을 사용해서 접근함.)

//Nan 값은 수치연산을 해서 정상적인 값을 얻지 못할때 출력되는 값( 1 - "hello"와 같은 연산결과는 Nan 임) 

 

* for in 문과 객체 프로퍼티 출력

for in 문을 사용하면, 객체에 포함된 모든 프로퍼티에 대해 루프를 수행 할수 있다.

// 객체 리터럴을 통한 ki 객체 생성
var kim = {
  name: "kim",
  age: 30,
  major: "computer",
};
 
//for in 문을 이용한 객체 프로퍼티 출력
var prop;
for (prop in kim) {
  console.log(prop, kim[prop]); //키와 벨류로 출력
}
 

 

* 객체 프로퍼티 삭제

자바 스크립트는 객체의 프로퍼티를 delete 연산자를 이용해 즉시 삭제할수 있다.

주의 할점은 delete 연산자는 객체의 프로퍼티를 삭제할뿐, 객체 자체는 삭제하지는 못한다.

/ 객체 리터럴을 통한 kim 객체 생성
var kim = {
  name: "kim",
  age: 30,
  major: "computer",
};
 
console.log(kim.name); // 출력 kim
delete kim.name;  // name 프로퍼티 삭제
console.log(kim.name); // 출력 undefined