[자바스립트(JavaScript )] 09. 객체 (Object)

🟡 1. 객체 (Object)

 - 자바스크립트는 객체 기반의 스크립트 언어이며 원시 타입을 제외한 모든 값들은 객체입니다. (그만큼 자바스크립트에서 객체는 매우 중요❗)

 - 객체는 키(key)와 값(value)으로 구성된 프로퍼티(property)들의 묶음입니다. 

 

- 프로퍼티의 값은 모든 타입이 들어갈 수 있습니다. 자바스크립트에서는 함수는 일급 객체이므로 값으로 취급할 수 있고, 프로퍼티의 값으로도 사용할 수 있습니다. 이때 함수는 일반 함수와 구분하기 위해서 메소드라고 부릅니다. (객체 안에 있는 함수는 메소드) 

let person = {
	// 메소드
	sayHello = function(){
    	console.log('Hello');
    }
}
// 객체의 메소드 호출
person.sayHello(); // 'Hello'


// 함수
let hi = function(){
	console.log('Hi');
}
// 함수 호출
hi(); // 'Hi'

 

 - 자바스크립트의 객체는 객체지향의 상속을 구현하기 위해 "프로토타입(prototype)"이라고 불리는 객체의 프로퍼티와 메소드를 상속받을 수 있습니다. 객체를 생성하면 자동적으로 할당되어 있습니다.

object의 prototype

 

 

🟡 2. 객체 생성 방법

 - 객체를 생성하는 방법은 3가지 방법이 있습니다.

 

 🟣 2.1 객체 리터럴

 - 가장 일반적인 방법으로, 변수에 빈 중괄호를 할당하는 것입니다.

let obj = {};
console.log(typeof(obj)); // "object"
console.log(obj); // {}


//빈 객체에 프로퍼티 생성 및 할당
obj.a = 1;
console.log(obj); // {a : 1}
obj.b = 2;
console.log(obj); // {a : 1, b : 2}

 

 

 🟣 2.2 Object 생성자 함수

 - new 연산자와 Object 생성자 함수를 호출하여 빈 객체를 생성할 수 있습니다. 
 - 생성자(contructor) 함수란 new 키워드와 함께 객체를 생성하고 초기화하는 함수를 말합니다. 생성자 함수를 통해 생성된 객체를 인스턴스(instance)라 합니다. 

let obj = new Object();

console.log(typeof(obj)); //"object"
console.log(obj); //{}

// 빈 객체에 프로퍼티 추가
obj.name = 'bigone';
obj.age = 30;

console.log(obj); // {name : 'bigone', age : 30}

 - 객체 리터럴 방식(2.1방식)과 Object 생성자 함수(2.2방식)를 통해 객체를 만드는 방법은 같은 방법입니다. 객체 리터럴 방식으로 객체 생성을 지정해 놓으면 자바스크립트 엔진 내부에서 Object 생성자 함수를 호출해서 새로운 객체를 만듭니다. 결국 객체 리터럴 방식 ({})은 Object 생성자 함수를 축약 표현한 것입니다.

 

 🟣 2.3 생성자 함수

 - 동일한 프로퍼티를 갖는 객체를 생성할 때 유용하게 사용되는 방법입니다.

// 생성자 함수
function Dog(name, dog_breed, age){
	this.name = name;
    this.dog_breed = dog_breed,
    this.age = age;
    this.bark = function(){
    	console.log('왈왈!');
    }
}

// 인스턴스 생성
let Dog1 = new Dog('슈니','요크셔 테리어',3);
let Dog2 = new Dog('꾸기', '폼피츠', 1);


console.log(Dog1); // Dog {name: '슈니', dog_breed: '요크셔 테리어', age: 3, bark: ƒ}
console.log(Dog2); // Dog {name: '꾸기', dog_breed: '폼피츠', age: 1, bark: ƒ}

Dog1.bark() // '왈왈!';
Dog2.bark() // '왈왈!';

• 생성자 함수 이름은 일반적으로 대문자로 시작합니다. 생성자 함수임을 알려주는 약속이라고 할 수 있습니다.
• this는 생성자 함수가 생성할 인스턴스를 가리킵니다.
• this에 연결(바인딩)되어 있는 프로퍼티와 메소드는 외부에서 참조, 사용이 가능합니다.
• this에 연결되어 있지 않은 생성자 안에 변수들은 외부에서 참조, 사용이 불가능합니다.
   

// 생성자 함수
function Dog(name, dog_breed, age){
    this.name = name;
    this.dog_breed = dog_breed,
    this.age = age;
    this.bark = function(){
    	console.log('왈왈!');
    }
    let eat = '간식먹기';
}


let dog1 = new Dog('꾸기', '폼피츠', 1);


// this로 연결한 프로퍼티
console.log(dog1.name); // '꾸기'
// Dog 생성자 안에서만 쓰는 변수
console.log(dog1.eat);// undefined

 - name이라는 프로퍼티는 this에 연결되어 있으므로 외부에서 사용이 가능하지만, eat라는 프로퍼티는 this에 연결이 되어 있지 않으므로 외부에서 사용이 불가능합니다.

 

 

🟡 3. 프로퍼티

- 프로퍼티란 객체에 들어있는 키(key)-값(value)을 한 쌍으로 이루어진 변수를 의미합니다. 

 

 🟣 3.1 프로퍼티 키

 - 프로퍼티 키는 일반적으로 문자열(빈 문자열 포함)을 지정합니다. 프로퍼티 키에 문자열이나 symbol 값 이외의 값을 지정하면 암묵적으로 문자열로 변환됩니다. 

 - 프로퍼티 키는 문자열이므로 따옴표('', "")를 사용합니다. 다만 자바스크립에서 사용 가능한 유효한 이름인 경우에는 따옴표를 생략할 수 있습니다. 반대로 사용 가능하지 않는 이름인 경우 따옴표를 반드시 사용해야 합니다.

 

let user = {
	id : 'bigone',
    'first-name' : '길동', // 따옴표가 없으면 first - name 으로 인식을 하기 때문에 유효한 이름이 아님
    'last-name' : '홍',
    gender : 'male',
    function : 10 // 사용이 가능하지만 예약어는 사용하지 않는 것이 좋다 (예약어 : function, for, if ...)
}

- 위 코드를 보면 firt-name과 last-name은 따옴표가 사용된 것을 볼 수 있습니다. 그 이유는 따옴표가 없는 경우에는 first - name 즉, 문자열 -(산술연산자) 문자열로 인식하기 때문에 오류가 발생합니다.

- 예약어를 사용했을 때 에러가 발생하지는 않지만, 나중에 어떠한 에러가 발생할 수도 있고 개발에 혼란이 올 수 있으므로 사용하지 않는 것이 좋습니다.

// 자바스크립트에서 사용되는 예약어
abstract  arguments 
boolean   break 
byte	case  
catch  char  
class  const
continue  debugger  
default delete  do
double  else  enum 
eval  export  extends 
false final finally 
float  for function 
goto  if  implements
import in  instanceof  
int interface  let 
long  native  new null
package private protected 
public  return  short static  
super  switch  synchronized
this  throw throws  transient 
true  try typeof  var void  
volatile  while with  yield

 

 

 🟣 3.2 프로퍼티 값 읽기

 - 객체의 프로퍼티 값에 접근하기 위해서는 프로퍼티의 키를 이용합니다. 그리고 마침표(.) 표기법과 대괄호([]) 표기법을 사용합니다.

let user = {
    id : 'bigone',
    'first-name' : '길동',
    'last-name' : '홍',
    gender : 'male',
    1 : 10
}


console.log(user.id) // 'bigone'
console.log(user[id]) // id is not defined - 에러 발생
console.log(user['id']) // 'bigone'


console.log(user.first-name) // NaN - 에러 발생
console.log(user[first-name]) // first is not defined - 에러 발생
console.log(user['fist-name']) // '길동'


console.log(user.1) //after argument list - 에러 발생
console.log(user[1]) // 10 - 암묵적 타입 변환 1 -> '1'
console.log(user['1']) // 10


console.log(user.name) // undefined - 객체에 없는 프로퍼티 호출시 undefined 반환

 - 프로퍼티 키가 유효한 자바스크립트 이름이고 예약어가 아닌 경우 마침표, 대괄호 표기법으로 값을 가져올 수 있습니다. (id, gender)

 - 프로퍼티 키가 유효한 자바스크립트 이름이 아니거나 예약어인 경우 프로퍼티 값은 대괄호 표기법으로 값을 가져와야 합니다. 대괄호 안에 이름은 무조건 문자열이어야 합니다. (first-name, last-name, 1)

 

 

🟣 3.3 프로퍼티 값 갱신

let user = {
    id : 'bigone',
    'first-name' : '길동',
    'last-name' : '홍',
    gender : 'male',
    1 : 10
}

console.log(user); // {1: 10, id: 'bigone', first-name: '길동', last-name: '홍', gender: 'male'}

user.id = 'smallone';
user['last-name'] = '김';

console.log(user); // {1: 10, id: 'smallone', first-name: '길동', last-name: '김', gender: 'male'}

 - 프로퍼티 값을 호출해서 새로운 값을 할당하면 갱신됩니다.

 

🟣  3.4 프로퍼티 동적 생성

let user = {
    id : 'bigone',
    'first-name' : '길동',
    'last-name' : '홍',
    gender : 'male',
    1 : 10
}

console.log(user); // {1: 10, id: 'bigone', first-name: '길동', last-name: '홍', gender: 'male'}

// user에 age라는 프로퍼티 동적 생성
user.age = 30;

console.log(user); // {1: 10, id: 'bigone', first-name: '길동', last-name: '홍', gender: 'male', age: 30}

 

 

🟣 3.5 프로퍼티 삭제

let user = {
    id : 'bigone',
    'first-name' : '길동',
    'last-name' : '홍',
    gender : 'male',
    1 : 10
}

console.log(user); // {1: 10, id: 'bigone', first-name: '길동', last-name: '홍', gender: 'male'}

// 1, gender라는 프로퍼티 삭제
delete user['1'];
delete user.gender;

console.log(user); // {id: 'bigone', first-name: '길동', last-name: '홍'}

- delete 연산자를 사용하여 프로퍼티를 삭제할 수 있습니다.

 

 

📝 정리 

• 객체는 프로퍼티들의 묶음이다.
• 프로퍼티는 키(key)-값(value)이 한 쌍을 이루는 변수이다.
• 프로퍼티 키는 문자열이어야 한다.
• 프로퍼티 값은 자바스크립트에서 사용할 수 있는 모든 데이터 타입을 사용할 수 있다.
• 프로퍼티 값 호출은 마침표(.) 표기법과 대괄호([]) 표기법이 있다.
• 대괄호 표기법에서 대괄호 안에는 무조건 문자열이 들어와야 한다.
• 프로퍼티 값 변경은 프로퍼티 값을 호출 후 새로운 값을 할당해주면 된다.
• 프로퍼티 동적 생성은 객체. 새로운 프로퍼티 = 값으로 만들면 된다.
• 프로퍼티 삭제는 delete 연산자를 사용해서 삭제하면 된다.

 

 

긴 글 읽어주셔서 감사합니다 :) 
틀린 내용이 있거나, 덧붙일 내용이 있다면 언제든지 댓글 달아주세요!
제 글이 조금이나마 읽으신 분들에게 도움이 되도록 노력하겠습니다
다음 편에 봬요~