<div id="readability-page-1" class="page"><div><h2 data-ke-size="size26">객체(Object)란?</h2>
<figure data-ke-mobilestyle="widthOrigin" data-origin-width="1387" data-origin-height="775"><span data-url="https://blog.kakaocdn.net/dn/dwfWRj/btsEGTm0TtD/ptT4LkrjPmjncddHLupEq1/img.png" data-lightbox="lightbox"><img src="https://blog.kakaocdn.net/dn/dwfWRj/btsEGTm0TtD/ptT4LkrjPmjncddHLupEq1/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" width="550" data-origin-width="1387" data-origin-height="775"></span></figure>

<p data-ke-size="size16">자바스크립트는 객체 기반 프로그래밍 언어입니다. 객체를 구성하는 요소로는 속성(Property)과 기능(Method)이 있습니다. 속성과 기능이 있다는 점에서 TV는 객체로 표현될 수 있습니다. 너비와 높이, 색상, 무게와 같은 속성이 있고, TV 켜기, 끄기, 볼륨 높이기, 줄이기와 같은 기능이 있으니 말이죠. 이렇게 자바스크립트에서 이러한 객체를 잘 표현해서 코드화하면 얻을 수 있는 장점들이 많습니다. 이번 포스팅에서는 자바스크립트의 객체에 대해서 알아보도록 하겠습니다.</p>

<h3 data-ke-size="size23">객체를 사용하면서 얻는 장점</h3>
<ol data-ke-list-type="decimal">
<li><b>데이터를 구조화시킬 수 있다 :</b> 객체를 사용하면 데이터들을 보다 논리적으로 그룹화하여 구조화할 수 있습니다. 이러한 과정을 통해 코드의 가독성을 높이고 유지보수함에 유리합니다.</li>
<li><b>데이터의 유연성, 동적성이 좋아진다 :</b> 객체는 동적으로 속성을 추가, 수정, 삭제할 수 있습니다. 심지어 프로그램 실행 중에도 객체를 조작할 수 있기 때문에 유연하고 동적 프로그래밍을 하는데 유리하다고 할 수 있겠습니다.</li>
<li><b>코드 재사용:</b> 객체는 비슷한 기능을 하는 곳에서 여러 번 재사용할 수 있습니다. 이를 통해 코드의 중복을 방지하고 데이터의 일관성을 유지하는데 도움이 됩니다.</li>
<li><b>객체 지향 프로그래밍(OOP):</b> 일반적인 객체 지향 프로그래밍(OOP)의 장점인 클래스, 상속, 다형성과 같은 개념을 그대로 자바스크립트에도 적용하여 효율적인 프로그래밍을 할 수 있습니다.</li>
</ol>

<hr contenteditable="false" data-ke-type="horizontalRule" data-ke-style="style8">


<h2 data-ke-size="size26"><span>&nbsp;자바스크립트 객체(Object) 사용법&nbsp;</span></h2>
<h3 data-ke-size="size23">객체 생성방법</h3>
<pre data-ke-language="javascript"><code>let person = {
    name: "홍길동",
    age: 30,
    job: "Developer"
};</code></pre>
<figure data-ke-mobilestyle="widthOrigin" data-origin-width="461" data-origin-height="34"><span data-url="https://blog.kakaocdn.net/dn/2CvaV/btsEIQi7njt/5OL1t4bz2mae7Q7CIPtKdK/img.png" data-lightbox="lightbox"><img src="https://blog.kakaocdn.net/dn/2CvaV/btsEIQi7njt/5OL1t4bz2mae7Q7CIPtKdK/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" width="300" height="22" data-origin-width="461" data-origin-height="34"></span></figure>

<p data-ke-size="size16">자바스크립트에서 객체는 중괄호 {}로 감싸진 키(key)와 값(value)의 쌍으로 이루어져 있습니다.<span><span> 위의 예제에서 </span></span>person 객체는 name, age, job 세 개의 속성과 값을 가지고 있습니다.</p>


<h3 data-ke-size="size23">객체 속성 접근 방법</h3>
<pre data-ke-language="javascript"><code>person.name = "이순신"
console.log(person.name); // "이순신"
console.log(person["age"]); // 30</code></pre>
<figure data-ke-mobilestyle="widthOrigin" data-origin-width="230" data-origin-height="67"><span data-url="https://blog.kakaocdn.net/dn/eks7j2/btsEE08xbmK/MbVdeoFDL2ppd8TOAZMRWk/img.png" data-lightbox="lightbox"><img src="https://blog.kakaocdn.net/dn/eks7j2/btsEE08xbmK/MbVdeoFDL2ppd8TOAZMRWk/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" width="180" height="52" data-origin-width="230" data-origin-height="67"></span></figure>

<p data-ke-size="size16">외부에서 객체의 속성에 직접 접근하고 싶다면 객체 뒤에 점(.)이나 대괄호([]) 를 사용해서 직접 접근하여 객체의 속성값을 출력하거나 수정할 수 있습니다.</p>


<h3 data-ke-size="size23">객체의 메서드</h3>
<pre data-ke-language="javascript"><code>let person = {
    name: "홍길동",

    say: function() {
        console.log("저는 " + this.name + "입니다!");
    }
};

person.say(); // Method 호출</code></pre>
<figure data-ke-mobilestyle="widthOrigin" data-origin-width="264" data-origin-height="35"><span data-url="https://blog.kakaocdn.net/dn/bbvB3W/btsEKFn5BI7/XNWC6aXYakCmEckcE8WKY0/img.png" data-lightbox="lightbox"><img src="https://blog.kakaocdn.net/dn/bbvB3W/btsEKFn5BI7/XNWC6aXYakCmEckcE8WKY0/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" width="200" height="27" data-origin-width="264" data-origin-height="35"></span></figure>

<p data-ke-size="size16">객체에는 속성뿐만 아니라 메서드(함수)도 포함될 수 있습니다. 객체의 메서드를 호출하려면 객체 뒤에 점(.)을 붙이고 메서드를 호출하면 됩니다. 참고로 객체의 메서드에서 내부 속성값을 사용하려면 위와 같이 this 키워드를 사용하여 지정해주어야 합니다.&nbsp;</p>


<h3 data-ke-size="size23">객체의 속성을 동적으로 제거 &amp; 추가하기</h3>
<pre data-ke-language="javascript"><code>let person = {
    name: "홍길동",
    age: 30,
    job: "Developer"
};

person.location = "서울";
delete person.job;</code></pre>
<figure data-ke-mobilestyle="widthOrigin" data-origin-width="460" data-origin-height="38"><span data-url="https://blog.kakaocdn.net/dn/bH6CR6/btsEGNNYFC4/RKlbcsnLm1dVcX6tQc2pW1/img.png" data-lightbox="lightbox"><img src="https://blog.kakaocdn.net/dn/bH6CR6/btsEGNNYFC4/RKlbcsnLm1dVcX6tQc2pW1/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" width="350" height="29" data-origin-width="460" data-origin-height="38"></span></figure>

<p data-ke-size="size16">자바스크립트에서는 객체에 동적으로 속성을 추가하거나 제거할 수 있습니다. 추가하려면 객체뒤에 (.)점을 붙이고 새로운 속성값을 하나 명시하면 되고 기존에 있는 속성값을 없애려면 delete 키워드를 사용합니다.</p>


<h3 data-ke-size="size23">객체의 모든 속성값을 반복문으로 출력하기</h3>
<pre data-ke-language="javascript"><code>let person = {
    name: "홍길동",
    age: 30,
    job: "Developer"
};

for (let key in person) {
    console.log(key, person[key]);
}</code></pre>
<figure data-ke-mobilestyle="widthOrigin" data-origin-width="339" data-origin-height="103"><span data-url="https://blog.kakaocdn.net/dn/PHiKT/btsEHo8eqH5/f8KjphfZ8WJUq5ON1PYwHk/img.png" data-lightbox="lightbox"><img src="https://blog.kakaocdn.net/dn/PHiKT/btsEHo8eqH5/f8KjphfZ8WJUq5ON1PYwHk/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" width="220" height="67" data-origin-width="339" data-origin-height="103"></span></figure>

<p data-ke-size="size16">객체의 모든 속성을 출력해야 하는 경우들이 종종 있을 수 있습니다. 이럴 때는 위와 같이 for...in 루프를 사용하면 됩니다.</p>


<h3 data-ke-size="size23">객체의 복제와 병합</h3>
<pre data-ke-language="javascript"><code>let person = {
    name: "홍길동",
    age: 19
};

let student = {
    school: "마포고등학교",
    grade: 3
};

let copy = { ...person }; // 객체 복제
let merge = { ...person, ...student }; // 객체 병합

console.log(copy);
console.log(merge);</code></pre>
<figure data-ke-mobilestyle="widthOrigin" data-origin-width="608" data-origin-height="77"><span data-url="https://blog.kakaocdn.net/dn/cJ3XZ2/btsEFLJPyWW/BOftrhWCKZxCkepkmaS3Ek/img.png" data-lightbox="lightbox"><img src="https://blog.kakaocdn.net/dn/cJ3XZ2/btsEFLJPyWW/BOftrhWCKZxCkepkmaS3Ek/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" width="420" height="53" data-origin-width="608" data-origin-height="77"></span></figure>

<p data-ke-size="size16">위와 같이 객체를 복제하거나 다른 객체와 병합하여 사용할 수도 있습니다.</p>


<h3 data-ke-size="size23">객체의 프로토타입과 상속</h3>
<pre data-ke-language="javascript"><code>// 부모 객체
let person = {
    name: "홍길동",
    age: 19,
    sayHello: function() {
        console.log(`안녕하세요, 제 이름은 ${this.name}이고, 나이는 ${this.age}입니다.`);
    }
};

// 자식 객체
let student = Object.create(person); // 부모 객체를 프로토타입으로 갖는 자식 객체 생성
student.school = "마포고등학교";
student.grade = 3;

// 자식 객체의 메서드 호출
student.sayHello(); // "안녕하세요, 제 이름은 홍길동이고, 나이는 30입니다."</code></pre>
<figure data-ke-mobilestyle="widthOrigin" data-origin-width="483" data-origin-height="36"><span data-url="https://blog.kakaocdn.net/dn/kOLQ4/btsEEXKOSfs/a3lrAqKHO874xLD4W9DNb0/img.png" data-lightbox="lightbox"><img src="https://blog.kakaocdn.net/dn/kOLQ4/btsEEXKOSfs/a3lrAqKHO874xLD4W9DNb0/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" width="300" height="22" data-origin-width="483" data-origin-height="36"></span></figure>

<p data-ke-size="size16">자바스크립트에서는 프로토타입을 통해 상속을 구현할 수 있습니다. 위 코드에서 Object.create(person)은 student 객체를 생성하면서 person 객체를 프로토타입으로 지정하여 상속 관계를 설정했습니다. 상속이 끝난 이후에는 student 객체에서 부모의 sayHello 메서드를 호출할 수 있습니다. 이를 통해 객체 간에 코드를 재사용할 수 있습니다.</p>

</div></div>

코딩팩토리

객체(Object)란?
자바스크립트는 객체 기반 프로그래밍 언어입니다. 객체를 구성하는 요소로는 속성(Property)과 기능(Method)이 있습니다. 속성과 기능이 있다는 점에서 TV는 객체로 표현될 수 있습니다. 너비와 높이, 색상, 무게와 같은 속성이 있고, TV 켜기, 끄기, 볼륨 높이기, 줄이기와 같은 기능이 있으니 말이죠. 이렇게 자바스크립트에서 이러한 객체를 잘 표현해서 코드화하면 얻을 수 있는 장점들이 많습니다. 이번 포스팅에서는 자바스크립트의 객체에 대해서 알아보도록 하겠습니다.
 
객체를 사용하면서 얻는 장점
데이터를 구조화시킬 수 있다 : 객체를 사용하면 데이터들을 보다 논리적으로 그룹화하여 구조화할 수 있습니다. 이러한 과정을 통해 코드의 가독성을 높이고 유지보수함에 유리합니다.
데이터의 유연성, 동적성이 좋아진다 : 객체는 동적으로 속성을 추가, 수정, 삭제할 수 있습니다. 심지어 프로그램 실행 중에도 객체를 조작할 수 있기 때문에 유연하고 동적 프로그래밍을 하는데 유리하다고 할 수 있겠습니다.
코드 재사용: 객체는 비슷한 기능을 하는 곳에서 여러 번 재사용할 수 있습니다. 이를 통해 코드의 중복을 방지하고 데이터의 일관성을 유지하는데 도움이 됩니다.
객체 지향 프로그래밍(OOP): 일반적인 객체 지향 프로그래밍(OOP)의 장점인 클래스, 상속, 다형성과 같은 개념을 그대로 자바스크립트에도 적용하여 효율적인 프로그래밍을 할 수 있습니다.
 
 
 
 자바스크립트 객체(Object) 사용법 
객체 생성방법
let person = {
    name: "홍길동",
    age: 30,
    job: "Developer"
};
자바스크립트에서 객체는 중괄호 {}로 감싸진 키(key)와 값(value)의 쌍으로 이루어져 있습니다. 위의 예제에서 person 객체는 name, age, job 세 개의 속성과 값을 가지고 있습니다.
 
 
객체 속성 접근 방법
person.name = "이순신"
console.log(person.name); // "이순신"
console.log(person["age"]); // 30
외부에서 객체의 속성에 직접 접근하고 싶다면 객체 뒤에 점(.)이나 대괄호([]) 를 사용해서 직접 접근하여 객체의 속성값을 출력하거나 수정할 수 있습니다.
 
 
객체의 메서드
let person = {
    name: "홍길동",
    say: function() {
        console.log("저는 " + this.name + "입니다!");
    }
};
person.say(); // Method 호출
객체에는 속성뿐만 아니라 메서드(함수)도 포함될 수 있습니다. 객체의 메서드를 호출하려면 객체 뒤에 점(.)을 붙이고 메서드를 호출하면 됩니다. 참고로 객체의 메서드에서 내부 속성값을 사용하려면 위와 같이 this 키워드를 사용하여 지정해주어야 합니다. 
 
 
객체의 속성을 동적으로 제거 & 추가하기
let person = {
    name: "홍길동",
    age: 30,
    job: "Developer"
};
person.location = "서울";
delete person.job;
자바스크립트에서는 객체에 동적으로 속성을 추가하거나 제거할 수 있습니다. 추가하려면 객체뒤에 (.)점을 붙이고 새로운 속성값을 하나 명시하면 되고 기존에 있는 속성값을 없애려면 delete 키워드를 사용합니다.
 
 
객체의 모든 속성값을 반복문으로 출력하기
let person = {
    name: "홍길동",
    age: 30,
    job: "Developer"
};
for (let key in person) {
    console.log(key, person[key]);
}
객체의 모든 속성을 출력해야 하는 경우들이 종종 있을 수 있습니다. 이럴 때는 위와 같이 for...in 루프를 사용하면 됩니다.
 
 
객체의 복제와 병합
let person = {
    name: "홍길동",
    age: 19
};
let student = {
    school: "마포고등학교",
    grade: 3
};
let copy = { ...person }; // 객체 복제
let merge = { ...person, ...student }; // 객체 병합
console.log(copy);
console.log(merge);
위와 같이 객체를 복제하거나 다른 객체와 병합하여 사용할 수도 있습니다.
 
 
객체의 프로토타입과 상속
// 부모 객체
let person = {
    name: "홍길동",
    age: 19,
    sayHello: function() {
        console.log(`안녕하세요, 제 이름은 ${this.name}이고, 나이는 ${this.age}입니다.`);
    }
};
// 자식 객체
let student = Object.create(person); // 부모 객체를 프로토타입으로 갖는 자식 객체 생성
student.school = "마포고등학교";
student.grade = 3;
// 자식 객체의 메서드 호출
student.sayHello(); // "안녕하세요, 제 이름은 홍길동이고, 나이는 30입니다."
자바스크립트에서는 프로토타입을 통해 상속을 구현할 수 있습니다. 위 코드에서 Object.create(person)은 student 객체를 생성하면서 person 객체를 프로토타입으로 지정하여 상속 관계를 설정했습니다. 상속이 끝난 이후에는 student 객체에서 부모의 sayHello 메서드를 호출할 수 있습니다. 이를 통해 객체 간에 코드를 재사용할 수 있습니다.

[JavaScript] 자바스크립트 객체(Object) 생성 & 사용 방법

댓글