자바스크립트 공부 1일차에 정리했던 Primitive Type의 자료형에 이어, Reference Type의 자료형에 대해 정리해 본다.

---

참조타입(Reference Type)

원시타입(Prmitive Type)처럼 데이터를 저장할 때 메모리에 값을 그대로 저장하지 않고 메모리 주소로 저장하여 출력 시에는 메모리 주소에 맞는 값을 출력하는 자료형으로 Object 타입의 자료들이 이에 속한다.

원시타입은 아래와 같이 변동된 b의 값이 그대로 저장되고 그것이 a에 영향을 미치지 않는 것을 볼 수 있다.

<script>

  const a = 15; 
  let b = a; 
  b = 36; 

  console.log(a);  // 출력값 15
  console.log(b);  // 출력값 36

</script>

그러나 참조타입을 보면 copy라는 변수가 smy 객체의 '메모리 주소'를 할당받게 되면서, copy와 smy가 서로 같은 메모리 주소를 갖게 되었고 copy의 height 값을 변경하면서 smy의 height 값도 동일하게 변경되었다.

<script>

  const smy = { name: 'smy', height: 130, age: 10  } 
  const copy = obj; 

  copy.height = 222; // copy의 b의 값을 222로 변경 

  console.log(smy.b); // 출력값 222

</script>

이처럼 원시타입과 참조타입은 데이터의 저장과 할당된 값을 처리하는데 있어서 차이가 발생한다.

---

Object

객체(Object)란 하나의 변수 안에 다양한 속성(Property)과 기능(method)을 담기 위해 사용하는 자료형의 하나이다. 예를 들어 스마트을 하나의 객체로 봤을 때 스마트폰의 길이, 너비, 색상 등은 속성에 해당하고 전원 켜고 끄기, 사진 촬영, 잠금해제 등은 기능이 되는 것이다.

객체 선언(Declaration)

객체를 선언하는 방법에는 두 가지 방법이 있다.

<script>
  const obj1 = { key : value };  // object literal syntax
  const obj2 = new Object();     // object constructor syntax
</script>

첫 번째 방법으로 보자면 변수와 그 안의 속성, 그리고 값을 명시하는 것이다.
사과의 종은 과일, 색은 빨간색, 맛은 달콤하다는 것으로 객체를 정리하였다.

<script>
  const 'apple' = {
    type: 'fruit',
    color: 'red',
    taste: 'sweet'
  }
</script>

두 번째 방법의 경우 클래스라고 하는 템플릿을 사용하여 정의하는 방법인데, 쉽게 말해 객체를 만드는 기본 틀을 가지고 만드는 것이다. 아래와 같이 Person이라는 객체의 틀을 만들고 smy이라는 객체를 Person을 활용하여 만들었다.

<script>
  // class 선언
  class Person {
    constructor(name, age){
    // property(field)
      this.name = name;
      this.age = age;
    }
  // function(method)
    greeting() {
      alert(`${this.name}님, 안녕하세요.`)
    }
  }

  const smy = new Person('smy',10);  
  // { name: 'smy', age: 10}을 속성으로 갖는 객체가 만들어 짐
  smy.greeting();
  // smy님, 안녕하세요. alert 호출됨
</script>

속성(Property)

:: 속성접근자(Property accessors)

점 표기법(dot notation)과 대괄호 표기법(square bracket notation)
으로 접근이 가능하다. 이 때, key값 전달 시 문자열 형태로 전달해야 한다는 점에 유의해야 한다.

<script>
  const person1 = {name: 'smy', age: 4};  
  console.log(person1.name);  // smy 출력
  console.log(person1['name']);  // smy 출력
</script>

두 가지 방식 중 점 표기법은 코딩하는 순간 해당 key의 value를 받아오고자 할 때 사용하고, 대괄호 표기법은 코딩 당시에는 어떤 key를 사용할지 알 수 없고 실시간(Run-time)에서 결정이 될 때 사용한다.

<script>

  const person1 = {name: 'smy', age: 4};  

  function print1(obj, key) {
    console.log(obj.key)  // obj에서 'key'라는 프로퍼티를 찾는 것이다.
  }
  console.log(person1.'name');  // undefined 출력

  function print2(obj, key) {
      console.log(obj[key]);
  }
  print2(person1, 'name');   // smy 출력
  
</script>

:: 속성 추가/삭제/변경

프로퍼티는 아래와 같이 중간에 추가, 삭제 및 변경이 가능하다. 다만, 코드가 복잡해 지고 유지,보수가 힘들어 질 수 있어 사용하지 않는 것이 바람직하다.

<script>

  const person1 = {name: 'smy', age: 4};  

  person1.height = 100;  //추가
  person1['weight'] = 15;  //추가
  delete person1.height;  // 삭제
  person1. age = 10;  // 변경
  
</script>

:: 속성 존재 확인(key in Object)

어떠한 속성이 객체 안에 있는지 확인하기 위하여 key in object를 사용한다.
확인하고자 하는 key값의 존재 여부를 boolean 값으로 출력한다.

<script>

  const person1 = {name: 'smy', age: 4};  

  console.log('name' in person1);  //true 출력
  console.log('age' in person1);  //true 출력
  console.log('something' in person1);  //false 출력 
  
</script>

:: 단축 속성명(Property shorthand)

쉽게 객체를 정의 할 때 key값과 value값이 같다면, 그 값을 각각 표기하지 않고 한 번만 표기하는 것이다.

<script>

  function makeFruits(color, size) {  
    return {
      color;  // color: color를 단축
      size;   // size: size를 단축
    }
  }
  
  const apple = makeFruits('red', 'small'); 
  
  console.log(apple);  // {color:'red', size: 'small'} 출력

</script>

생성자 함수(Constructor Function)

다른 기능 실현 없이 객체를 만들기 위하여 선언된 함수이다. new라는 키워드를 활용하여 객체를 생성한다.

<script>

  function Fruits(color, size) {  //생성자 함수의 함수명은 대문자로 시작
    // this가 빈 객체라는 의미의 this = {}; 생략
    this.color = color;
    this.size = size;
    // 생성된 객체를 반환하는 return this; 생략 
  }
  
  const banana = new Fruits('yellow', 'big');  // new 키워드 활용하여 객체 생성
  
  console.log(banana);  // {color:'yellow', size: 'big'} 출력

</script>

객체 반복문(Loop statment)

:: for・・・in

객체의 속성들을 반복하여 작업을 수행하는 것으로 객체의 모든 열거 가능한 속성에 대해 반복한다.

<script>
  const obj = {a: 1, b: 2, c: 3}
  for (let key in obj) {
    console.log(key);   // a b c 출력 
    console.log(obj[key]);  // 1 2 3 출력
  }
</script>

:: for・・・of

객체 멤버의 반복가능한 객체 (Array, Map, Set, String, TypedArray, arguments 등)에 대해서 반복하고 각 개별 속성값에 대해 실행되는 문이 있는 사용자 정의 반복 후크를 호출하는 루프를 생성한다.

<script>
  const greeting = "hello";
  for (let value of greeting) {
    console.log(value);  // h e l l o 출력   
  }
</script>

복제(Cloning)

어떠한 객체를 생성할 때 다른 객체의 key와 value를 그대로 가져오는 것이다. Object.assign method를 이용한다.

Object.assign(target, source1, source2 ・・・)

<script>
  const person1 = {age: 10, height: 100}
  const person2 = {age: 15, height: 130}

  const person3 = Object.assign({}, person1);  // person1 객체를 person3 객체에 복제

  console.log(person3);  // {age: 10, height: 100} 출력 

</script>

여러 객체의 소스를 복제한다면 아래와 같이 객체가 생성 된다.

<script>
  const person1 = {age: 10, height: 100}
  const person2 = {age: 11, grade: 4}

  const person3 = Object.assign({}, person1, person2);

  console.log(person3);  
  // {age: 11, height: 100, grade: 4} 출력 
  // 동일한 age의 value는 복제 시 나중에 작성한 person2의 값으로 저장 됨
</script>