[javascript] 객체( Object )와 생성자 함수

Javascript의 객체

1) prototype 기반의 언어

java와 c++은 클래스(class) 기반의 객체지향 언어인 반면, javacript는 prototype기반의 객체지향 언어입니다.

class 기반의 객체지향 언어는 class라는 껍데기를 정의하고 이를 통해 객체를 생성합니다.

그러나 prototype 기반의 객체지향 언어는 class 정의 없이도 객체를 생성할 수 있습니다.

( 생성자 함수를 통해 class를 따라할 수 있으며, ES6부터는 Class가 추가되었습니다. )

2) 캡슐화와 상속 지원

객체지향 프로그래밍에서 중요한 특징 중 하나는 캡슐화와 상속이라는 개념입니다.

javascript는 class가 없어도 캡슐화와 상속을 지원합니다.

캡슐화는 클로저를 통해, 캡슐화는 Prototype을 통해 가능합니다.

( 클로저에 대한 내용은 여기를, Prototype에 대한 내용은 여기를 참고해주세요 ! )

3) 프로퍼티와 값의 모임

javascript에서 객체는 { }라는 울타리 안에서 프로퍼티와 값을 쌍으로 하는 집합의 모임입니다.

이제부터 나올 예제들을 보면서 살펴보도록 하겠습니다.

객체 생성 방법

1) 리터럴

가장 일반적인 방법은 중괄호{ } 를 사용하여 객체를 생성하는 방법입니다.

예제

1 2 3 4 5

var person = {   name: "victolee",   email: "asdf@example.com",   birth: "0225" }

위와 같이 정의한 person은 name, email, brith 프로퍼티를 갖고 있고, 각 프로퍼티는 값을 갖고 있습니다.

객체를 정의할 때는 중괄호{ } 안에 프로퍼티 : 값의 쌍을 입력하고 쉼표(,)로 프로퍼티를 구분합니다.

프로퍼티와 값의 구분은 콜론 ( : ), 프로퍼티&값 쌍의 구분은 쉼표 ( , )로 합니다.

( 프로퍼티와 값의 구분은 =이 아닙니다 ! )

2) Object() 생성자 함수

new 키워드를 이용하여 Object 생성자 함수를 호출하면 빈 객체를 얻을 수 있습니다.

예제

1 2 3 4 5 6 7 8 9 10 11

var person = new Object(); console.log(person.name) console.log(person.email) console.log(person.birth)   person.name = "victolee"; person.email = "asdf@example.com"; person.birth = "0225"; console.log(person.name) console.log(person.email) console.log(person.birth)

new Object()를 호출하면 비어있는 객체를 생성합니다.

따라서 name, email, birth 프로퍼티를 갖고 있지 않습니다.

비어있는 객체는 의미가 없으므로, new Object()로 비어있는 객체를 생성했으면 프로퍼티를 추가해줘야 합니다.

3) 생성자 함수

생성자 함수를 사용하면 java나 c++의 class 개념처럼 껍데기를 만들 수 있습니다.

기존 함수에 new 연산자를 붙여서 호출하면 해당 함수는 생성자 함수로 동작합니다.

그런데 일반적인 함수인지, 객체를 만들기 위한 목적의 생성자 함수인지 구분하기 위해 생성자 함수의 첫 문자는 대문자로 표기하는 것이 관례입니다.

예제

1 2 3 4 5 6 7 8 9 10 11

function Person(name,email){   this.name = name;   this.email = email;   this.walk = "직립 보행" }   var person1 = new Person("victolee", "foo@example.com"); var person2 = new Person("worrr", "goo@example.com");   console.log(person1.name + " " + person1.email + " " + person1.walk); console.log(person2.name + " " + person2.email + " " + person2.walk);

리터럴과 Obejct()로 객체를 생성하는 것과 달리, 생성자 함수를 통해 객체를 생성하면 같은 속성을 가진 객체를 여러 개 생성할 수 있습니다.

즉 person1과 person2 객체는 name, email, walk 프로퍼티를 갖게 됩니다.

또한 생성자 함수에서 정의한 this는 생성자 함수로 생성된 인스턴스가 됩니다.

사실 생성자 함수로 인스턴스를 생성하기 전에 먼저 비어있는 객체를 생성합니다.

this는 이 비어있는 객체를 가리키고, 그 객체에 name, email, walk 프로퍼티를 추가한 것입니다.

생성자 함수에 반환 값이 없으면 비어있는 객체에 새로운 프로퍼티를 추가한 this가 반환됩니다.

( 조금 더 구체적인 내용을 원하시면 여기를 참고하셔서 Prototype에 대해 이해해보세요 ! )

일반 함수와 생성자 함수의 차이점은 new 연산자를 붙이느냐의 차이입니다.

생성자 함수인데 new를 붙이지 않는다면 오류를 발생하겠죠.

이러한 경우를 대비해서 생성자 함수를 호출할 경우 새로운 객체를 만들도록 분기문을 작성하곤 합니다.

1 2 3 4 5 6 7 8 9 10 11 12

function foo(arg){   if(!(this instanceof foo)){     return new foo(arg);   }   this.value = arg ? arg : -99; }   let a = new foo(10); let b = foo(100);   console.log(a); console.log(b);

변수 b의 경우 생성자 함수 foo를 호출하려 했지만 new 연산자를 붙이지 않은 경우입니다.

즉 foo()함수를 호출했으므로 this는 전역 객체가 될 것이고, 전역 객체는 foo의 인스턴스가 아니므로 생성자 함수를 호출하도록 new foo(arg)를 호출하도록 작성한 코드입니다.

객체의 프로퍼티 작성, 호출 방법

이전 예제들을 보시면서 객체의 프로퍼티를 작성하는 방법과 호출하는 방법에 대해 자연스럽게 배우셨습니다.

객체의 프로퍼티를 정의할 때는 중괄호{ }내에서 프로퍼티를 작성하면 되고, 호출하는 방법은 객체.프로퍼티를 하시면 됩니다.

그런데 객체의 프로퍼티를 작성 할 때의 유의사항과 호출할 때 다른 방식이 있어서 말씀드리려고 합니다.

1) 프로퍼티 작성시 유의사항

프로퍼티를 정의할 때 작성한 이름은 자동으로 문자열로 취급됩니다.

1 2 3 4 5 6 7 8 9

var person = {   "name" : "victolee",   "email" : "foo@example.com" }   var person = {   name : "victolee",   email : "foo@example.com" }

위의 두 객체 선언 방식은 완전히 동일합니다.

javascript에서 정의한 예약어를 프로퍼티로 사용할 수 있습니다.

예약어를 굳이 바꾸는 것은 별로 좋은 방식은 아니지만 " "을 이용하여 프로퍼티를 선언한다면 바꿀 수 있습니다.

그래서 저는 주로 " "을 사용하지 않는 편입니다.

2) 객체의 프로퍼티 이름으로 변수를 사용

1 2 3 4 5 6 7

let foo = "name" var person = {   [foo] : "victolee",   "email" : "foo@example.com" }   console.log(person.name)

프로퍼티 이름에 대괄호[ ]로 덮어주면 변수로 프로퍼티 이름을 작성할 수 있습니다.

3) 또 다른 프로퍼티 호출 방법

1 2 3 4 5 6 7

var person = {   name: "victolee" }   console.log(person.name) console.log(person["name"])   // victolee console.log(person[name])     // undefined

보시는 바와 같이 대괄호 [ ]를 사용하여 프로퍼티를 호출 할 수 있습니다.

이 때 대괄호안에는 무조건 문자열이여야 합니다.

그런데 가끔 대괄호에 문자열이 아닌 변수를 넣을 수도 있습니다.

1 2 3 4 5 6 7 8 9

var person = {   foo : "name",   name: "victolee" }   console.log(person["name"])   var nameVar = person.foo console.log(person[nameVar])

person.foo는 문자열인 name을 반환합니다.

name이라는 문자열은 변수 nameVar에 할당되고, person의 속성을 호출하는데 사용됩니다.

어떤 프로퍼티를 호출해야 할지 동적으로 결정해야 할 때 변수에 할당하기도 하므로 기억하두셔야 할 부분입니다.

이상으로 javascript에서의 객체에 대해 알아보았습니다.

ref : http://victorydntmd.tistory.com/51

ref : https://blog.naver.com/matzip84/221304426187