[JS Deep Dive] 10장 -객체리터럴

 

1. 객체란 ?

• 자바스크립트를 구성하는 거의 모든 것이 객체이다 .
• 즉 원시값을 제외한 나머지값(함수, 배열, 정규 표현식 등)은 모두 객체이다.
• 원시값은 변경불가능한 값이지만 객체타입의 값은 변경가능한 값이다. 
• 객체는 0개 이상의 프로퍼티로 구성된 집합이다.

 

 

이미지 출처 :https://velog.io/@5o_hyun/%EA%B0%9D%EC%B2%B4-%EB%A6%AC%ED%84%B0%EB%9F%B4

 

 

 

🤔 그렇담 프로퍼티가 무엇이지 ?

2. 프로퍼티란? 

• 프로퍼티는 객체의 속성이나 특징을 나타내는 요소이다.
• 자바스크립트에서 객체는 여러가지 데이터나 기능을 하나로 묶어 표현하는데
• 이 객체 안에 담긴 각각의 데이터를 프로퍼티라고한다.

 

• 객체 내부에 키(key) 와 값(Value) 의 쌍으로 존재하는데
• 이 키와 값 쌍을 통해 객체는 자신의 상태나 특징을 나타내고 그 상태에 따라 동작할 수 있다. 
  
  조금 더 이해가 잘되게 예시를 들어보자!
  
  우리가 만약에 자동차라는 객체가 있다고 가정해보자. 
  자동차는 색상, 모델, 속도 등 여러가지 특징을 가질 수 있다..
  이 각각의 특징을 객체의 프로퍼티로 표현할 수 있다. 
  자동차(객체)
  -자동차의 색상: 하얀색
  -쟈동차의 모델: 테슬라

 

-> 이런 식으로 자동차의 정보를 설명할 수 있는데
이런식으로 프로퍼티는 객체의 특징(속성)을 정의하고 어떤 정보를 가지고 있는지 나타내는 역할을 하는 것이다.

 

var person = {
	name: "hihilong",
    age:30, 
}


// -> 프로퍼티를 나열할 때에는 쉼표로 구분한다.
// -> 마지막 프로퍼티 뒤에는 쉼표를 사용하지 않으나 사용해도 무관

2-1. 프로퍼티의 네이밍 규칙

프로퍼티 키는 프로퍼티 값에 접근할 수 있는 이름으로서 식별자 역할을 한다.

하지만 반드시 식별자 네이밍 규칙을 따라야 하는 것은 아니지만 식별자 네이밍 규칙을 따르지 않으려면 반드시 따옴표를 사용해야한다.

var person ={
	firstName: "hihilong", 		// 식별자규칙따름
    'last-name':'kim',			// 식별자규칙따르지않아서 따옴표 적어줌
};

console.log(person);
// firstName: "hihilong", last-name"kim"

 

 

 

2-2. 프로퍼티의 특징

• 문자열이나 심벌 값 외의 값을 사용하면 암묵적 타입 변환을 통해 문자열이 된다.
• 프로퍼티 키로 숫자 리터럴을 사용하면 따옴표는 붙지 않지만 내부적으로는 문자열로 변환됨
• 빈 문자열도 프로퍼티로 사용할 수 있음
• var, function 과 같은 예약어도 프로퍼티 키로 사용해도 에러발생하지 않지만 -> 권장하진않음
• 이미 존재하는 프로퍼티 키를 중복 선언하면 나중에 선언한 프로퍼티 키가 먼저 선언한 프로퍼티를 덮어쓴다. -> 에러 발생하지 않음 

 

var hihilong = {
	"":"";
};

// 빈문자열도 프로퍼티로 가질 수 있음

var myName = {
	name:"hihilong",
    name:"byebyelong",
};

console.log(myName); // {name:byebyelong"}
// 나중에 선언한 프로퍼티가 덮어씀

 

 

또한 프로퍼티 값이 함수일경우 메서드라고 부른다. 메서드란 무엇일까? ? 

3. 메서드(method) 

-객체에 속한 함수를 말한다.

-메서드는 객체가 수행할 수 있는 동작이나 기능을 정의한 것이다.

=? 쉽게 말해, 객체의 행동을 나타내는 함수를 메서드라고 부른다.

 

🤔 즉 객체의 프로퍼티가 단순히 객체가 가지고 있는 정보, 데이터(숫자, 문자열)등을 나타낸다면 메서드는 그 객체가 할 수 있는 일을 정의한다. 

아까 말한 자동차의 예시를 다시 들어보자
자동차는 객체이고
자동차의 정보를 나타내는 것들은 프로퍼티,
그 자동차가 움직이도록 하는 엔진은 메서드라고 정의할 수 있는 것이다.

 

 

 

이미지 출처: https://velog.io/@kjh10555/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%9D%EC%B2%B4-%EC%A7%80%ED%96%A5%EC%9D%B4%EB%9E%80

 

var counter = {					// 	프로퍼티
	increase:function() {		//  여기 정의하는거 다 메서드
    	this.num ++;
    }
};

 

4. 객체리터럴에 의한 객체 생성

프로토타입 기반 객체지향 언어이기 때문에 *클래스 기반 객체지향 언어와는 달리 다양한 객체 생성 방법을 지원한다.

-> 객체리터럴, obejct 생성자 함수, 생성자 함수, object.create 메서, 클래스 등이 있다.

 

 

* 클래스기반 객체지향언어와 프로토타입기반 객체지향 언어 ?

*클래스기반 객체지향에서의 객체는 클래스를 바탕으로 생성되며 상속은 클래스 상속 구조를 따른다.
객체는 클래스를 통해 정의된 구조에 따라 생성되고 상속과 확장은 클래스를 통해 이루어진다.
c++ 이나 자바

*프로토타입 기반 객체지향 에서의 객체는 다른 객체(프로토타입)을 복사하여 생성된다. 상속은 프로토타입 체인을 통해 이루어지며 클래스를 사용하지 않고도 객체의 속성 및 메서드를 상속받을 수 있다. 

 

 

클래스 기반 객체 생성

// 자바
class Person {
    String name = "hihilong";

    void sayHello() {
        System.out.println("hello! my name is " + name + ".");
    }
}

public class Main {
    public static void main(String[] args) {
        Person person = new Person();
        
        System.out.println(person.getClass().getSimpleName()); // Person
        System.out.println(person);  // 객체의 메모리 주소가 출력됨

        person.sayHello(); 
        // "hello! my name is hihilong." 출력
    }
}​

 

Java에서는 Person 클래스를 정의하고, 그 클래스로부터 객체를 생성한다.

 

 

객체 리터럴이 가장 간단하고 쉬운 방법!

중괄호 { ... } 내에 0개 이상의 프로퍼티를 정의한다.

변수에 할당되는 시점에 자바스크립트 엔진은 객체 리터럴을 해석해 객체를 생성한다.

 

 

var person  {
	name:"hihilong",
    sayHello: function () {
    	console.log(`hello! my name is ${this.name}.`)
    }
    
};

console.log(typeof person); //object
consol.log(person);  //name: "hihilong, sayhello:f

 

-> 이렇게 하면 person 이라는 객체가 생긴것이다. 

-> 우리는 객체를 생성하기 위에 클래스를 먼저 만들고 new 연산자와 함께 생성자를 호출할 필요가 없다.

숫자값이나 문자열을 만드는 것과 유사하게 리터럴로 객체를 생성한다.

 

 

5. 프로퍼티에 접근하기

- 마침표 프로퍼티 접근연산자(.) 를 사용하는 마침표 표기법
- 대괄호 프로퍼티 접근연산자 [...] 를 사용하는 대괄호 표기법

-=>대괄호로 접근 연산자 내부에 지정하는 프로퍼티 키는 반드시 따옴표 로 감싼 문자열이여야 함
=> 안그러면 식별자로 해석해버림...

 

 

var food = {
	name:"chicken",
}

console.log(food.name); // 마침표로 프로퍼티 접근
console.log(food['name']) // 대괄호로 접근

 

 

 

그렇다면 만약에 설정하지 않은 프로퍼티에  접근을 하면 어떻게 될까 ? 에러가 날까 ? ? 

정답은 ... undefined 로 반환한다.는 것이다.

 

var person ={
	name:"hihilong",
};

console.log(person.age)
// undefined

 

참 신기한 일이다... reference error 가 날 줄 알았는데 ... undefined 라니 으허허 신기하담

이것은 !!! 프로퍼티의 동적 생성의 특징 때문이다 ! 

 

6. 프로퍼티의 동적 생성

• 객체가 생성된 이후에 새로운 프로퍼티를 추가하거나 기존 프로퍼티를 수정하는 것을 의미한다.
• 자바스크립트는 매우 유연한 언어로, 런타임 시점에 객체의 구조를 변경할 수 있는 기능을 제공하기 때문에 객체를 유연하게 조작할 수 있는 것이다. 
• 따라서 존재하지 않는 프로퍼티에 값을 할당하면 프로퍼티가 동적으로 생성되어 추가되고 프로퍼티 값이 할당된다. 
• 또한 존재하지 않는 프로퍼티를 delete 로 지우려고 해도 에러가 나지 않는다. 

 

 

var person ={
	name:"hihilong"
};

person.age = 30;
// 이렇게 해도 프로퍼티가 생성이 됨...

console.log(person) // {name:"hihilong", age:30}