[Javascript] 객체

참고
- https://poiemaweb.com/js-object
- https://soeunlee.medium.com/javascript%EC%97%90%EC%84%9C-%EC%99%9C-%ED%95%A8%EC%88%98%EA%B0%80-1%EA%B8%89-%EA%B0%9D%EC%B2%B4%EC%9D%BC%EA%B9%8C%EC%9A%94-cc6bd2a9ecac
- https://velog.io/@reveloper-1311/%EC%9D%BC%EA%B8%89-%EA%B0%9D%EC%B2%B4First-Class-Object%EB%9E%80

객체

- 키(key)와 값(value)으로 구성된 프로퍼티(property)들의 집합

- 자바스크립트의 함수는 일급 객체이므로 값으로 취급할 수 있다.

- 즉 프로퍼티 값으로 함수를 사용할 수 있고 프로퍼티 값이 함수일 경우 일반 함수와 구분하기 위해 메소드라고 부른다.

- 객체는 데이터를 의미하는 프로퍼티(property)와 데이터를 참조하고 조작할 수 있는 동작을 의미하는 메소드(method)로 구성된 집합이다.

 

일급 객체

다른 객체에서 연산(인자로 전달, 결과값으로 리턴, 변수에 할당)을 할수 있도록 지원하는 객체 

 

(조건)

1) 다른 객체에서 인자로 전달할 수 있다.

    var a = function(num) {
        return num
    }
    
    function add(number) {
        var sum = number+number;
        console.log(sum); // 6
    }
    
    add(a(3)) // a(num)함수를 add(number)함수의 인자로 사용

2. 변수에 할당할 수 있다.

    var a = function(num) {
        console.log(num)
    }

3. 다른 함수의 결과로 리턴될 수 있다.

    function add(numA) {
        return function (numB) {
            return numA + numB;
        }
    }
    console.log(add(2)(3)); // 5

 

객체 생성 방법

1. 객체 리터럴

- 중괄호({})를 사용하여 {}내에 프로퍼티를 추가해서 객체를 생성할 수 있고 {}내에 아무것도 기술하지 않으면 빈 객체가 생성된다. 

    var me = {
        name : 'Kim',
        age : 25,
        introduce : function() {
            console.log("my name is " + this.name);
        }
    }
    
    me.introduce() // my name is Kim

2. 생성자 함수

- 프로퍼티가 동일한 객체를 여러개 쉽게 생성할 수 있다.

- 생성자 함수 이름은 보통 대문자로 시작한다.(생성자 함수임을 표현하기 위해)

- 프로퍼티 or 메소드명 앞에 기술한 this는 생성자 함수가 만들 인스턴스(instance)를 가리킨다.

- this에 연결(바인딩)되어 있는 프로퍼티 및 메소드는 public(외부에서 참조 가능)하다.

- 생성자 함수 내에서 선언한 변수는 private(외부에서 참조 불가능)하다.(즉 생성자 함수 내부에서는 접근이 가능하나 외부에서는 접근 불가능)

    function student(name, age) {
        var check = true;
        this.name = name;
        this.age = age;
        console.log(check); // true
    }
    
    var a = new student('Kim', 25);
    console.log(a) // { name: 'Kim', age: 25 }
    console.log(a.check) // undefined

 

객체 프로퍼티 접근

1. 프로퍼티 키

- 프로퍼티 키는 문자열로 지정한다.

- 문자열 타입의 값으로 수렴하는 표현식도 가능하다.(단 따옴표('' or "")를 사용해야함)

- 자바스크립트에서 사용 가능한 이름인 경우 따옴표를 생략할 수 있지만 유효하지 않을 경우 반드시 따옴표를 사용해야한다.

    var like = {
        food-name : 'ramen', // 불가능  이유:SyntaxError: Unexpected token '-'
        'food-name' : 'ramen', // 가능
        
        food_name : 'rice', // 가능
    }

2. 프로퍼티 값 읽기

- 객체의 프로퍼티 값 접근 방법은 마침표(.) 표기법 과 대괄호[] 표기법이 있다.

- 프로퍼티 키가 유효한 자바스크립트 이름이고 예약어가 아닌 경우 (마침표, 대괄호)표기법 모두 사용 가능하다.

- 프로퍼티 키가 유효하지 않은 자바스크립트 이름이거나 예약어인 경우 대괄호 표기법으로 읽어야 하고

대괄호 내에 들어가는 프로퍼티 이름은 반드시 문자열이어야 한다.

var person = {
  'first-name': 'Ung-mo',
  'last-name': 'Lee',
  gender: 'male',
  1: 10
};

console.log(person);

console.log(person.first-name);    // NaN: undefined-undefined
console.log(person[first-name]);   // ReferenceError: first is not defined
console.log(person['first-name']); // 'Ung-mo'

console.log(person.gender);    // 'male'
console.log(person[gender]);   // ReferenceError: gender is not defined
console.log(person['gender']); // 'male'

console.log(person['1']); // 10
console.log(person[1]);   // 10 : person[1] -> person['1']
console.log(person.1);    // SyntaxError

3. 프로퍼티 삭제

- delete 연산자를 사용하면 객체의 프로퍼티를 삭제할 수 있다.(피연산자는 프로퍼티 키)

    var me = {
        name : 'Kim',
        age : 25,
    }
    
    console.log(me.age) // 25
    delete me.age;
    console.log(me.age) // undefined

4. for-in 문

- 객체에 포함된 모든 프로퍼티에 대해 루프를 수행할 수 있다.

- 단 for-in문은 배열에는 사용하지 않는 것이 좋다

• 배열은 순서를 보장하는 데이터 구조이지만 for-in문은 순서를 보장하지 않기 때문
• 배열 요소만을 순회하지 않는다.

var array = ['one', 'two'];
array.name = 'my array';

for (var index in array) {
  console.log(index + ': ' + array[index]);
}

/*
0: one
1: two
name: my array
*/