01. 자바스크립트의 필수! 객체와 프로퍼티, 메서드의 정의

안녕하세요.

좋아요요정입니다.  프로그래밍 언어에는 다양한 자료형이 존재합니다.

자료형은 크게 원시 타입(Primitive Data Type)과 참조 타입(Reference Data Type)으로 구분됩니다.

자바스크립트는 원시값( string, Number, Bigint, Booliean, Undefined, Symbol, Null )을 제외한 모든 것은 값의 메모리 주소를 참조하는 참조 타입의 객체로 이루어져 있습니다.

자바스크립트에 필수인 객체와 메서드가 무엇인지, 프로퍼티가 무엇이고 또 어떻게 사용하는지 알아보겠습니다.

 

 

 

---

객체

객체란?

const cat = {
	name : 'cookie',
	color : '삼색이',
	age : 2,
}

객체(Object)란 키와 값들을 그룹으로 묶은 데이터 모음입니다.

객체는 { key: value, key: value ... } 의 형태로 이루어져 있으며, 중괄호{} 안에 키(key)와 값(value)을 한 쌍으로 정의하며 이를 속성(Properties)이라고 부릅니다. 하나의 키에는 하나의 값을 매핑하고, 키이름은 중복으로 불가합니다. 동일한 키이름에 다른 두 값을 대입한 경우, 나중에 온 값으로 대치되어 저장됩니다. 

객체는 0개부터 생성 가능하며, 하나 이상의 프로퍼티를 정의할 때는 콤마(,)를 사용하여 구분합니다.

 

 

프로퍼티 생성 시 주의사항

프로퍼티는 { key: value }로 구성되어 있습니다. 프로퍼티를 나열할 때에는 쉼표로 구분하여 작성합니다.

프로퍼티의 key와 value에는 어떤 값들을 사용할 수 있을까요?

 

프로퍼티의 키는 해당 프로퍼티의 데이터에 접근하기 위한 식별자로써의 역할을 합니다. 따라서 식별자(변수) 네이밍 규칙을 따르는게 안전합니다. 키는 빈 문자열을 포함하는 모든 문자열 또는 심볼이 사용 가능합니다. 숫자로 시작할 수 없고, 연산자 등도 사용할 수 없습니다. (예. 123num , he+llo 등) 만약 꼭 사용하고 싶다면 ‘’따옴표 안에 작성해 문자열로 활용해 키값을 사용해줄 수 있지만 권장되지 않습니다.

 

프로퍼티의 값은 자바스크립트에서 사용할 수 있는 모든 값을 사용 가능합니다. (예!)

 

 

 

 

객체의 프로퍼티 값에는 함수도 사용이 가능

const counter = {
	count: 0,
	increase: function() {
		this.count ++;
	}
}

객체의 프로퍼티 값에는 함수도 사용이 가능합니다. 이는 자바스크립트 함수가 일급 함수로 평가가 되기 때문입니다.

일급 함수는 변수가 사용되는 모든 곳에 함수가 사용될 수 있는 경우를 일급 함수라고 합니다. 따라서 객체의 프로퍼티 값으로 함수를 활용 가능합니다. 일반 함수들과 객체의 프로퍼티로써의 함수를 구분하기 위해서 객체에서 사용되는 함수를 메서드라고 표현합니다.

이게 가능한 이유는 자바스크립트 함수도 객체이기 때문입니다. (이후 더 자세히 진행될 예정) 따라서 함수도 값으로 취급될 수 있기 때문에 프로퍼티의 값으로 활용할 수 있습니다.

 

 

 

 

객체에서 프로퍼티에 언제 함수(메서드)를 사용할까요?

객체는 특정 요소가 갖고 있어야 할 데이터를 관리하기 위해 활용이 됩니다.

객체의 상태를 저장하고 나타내기 위해서는 프로퍼티에 값을 대입하고, 객체의 상태를 조작하고 관리하기 위해서 메소드를 사용합니다.

const cat = {
	name: 'cookie',
	age: 2, 
	position: [0, 0],
	walk: function(update_x, update_y) {
		this.position: [update_x, update_y]
	}
}

예로 들면 고양이의 이름, 나이, 위치 상태를 저장하고 나타내는 값과 그 상태를 조작하는 wark 메소드를 사용할 수 있습니다. 메서드 내부에서 사용한 this 키워드는 메서드가 선언된 객체 자신을 가리키는 ‘참조 변수’입니다.

 

cat.position // [0, 0]
cat.wark(200, 200);
cat.position // [200, 200]  //객체 자신의 상태를 관리할 수 있습니다.

 

 

 

---

 

 

정리 한번 하겠습니다.

객체 : 키와 값들을 그룹으로 묶은 데이터 모음 {key: value, key: value ...}

프로퍼티 : 객체 안에서 키(key)와 값(value)을 한 쌍으로 정의된 속성

메서드 : 객체 안에 선언된 객체의 상태를 조작하고 관리하기 위한 함수입니다.

 

 

객체를 사용하고 있지만, 머릿속의 개념이 정확하게 형성되어 있지 않았습니다. 강의를 듣고 책을 읽고 끝내는게 아니라, 정의를 다시 재정의하면서 머릿속에 구체화가 진행되었습니다. ㅎㅎ 코드를 작성할 때 '되겠지?'라는 생각말고 '된다.'라는 당연한 믿음이 생겼달까요

객체, 프로퍼티, 메서드에 대한 정의, 사용법을 함께 알아보았습니다. 강의를 진행해주신 hoon님께 감사드립니다. 스터디원분들의 열정에 자극받아 더 열심히 공부하게 됩니다 :) 선한 영향력! 

즐거운 코딩라이프되세요. 감사합니다.

 

 

JavaScript 스터디 팀 러버덕과 함께 합니다.