6. 객체

객체는 사전적인 정의로 실제 존재하는 것을 말한다.

사물과 같은 유형적인 것뿐만 아니라, 개념과 논리와 같은 무형적인 것들도 객체로 간주한다.

또한 객체 또는 오브젝트(Object)란 객체 지향 프로그래밍에서 클래스가 실제로 구현된 인스턴스를 말한다. 즉, 객체란 클래스를 인스턴스화한 것이다. 객체의 데이터 부분은 속성(property)으로 나타내고, 객체의 동작 부분은 메소드(method)를 사용하여 구현한다.

클래스(Class) : 객체 지향 프로그래밍에서 새로운 객체(Object)를 만들기 위한 템플릿을 말한다.

인스턴스(Instance) : 클래스(Class)에 소속된 개별적인 객체를 말한다. 하나의 클래스를 사용하여 유사한 성질을 가진 수많은 인스턴스를 생성할 수 있다.

예를 들어, 사용자(user)라는 클래스를 정의하고 홍길동(hong)이라는 객체를 생성할 경우, hong이라는 객체는 user라는 클래스의 인스턴스가 된다.

 

http://wiki.hash.kr/index.php/%EA%B0%9D%EC%B2%B4

객체 - 해시넷

 

1. 객체

자바스크립트에서 여러 자료를 다룰 때는 객체(Object)를 사용한다. 배열(Array)도 여러 자료를 다룰 수 있다. 그렇게 할 수 있는 이유는 배열도 객체이기 때문이다. 그렇다면 무엇이 다른가?

 

배열(Array)

인덱스(index)	요소(element)
0	사과
1	바나나
2	딸기
3	망고

배열은 인덱스와 요소로 이루어져있다. 인덱스는 순차적(0,1,2,3,....)이고 그에 대응하는 요소의 값으로 되어있으며, 각각의 요소를 사용하려면 다음처럼 배열 이름 뒤에 인덱스로 접근한다.

 

객체(Object)

키(Key)	속성(Property)
name	윤인성
hobby	노래부르기
what are you doing	취침중

다음은 객체를 선언하고 표기하는 것을 보여준다. 배열은 요소에 접근할 때 인덱스를 사용하지만, 객체는 키(Key)를 사용한다. 위의 배열과 비슷하다는 것을 알 수 있다. 객체의 요소에 접근하는 것도 배열과 비슷하다.

student['name'] 과 student.hobby 와 같이 객체의 요소에 접근하는 방법은

1. 객체 뒤에 대괄호를 사용하고 키를 입력
2. 객체 뒤에 온점(.)을 사용하여 키를 입력

두 가지 방법을 소개하고 있다. 그리고 선언시에 키값에 공백(" ")이 들어가지 않는 경우 따옴표를 사용하지 않아도 되지만, "what are you doing"과 같이 공백이 들어갈 경우 따옴표로 묶어주어야한다.

각 자료는 쉼표(,)로 연결해서 입력한다.

 

배열(Array)	객체(Object)
인덱스(index)	키(key)
요소(element)	속성(Property)

 

2. 메소드(method)

객체의 속성 중 함수 자료형인 속성을 특별히 메소드(method)라 부른다.

pet의 키 값 eat가 function임을 보여준다.

위의 사진에서는 eat() 메소드라 부른다.

메소드 내에서 자기 자신이 가진 속성을 출력하고 싶을 때는 자신이 가진 속성임을 분명하게 표시해야 한다. 자기 자신이 가진 속성이라는 것을 표시할 때는 this 키워드를 사용한다.

 

3. 객체 속성 추가/제거

객체를 처음 생성한 후에 속성을 추가하거나 제거하는 것을 '동적으로 속성을 추가한다' 또는 '동적으로 속성을 제거한다.' 고 표현한다.

객체 속성을 동적으로 추가/제거 하기

 

+ 더 알아보기) 화살표 함수를 사용한 메소드

function( ) { } 선언하는 익명 함수(a)와 ( ) => { } 형태로 선언하는 화살표 함수(b)는 객체의 메소드로 사용될 때 this 키워드를 다루는 방식이 다르다.

위의 사진과 같이 익명 함수 a의 this는 메소드가 속한 객체 test를 가리키고

                            화살표 함수 b의 this는 전역 객체(window 객체)를 가리킨다.

window 객체는 웹 브라우저 자체를 나타내는 '웹 브라우저에서 실행하는 자바스크립트의 핵심 객체'라고 생각하면 된다. 이처럼 메소드 내부에서 this 키워드를 사용할 때 의미가 달라지므로 화살표 함수를 메소드로 사용하지 않는 편이다.

 

추가로 문맥에 따라 달라지는 this의 값이 변하는 케이스를 가져와보았다.

1. global scope 에서 사용될 때 this 는 전역 객체를 가리킵니다.(window 객체)
2. 함수에서 사용될 때에도 this 는 전역 객체를 가리킵니다.
3. 객체에 속한 메소드에서 사용될 때 this 는 메소드가 속한 객체를 가리킵니다.
4. 객체에 속한 메소드의 내부함수에서 사용될 때 this 는 전역 객체를 가리킵니다.
5. 생성자에서 사용될 때 this 는 이 생성자로 인해 생성된 새로운 객체를 가리킵니다.

 

https://cloudingdata.tistory.com/77

자바스크립트에서의 this란

 

https://bohyeon-n.github.io/deploy/javascript/this.html

자바스크립트 this, bind 그리고 화살표 함수 | 구보현 블로그