Object literal (객체 리터럴)

 

webclub.tistory.com/390

const 오브젝트 = { key : value } ← property(key & value)

[객체 리터럴 사용방법]

OpenWindow라는 함수에 객체 리터럴을 이용해 options 객체를 구성, 함수를 호출하는 데 사용하는 인자를 전달하는 값으로 사용.

OpenWindow 함수 내부에서는 인자를 전달받는 options에서 "path", "windowName", "windowOption"속성이 있느지 체크한다. 없다면 각 기본값을 이용하게 된다. 객체 리터럴은 중첩된 표현도 가능하다. 아래는 obj 객체의 parent속성에 다른 객체를 할당하는 코드.

[객체 정의]

youtu.be/vrhIxBWSJ04

사용자 정의의 객체를 정의하기 위해 자바스크립트에서는 class라는 키워드 대신 function 을 사용합니다.
아래 코드는 함수와 다를게 없다. 실질적으로 함수의 function과 객체를 생성할 때의 function은 동일합니다

어떤 역할로 사용될 지는 주변 실행 환경, 즉 연산자에 따라 달라집니다. new와 함께 사용되면 메모리에 인스턴스를 생성하는 역할로 사용됩니다.new 없이 단순히 () 연산자를 사용해 Person('재희')과 같이 호출하면 일반 함수처럼 사용됩니다. 그래서 암묵적인 약속으로 프로그래밍계에서는 일반 함수는 소문자로 시작하고 생성자는 대문자로 시작하게 작성하도록 권장하고 있습니다.

 

[맴버 정의 및 추가]

자바스크립트에서는 멤버를 추가할 때 this를 사용합니다.

this.name = name;

만약 메서드를 정의하고자 한다면 익명 함수를 이용할 수 있습니다.

 

Person이라는 객체에 name, setNewName이 멤버로 추가가 되었고,

 

 

 

 

[객체 생성]

Person 생성자를 호출하는 구문은 다양하다.

'jaehee'는 Person 생성자의 초기값이다.

 

 

- this는 나 자신을 가르킨다. 객체를 독립적으로 사용하기 위해 key에 this를 붙혀준다.

- this를 통해 정의되는 멤버는 현재 생성되고 있는 객체의 공개 멤버로 정의됩니다.

- this로 정의된 멤버는 new로 생성되는 인스턴스별로 별도로 존재하게 됩니다.

- 그래서 이 글에서는 생성자 내부에서 this를 이용해 추가한 멤버는 "인스턴스 멤버"라고 표현하고 있습니다. 위에서 Person이라는 생성자 내부에서만 영향을 준다.

 

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer

[단축 프로퍼티(property value shorthand)]

[ES6 계산된 속성명]

** 대괄호 표기법은 프로퍼티 이름과 값의 제약을 없애주기 때문에 점 표기법보다 훨씬 강력합니다. 그런데 작성하기 번거롭다는 단점이 있습니다.

[전개속성(spread)]

[객체의 key와 value의 사용]

데이터는 Key와 Value로 이루어져 있다.

const 오브젝트 = { key : value }

const obj = { "egoing" : 10, "k8805" : 6, "soraialgi" : 80 };

 

[객체에서 key값에 접근 할 때(읽을 때)]

1. 점 표기법(dot notion): 오브젝트.키값

- obj.egoing

 

2. 대괄호 표기법: 오브젝트 [ "키값" ]

- obj[ "egoing" ]

키값이 문자열로, 보통 단어가 하나 이상일대 사용한다. (ex: "color egoing")

 

오브젝트의 key값을 업데이트(추가)하는 방법 : 

const obj = { name : "chanki" } // 먼저 오브젝트를 생성

obj.name = "eunki"; // 선언된 오브젝트의 key값에 접근해 새로운 value를 입력하면 된다.

 

오브젝트의 key값을 지우는 방법 : delet를 사용.

delete obj.name

 

[객체와 반목문]

이때 in 앞에는 오브젝트의 키값을 담을 새로운 변수(반복 변수looping variable)를 지정하고 in 뒤에는 오브젝트명을 쓴다. 반복 변수명은 자유롭게 정할 수 있습니다. 'for (let prop in obj)'같이 key 말고 다른 변수명을 사용해도 괜찮습니다.

console.log결과 : manager egoing / developer graphittie / designer leezche

객체의 반복문은 잘 사용하지 않는다. 객체와 배열을 혼합하여 사용할줄 아는게 더 중요!!

[for ...in 반복문]

for + in 구문을 활용해 오브젝트의 키값을 불러올 수 있다.

모든 객체의 프로퍼티를 알 수 있다. 반복 변수명은 자유롭게 정할 수 있습니다. 'for (let prop in obj)'같이 key 말고 다른 변수명을 사용해도 괜찮습니다.