[Javascript] Object의 생성과 사용 방법

앞선 여러 가지 포스팅에서 Javascript의 문법과 사용 방법들에 대해서 알아보았습니다. 모든 언어와 마찬가지로 Javascript도 변수와 상수가 선언이 가능하고 조건문, 반복문들을 사용해서 프로그램이을 진행 합니다.

 

또한 함수를 사용해서 특정 기능을 모을 수 있으며 이러한 함수들을 여러 개 만들어서 하나의 프로그래밍으로 만들 수도 있습니다.

오늘 포스팅에서는 변수와 상수, 함수들을 하나로 묶어서 사용해 볼 수 있는 Object에 대해서 알아보도록 하겠습니다.

---

Javascript Object란 무엇인가

Javascript의 Object는 C 언어나 Java 언어와 같이 struct 혹은 new를 이용해서 구조체 혹은 객체를 생성하기 위한 클래스를 생성할 필요가 없습니다. 사용할 필요가 있을 때 바로 묶어서 사용할 수 있습니다.

 

Javascript Object는 아래와 같은 형태를 가지고 있습니다.

const object = {
  key1 : value1,
  key2 : value2,
}

Object의 이름을 만들고 내부에 들어가는 값들은 모두 key와 value 쌍으로 값들이 존재합니다. 예를 들어 볼게요.

const student = {
	num: 1,
	name: 'koonsland'
}

student라는 Object를 만들고 내부에 값은 key: value와 같은 형식으로 넣어주었습니다. 이렇게 만든 Javascript Object를 접근하는 방법을 알아보겠습니다.

---

Javascript Object 접근 방법(1): dot notation

Object에 접근하는 방법은 점(.) 표기법(dot notation)을 사용합니다.

objectName.key

그럼 위에서 만든 student object의 name을 접근해서 값을 가져오는 방법은 아래와 같습니다.

const student = {
	num: 1,
	name: 'koonsland'
}

console.log(student.name);

---

Javascript Object 접근 방법(2): bracket notation

Object에 접근하는 두 번째 방법은 배열처럼 접근하는 방법입니다.

objectName["key"]

다시 한번 동일하게 student object에서 두 번째 방법으로 name의 값을 가져오도록 하겠습니다.

const student = {
	num: 1,
	name: 'koonsland'
}

console.log(student['name']);

이렇게 두 가지 방법 모두 자유롭게 사용 가능합니다.

---

중첩된 Javascript Object

Object에 접근해서 값을 가져오는 방법 두 가지를 알아보았습니다. 그렇다면 아래와 같은 경우는 어떻게 값을 가져올 수 있을까요?

const student = {
	num: 1,
	name: 'koonsland',
	score: {
		kor: 90,
		eng: 88,
		math: 99
	}
}

만약 kor이나 eng 값을 가져오고 싶을 경우에는 어떻게 해야 할까요?

방법은 똑같습니다. 다시 한번 (1) 혹은 (2)와 같이 사용합니다.

console.log(student.score.math);
console.log(student['score']['math'])

---

Javascript Object에 함수 사용

지금까지는 모두 값을 넣었습니다. 그리고 추가적으로 함수도 넣어서 사용할 수 있습니다. hello() 함수를 한 번 넣어보도록 하겠습니다.

const student = {
	num: 1,
	name: 'koonsland',
	score: {
		kor: 90,
		eng: 88,
		math: 99
	},
	hello: function(){console.log('Welcome to Koonsland')}
}

함수도 넣는 방법은 똑같습니다. key와 value를 넣어주면 됩니다. 다만 value가 값이 아닌 함수를 넣어주시면 됩니다. 사용하는 방법은 아래와 같습니다.

student.hello()

함수이기 때문에 반드시 괄호()를 넣어주셔야 합니다.

---

이번 포스팅에서는 Javascript의 Object에 대해서 알아보았습니다. Javascript Object 자체가 굉장히 유연하고 key, value의 형태만 맞으면 원하는 형태로 만들 수 있습니다. 이제 Object를 이용해서 다양한 데이터를 가공하고 만드는 방법을 조금씩 알아보도록 하겠습니다. 도움이 되셨으면 합니다. 이상입니다.