해당 벨로그는 드림코딩의 자바스크립트 기초 강의 (ES5+) 7강을 보고 작성한 글입니다.

7강은 오브젝트에 대해서 배운다.

Objects? 란

primitive 데이터 타입은 변수 1개당 값을 1개만 가질 수 있다.

그래서 primitive 변수를 출력하는 함수를 만든다면 name, age 를 각각 파라미터로 전달해야 한다.

그리고 함수를 정의해서 사용할때도, 2가지 파라미터를 받아올 수 있도록 작성해야 한다. → (문제) 만약 address, full name, large name 등 인자가 더 많아지면, 추가해야 되는 것들이 굉장히 많아진다.

이런 것들을 개선하고자 오브젝트를 사용한다.

따로 관리하던 name, age 를 오브젝트 하나로 관리할 수 있어서 편리하다.

파라미터 전달시에도 오브젝트 하나만 전달할 수 있어서 좋다.

함수 호출 시에도 ellie 만 전달해도 되서 간편하다.

오브젝트 생성

방법 (2가지) → 1. object literal , 2. object constructor

1. object literal syntax

{}중괄호를 이용해 오브젝트를 생성한다.

2. object constructor syntax

클래스의 템플릿를 이용해 new 연산으로 오브젝트를 생성한다.

new 라는 키워드를 이용해 오브젝트를 생성하면 오브젝트 클래스에 정의된 constructor 가 호출된다.

⇒ 자바스크립트는 클래스가 없어도 {}중괄호를 이용해 오브젝트를 생성할 수 있다.

오브젝트 추가

⇒ 자바스크립트는 dynamically typed language(동적 타입 언어) 라서 즉, 타입이 런타임(프로그램이 동작하고 있을 때)에 결정되는 언어다.

그래서 뒤늦게 하나의 프로퍼티를 추가할 수 있다. 이미 name, age 오브젝트를 정의했지만, 그 뒤에 데이터를 추가할 수 있다. 이 사항은 다른 언어에서 흔한 일이 아니다.

이런 방식으로 동적인 코딩을 하게되면, 코딩 속도가 빨라지지만 후에 유지보수가 어렵다. 생각지 못한 에러가 발생할 수 있다. 가능하면 정의 후에 데이터를 추가하는 것은 지양하는 것을 권장한다.

오브젝트 삭제

※ 오브젝트는 key 와 value 의 집합체이다.

오브젝트는 프로퍼티가 가지고 있는 값(value) 과 우리가 접근할 수 있는 변수(key) 2가지로 나뉜다.

object[’key’]

Computed properites → 계산된 프로퍼티 ( 오브젝트[’key이름’] )

오브젝트 내부의 데이터에 접근할 때 → 오브젝트명.key이름 으로 접근한다.

다른 방법으로 오브젝트 데이터에 접근할 수 있다. → 오브젝트[’key이름’] 으로도 접근할 수 있다.

이때 key 이름은 반드시 string 타입으로 기입해야한다.

자바스크립트는 오브젝트에 접근할 수 있는 방법이 2가지인데 각각 사용하는 시점이 다른다.

점(.) → 우리가 코딩하는 그 순간 key 에 해당하는 값을 받아오고 싶을 때 점을 사용한다.

Computed properites( 오브젝트[’key이름’] ) → 정확하게 어떤 key 가 필요한지 모를 때, 즉 런타임에서 결정될 때 Computed properites 를 사용한다.

실시간으로 원하는 key 값을 받아오고 싶다면, Computed properites 를 사용하면 된다.

printValue 라는 함수가 있다. 이 함수는 obj 와 key 를 받아서 key 에 상응하는 value 를 출력하는 함수이다. 이 함수는 언제 어떤 key 를 받을 지 모른다.

원하는 key 를 사용자에게 input 받아서 출력해야 되는 함수라면, key 가 어떤 것을 출력할 지 코딩하는 시점에는 전혀 모른다.

그래서 obj.key 라고 하면 안되고 obj[key] 라고 출력해야된다. (key 는 항상 string 타입으로 전달해야된다.)

obj.key 출력시 undefined 가 출력된다. → obj 에 key 라는 프로퍼티가 들어있지 않다! 없다!

obj[key] 출력시 ellie 가 출력된다. → Computed properite 를 사용하면 정상적으로 출력된다.

Lovely shorthand

프로퍼티 value shorthand 에 대해서 알아보자.

key, value 의 이름이 동일하다면, 하나로 생략할 수 있다. → 이렇게 해도 오브젝트 생성이 가능

Constructor function

오브젝트를 필요할 때마다 만들게 되면, 동일한 key, value 를 반복해서 작성해야 된다는 문제점이 있다. 함수를 이용해 값만 전달해 주면 오브젝트를 만드는 유용한 함수 makePerson() 을 만들었다.

생각해보면 makePerson() 은 지난 시간에 만든 class 템플릿 같다.

자바스크립트 클래스 등장 이전에는 이런식으로 많이 작성되었다.

다른 기능을 제공하지 않고 순수하게 오브젝트 생성만 하는 함수들은 대문자로 함수가 시작하도록 만든다. 그리고 이전의 생성자처럼 this. 를 붙여 함수 내부를 구현한다.

함수 호출시에도 클래스 객체 생성처럼, 이런 식으로 오브젝트를 생성할 수 있다.

하단처럼하면, 자바스크립트 엔진이 알아서 오브젝트를 자동으로 생성해준다.

(여기서 생략된 것) 새로운 오브젝트를 만들어서(this = {};) , this 에 name, age 라는 새 프로퍼티를 넣고, 결국은 this 를 리턴하는 함수이다. → 이 함수를 constructor function 이라고 한다.

in operator

in 이라는 키워드를 이용해서 해당 오브젝트에 키가 있는지 없는지 확인한다.

간단하게 키가 없는지 확인할 수 있는 방법이다. → 존재하면 true, 존재안하면 false

정의하지 않은 키를 접근하면 undefined 가 출력된다.

for ..in, for ..of

• for..in

  in 이라는 키워드를 이용해서 ellie 가 가지고 있는 key들이 for문의 블럭을 돌때마다, key 라는 지역변수에 할당된다.

  

  key 를 출력하면, ellie 안에 있는 모든 key 들이 출력된다. → 3가지 key 출력 결과 확인

  모든 key 들을 받아와서 일을 처리하고 싶을 때 for..in 을 사용하면 좋다.
  

• for..of

  for..of 는 오브젝트가 아니라 배열과 같은 배열, 리스트 등 순차적으로 literable 한 곳에 사용한다.

  ( literable 이란 값을 차례대로 꺼낼 수 있는 객체라고 부른다. )

  array에 있는 모든 값들이 value에 할당되면서, 순차적으로 출력 or 값계산 가능하다.

  

Cloning

user 가 참조하는 reference 가 ellie, 20 을 가리킨다.

user2 에도 동일한 데이터가 할당되어, user2 의 reference 가 user의 reference 가 가리키는 곳을 동일하게 가리킨다.

만약 user2.name 을 coder 로 할당(변경) 하면 user.name 도 coder 로 변경된다.

오브젝트를 이런 방법 말고 그대로 복제하는 방법은 없을까? → 있다.

• 오브젝트 복제하기

  • 첫번째

    

    user 안에 있는 key 들을 순회하면서 → 첫번째 key 는 name 이 되고, 두번째 key 는 age 가 된다.

    user3에 새로운 프로퍼티 name 을 추가하는데, 값은 기존의 user 의 name 의 value 인 ellie 를 할당된다. → 이런 식으로 메뉴얼하게 오브젝트를 복사할 수 있다.
    
    

  • 두번째

    

    오브젝트의 assign 을 사용해서 오브젝트를 복제하기

    Object.assign() → 자바스크립트에 기본적으로 내장되어있는 오브젝트 중에 하나이다.

    자바스크립트의 모든 오브젝트는 오브젝트를 상속한다.

    새로운 함수나 api 를 보았을 때 윈도우의 경우 → ctrl + 함수클릭 → 기능확인 가능

    assign () → 복사하고자 하는 target 과 복사를 하려하는 source 를 전달하고, 리턴값은 target 과 source 가 통합된 값이 리턴된다.
    
    

    
    혹은 아래처럼 작성할 수 있다.
    

    오브젝트가 서로 혼합된 경우는 어떨까?

    

    뒤에 나오는 key 가 더 있을수록, 앞의 프로퍼티가 동일한 것이 있다면, 값을 계속 덮어씌운다.

    Object.assign({}, fruit1, fruit2); → fruit2 가 fruit1의 값을 본인의 프로퍼티로 덮어씌운다.

    만약 fruit3 이 color 값이 black 이라면, fruit2 의 값을 덮어씌워 색이 black 결과값이 출력된다.