#23 자바스크립트(JavaScript) - 객체(Object) : 속성(Property), 메서드(Method)

안녕하세요 여러분! 에이블디입니다!

 

이번 시간에는 자바스크립트 #2번째 게시글에서 다루었던 객체에 대해 좀 더 자세히 알아보려고 합니다!

 

https://abled.tistory.com/m/47 

#2 자바스크립트(JavaScript) - 자료형(Data type) : 복합형(배열, 객체)

이 게시글 기억나시나요? ㅎㅎ 기억나지 않으신다면 한번 보고 오시는 것도 좋을 것 같습니다!

 

위 게시글에서 배열과 객체를 복합형이라고 소개해 드렸었는데요, 객체를 복합형이라고 한 이유는 객체 안에 숫자, 문자열 등 여러 가지 자료형이 포함되기 때문입니다.

 

위 게시글에서 객체를 설명할 때 사용한 예제 코드를 다시 한번 가져와 볼게요!

var yama = {
    name : "야마",
    position : "개발자",
    age : 34,
    phone : "010-1234-5678",
    email : "yama@yama.com"
}

이 코드 기억나시나요?

 

에이블디의 졸업생 중 '야마'님의 정보를 담은 yama 객체인데요!

사람의 특징을 이야기할 때 이름만으로 그 사람을 설명하지는 않죠?

동명이인이 있을 수도 있으니 여러 가지 정보를 가지고 그 사람의 특징을 설명합니다.

위의 코드도 'name', 'position', 'age', 'phone', 'email'과 같은 여러 정보가 'yama'님의 특징에 대해 나타내 주고 있는데요, 이렇게 하나의 변수(yama)에 다양한 정보를 담기 위해 사용하는 자료형이 객체입니다.

 

객체도 자료형이기 때문에 자바스크립트에서 객체는 자료를 저장하고 처리하는 기본 단위로 볼 수 있습니다.

 

그렇다면 객체는 왜 사용하는 것일까요?

 

예를 들어 회원을 가입시켜서 운영하는 서비스가 있다고 가정해 볼게요.

그리고 사용자든 관리자든 회원 정보를 확인하려고 할 때 해당 회원의 정보를 한꺼번에 가져오는 게 좋겠죠?

'yama'회원의 정보를 확인한다 했을 때 위의 코드처럼 변수 'yama'를 객체 형태로 만들어 하나의 변수에 여러 정보를 저장하여 'yama'의 정보를 한꺼번에 가져올 수 있게 되는 거죠.

이렇듯 하나의 변수에 여러 정보를 저장할 수 있는 객체는 꼭 알아두셔야 합니다.

 

이번엔 객체의 속성(Property)에 대해 알아보도록 할게요!

 

속성이란 객체에서 값을 담고 있는 정보를 뜻하는데요, 간단하게 객체에 붙은 변수라고 생각하시면 됩니다.

객체의 속성은 일반적인 자바스크립트 변수와 똑같은데, 객체에 붙어있다는 점만 다릅니다.

 

위의 yama객체의 속성은 'name', ' position', 'age', 'phone', 'email'이고, 속성 값은 "야마", "개발자", 34, "010-1234-5678", "yama@yama.com"이 되는 거죠.

 

속성에 접근할 때에는 객체를 입력하고 그 뒤에 바로 마침표(.)를 입력한 뒤 속성을 입력하면 됩니다.

 

코드로 확인해 볼게요!

var yama = {
    name : "야마",
    position : "개발자",
    age : 34,
    phone : "010-1234-5678",
    email : "yama@yama.com"
}

console.log(yama.name);

yama객체의 name속성에 접근하는 코드(yama.name)인데요, 속성 값이 제대로 출력되는지 확인 해 볼게요!

 

 

name 속성에 담긴 값 "야마"를 출력하는 걸 볼 수 있습니다!

 

다음은 메서드(Method)입니다.

자바스크립트에서의 메서드는 객체 안에 정의된 함수를 말합니다.

 

홈페이지를 만들 때 자주 사용하는 'alert()'라는 함수가 있는데요, 이 함수는 Window라는 객체 안에 정의된 함수입니다.

객체 안에 정의된 함수이기 때문에 alert() 함수는 '메서드'가 되는 것이죠.

 

메서드 사용법도 속성을 사용할 때와 마찬가지로 마침표(.)를 사용하여 객체 이름 다음에 마침표를 입력하고 그다음 메서드를 입력하면 됩니다.

메서드를 실행할 때 인수가 필요하면 괄호 안에 인수를 넣어주고, 필요 없다면 빈 괄호만 적어주면 됩니다.

 

alert() 메서드를 사용해 볼까요?

 

크롬에서 사용해 보도록 할게요!

 

 

크롬 브라우저 오른쪽 상단을 보시면 점 세 개로 이루어진 햄버거 버튼이 있습니다.

그걸 누르시고 도구 더 보기 -> 개발자 도구를 클릭해 개발자 도구를 열어주세요!

 

그럼 브라우저 오른쪽에

 

 

이런 개발자 도구가 나타나는데 아래쪽에 'Console'에서 실행시켜볼 수 있습니다.

 

 

Console에 'win'까지만 입력해도 관련된 것들이 많이 나오는데요, 우리는 window를 입력해 보도록 하겠습니다.

window를 입력하고 엔터를 눌러주세요!

 

 

그럼 위와 같이 Window 쪽에 삼각형이 누워있는 것 보이시나요? 이걸 한번 눌러볼게요!

 

 

Window 객체 안에 들어 있는 요소가 모두 표시되는데요 우리가 사용해 볼 alert도 보이네요!

alert항목 옆에 f가 표시되어 있는 거 보이시나요? 이건 function을 줄여 표시한 것으로 함수를 의미합니다!

alert 이외에도 사용할 수 있는 함수가 더 보이네요!

 

우리는 여기서 alert를 사용해 볼게요!

콘솔에 아래의 코드를 입력해 주세요!

인수는 alert창에 띄우고 싶은 값을 입력해 주세요!

window.alert("에이블디 기술블로그입니다.")

코드를 입력하고 엔터를 누르시면!

 

 

이런 식으로 alert창이 뜨게 됩니다!

window 객체의 alert메서드를 사용해 보았네요!

 

조금 전 우리가 사용한 Window 객체는 내장 객체라고 합니다.

내장 객체는 자바스크립트 프로그래밍을 할 때 자주 사용하는 요소를 자바스크립트 안에 미리 객체로 정의한 것을 말하는데요, 자바스크립트에는 Window객체 이외에도  Array, Boolean, Date, JSON, Math, Number, String 등 많은 내장 객체가 있습니다.

 

*방금 사용한 Window 객체는 모든 객체를 품고 있는 최상위 객체이기 때문에 Window 객체의 함수를 실행할 때는 window와 마침표를 빼고 함수 이름만 사용해서 실행이 가능합니다.

alert("에이블디 기술블로그입니다.")

 

이렇게만 입력해도

 

 

동일하게 alert가 동작하는 걸 확인할 수 있습니다.

 

오늘은 객체에 대해 조금 더 깊이 알아보았는데요! 아직 객체를 다 배운 것은 아닙니다!

 

다음 시간에도 객체에 대해 조금 더 알아보는 시간을 갖도록 해요!

 

그럼 여러분 다음 시간에 만나요!