자바스크립트(JavaScript) 객체 기초(객체 생성, 접근 방법, 프로퍼티 추가/삭제)

객체 기초(객체 생성, 접근 방법, 프로퍼티 추가/삭제)

JavaScript의 객체는 이름과 값을 한 쌍으로 묶은 데이터를 여러개 모은 것

var abc = {
    a:"a",
    b:"b",
    c:"c"
}

객체에 포함된 이름과 값을 프로퍼티(Property)라고 하며 프로퍼티의 이름을 키(Key) 값은 똑같이 값(Value)라고 합니다.

객체 리터럴을 이용해 객체 생성

자바스크립트에서 객체를 생성하는 방법은 두 가지가 있습니다.

1. 객체 리터럴을 이용
2. 객체 생성자를 이용

-객체 리터럴을 이용해 객체 생성

객체의 리터럴은 { }로 표현하여 생성할 수 있습니다.

var abc = {
    a:"a",
    b:"b",
    c:"c"
}

abc 변수에 리터럴을 이용해 객체를 대입했습니다. 프로퍼티는 키와 값으로 이루어져있습니다.

프로퍼티로는 a, b, c가 있고 객체의 값은 어떤것이 들어와도 상관이 없고 각 프로퍼티는 ,(쉼표)를 이용해 구분합니다.

-객체 생성자를 이용해 객체 생성

생성자를 이용하는 방법은 함수를 이용합니다. 객체의 프로퍼티는 this를 붙여 선언합니다. ES6에서 추가된 클래스를 사용하는 방법도 있습니다.

function abc() {
    this.a = "a";
    this.b = "b";
    this.c = "c";
}

var test = new abc(); // 객체 생성

console.log(test.a); // -> a
console.log(test.b); // -> b
console.log(test.c); // -> c

함수를 이용해 생성자를 만들어 객체를 생성할때에는 new 연산자를 사용해 객체를 생성하게 됩니다.

생성자를 이용하면 새로 생성할 객체의 초기값을 지정할 수 있습니다.

function abc(a, b, c) {
    this.a = a;
    this.b = b;
    this.c = c;
}

var test = new abc("c", "b", "a"); // 객체 생성

console.log(test.a); // -> c
console.log(test.b); // -> b
console.log(test.c); // -> a

-생성자를 왜 사용하는가?

생성자를 사용하는 이유는 이전에 리터럴을 이용해서 객체를 만들때에는 계속해서 같은 객체를 반복해서 다시 적어주게 불편하게 되고 코드가 지저분해집니다.

따라서 생성자를 이용해서 만들게 되면 필요한 객체를 선언하고 그 선언한 객체를 반복적으로 적지 않고 간단하게 new 연산자를 이용해 간단하게 새로운 객체를 생성할 수 있고 원하는 프로퍼티의 초기값을 징정할 수 있기 때문에 사용됩니다.

객체에 함수 추가하기

자바스크립트에서는 객체에 있는 함수를 메소드라고 합니다. 이 메소드를 추가하려면 지금까지 했던 방법과 같이 하시면 됩니다. 함수를 대입시켜주면 됩니다.

function abc() {
    this.a = "a";
    this.b = "b";
    this.c = "c";
    this.show = function() {
        console.log(this.a + " " + this.b + " " + this.c);
    }
}

var test = new abc(); // 객체 생성
test.show() // -> a b c

객체의 데이터에 접근 방법

객체에 있는 프로퍼티에 접근하는 방법은 2가지가 있습니다.

1. 마침표(.)를 이용(점 표기법)
2. 대괄호([])를 이용(괄호 표기법)

-마침표를 이용해 접근 방법(점 표기법)

var abc = {
    a:"a",
    b:"b",
    c:"c"
}

console.log(abc.a); // -> a
console.log(abc.b); // -> b
console.log(abc.c); // -> c

객체.프로퍼티 형식으로 값에 접근이 가능

-대괄호를 이용해 접근 방법(괄호 표기법)

var abc = {
    a:"a",
    b:"b",
    c:"c"
}

console.log(abc["a"]); // -> a
console.log(abc["b"]); // -> b
console.log(abc["c"]); // -> c

객체["프로퍼티 이름(키)"] 형식으로 접근이 가능

객체의 프로퍼티 추가/삭제

객체에 없는 프로퍼티를 추가하고 싶다면 그냥 쓰면됩니다.

대괄호를 이용하는 경우 키값은 " "를 붙여 주어 사용합니다.

var abc = {
    a:"a",
    b:"b",
    c:"c"
}

abc.d = "d";
abc["e"] = "e";

console.log(abc); // -> {a: "a", b: "b", c: "c", d: "d", e: "e"}

객체에 있는 프로퍼티를 삭제하는 방법은 delete 연산자를 이용해 삭제할 수 있습니다.

C/C++, Java같은 언어는 객체에 있는 프로퍼티를 삭제할 수 없지만 자바스크립트는 가능합니다.

var abc = {
    a:"a",
    b:"b",
    c:"c"
}

delete abc.c;

console.log(abc); // -> {a: "a", b: "b"}