안녕하세요 IT에 대한 모든 내용을 전달하는 IT의 타이탄입니다.
아마 이글에 들어오신 분들은 자바스크립트 객체를 검색하셨을 것이고 JS에 대한 기초적인 개념들이 완벽하진 않을 것입니다.
이 글은 다음과 같은 상황에 놓여있는 분들에게 효과적인 글입니다.
1. 자바스크립트의 "자"자도 모르는 분
2. 자바스크립트를 이제 처음으로 배워볼려고 하는 분
3. 리액트, 스프링등이 아직은 무엇인지 정확히 설명이 안 되는 분
이번 글에서는 자바스크립트 안에서 객체에 대한 이야기를 하고자 합니다.
개념이 제대로 정립되어 있어야 우리가 추후에 코드를 작성하거나, 다른 사람의 코드를 이해하는 데에도 무리 없이 할 수 있기 때문에 반드시 개념을 정립하시길 바랍니다.
그럼 글 시작하도록 하겠습니다.
자바스크립트 객체에 대해 알아보자
객체란?
객체는 여러가지 자바스크립트의 자료형 중 하나로 '복합' 자료형에 속합니다.
복합 자료형이라 불리는 이유는 객체 안에 숫자, 문자열, boolean(참,거짓을 나타내는 자료형)등 여러가지 자료형이 하나로 국한되는 것이 아니라 포함되기 때문입니다.
객체를 설명하는 가장 좋은 예시는 바로 온라인 사이트에서 판매하는 책인데요
책을 판매할 때, 책의 제목만 보여주며 팔지 않습니다. 책의 제목은 물론이고 저자는 누구인지 쪽수는 몇쪽인지 대충 어떤 내용을 가지고 있는지, 가격은 얼마인지 등 다양한 정보를 담고있습니다.
책이라는 변수안에 다양한 정보를 담기위해선 우리는 객체라는 자료형을 사용해야하는것입니다.
만약 책이 객체라는 자료형을 선언하지 않게된다면 책이라는 변수는 제목만 담을 수 밖에 없습니다. (string과 integer를 동시에 담을 수 없기때문에)
그렇기 때문에 우리는 여러가지의 자료형을 담기 위해선 객체를 사용해야한다는 것을 꼭 명심하셔야합니다!
객체 book을 js로 표현 하면 다음과 같습니다.
var book = { title : "자바스크립트", pages : 500, price : 15000 }
주의 해야할 점은 중괄호 안에 내용들을 보면 변수명과 변수로 들어갈 값을 = 이 아닌 : 으로 저장하고 있습니다.
우리는 js에서 변수를 선언할 때, var book = 3000;과 같이 = 을 사용했지만 중괄호 안에는 : (콜론)으로 선언한 것을 확인할 수 있습니다.
이는 다른 파이썬 언어처럼 중괄호 안에 사전(딕셔너리) 형태로 저장하기 위해 key : value로 저장하는 모습을 띄고있습니다.
쉽게 말해 key값은 title, pages, price가 되는것이고 key값에 따른 value 값은 자바스크립트, 500, 15000이 되는 것입니다.
이런 객체들은 우리가 실제로 사용하는 웹사이트에서 어떨때 쓰일까요? 바로 회원정보를 저장할때 쓰입니다.
한 ID안에는 이름, 전화번호, 생년월일등 다양한 정보를 저장하고 있을텐데요. 이때, 우리는 회원을 객체형태로 담아야한다는것입니다.
여러가지 변수를 선언해서 저장하게 된다면, 이에 대한 그룹을 우리가 임의로 또 씌워줘야 하기 때문에 객체로 편하게 묶는 것입니다.
그룹을 왜 씌워야 할까요? 쉽게 말해 컴퓨터가 한 사람의 정보를 빠르게 접근하기 위해서입니다.
예를 들어, 다음과 같은 2명의 회원정보가 있습니다.
Id : abc234
이름 : 김길동
생년월일 : 2001/02/02
Id : abc123
이름 : 김철수
생년월일 : 2001/02/02
이때, 그룹으로 묶여 있지 않을 때, 생년월일을 통해 이름을 찾으려면 내가 찾고자 하는 이름이 김철수인지 아니면 김길동인지 구분할 수 없게 됩니다.
이런 이유로 우리는 정보를 그룹화해야 하고, 그룹화하기 위해선 객체를 사용하는 것이 가장 편리한 방법이라 할 수 있습니다.
객체를 왜 사용해야 하고 객체가 무엇인지 알았다면 객체에 대해 자세히 들여다볼 준비가 되었습니다.
이번 시간에는 객체가 무슨 종류까지 있는지 살펴보도록 할 테니 좀만 더 힘내주시면 감사하겠습니다!
객체는 크게 2가지 종류가 존재한다.
객체로는 사용자 정의 객체와 내장객체로 분리되어 있습니다.
사용자 정의 객체는 제가 앞서 말씀드렸던 것처럼 var book = { }처럼 필요한 정보를 담을 수 있도록 사용자가 정의한 객체 합니다.
반대로 내장객체에 경우 자바스크립트 프로그래밍을 할 때 자주 사용하는 객체들을 미리 만들어놓은 것입니다.
다른 언어의 내장함수, 라이브러리라고 비슷하게 생각하시면 될 것 같습니다.
JS에서는 시간과 관련된 프로그램을 위한 Date 객체, Number, Math, Array 등 다양한 내장객체가 존재합니다.
객체는 값을 담고 있는 정보를 속성이라고 부르는데요. 속성이라고 하면 key값에 해당하는 것을 의미합니다.
예를 들어, var book = { title : "자바스크립트", pages : 500, price : 15000 }와 같이 객체를 선언할 때, book의 속성은 title, pages, price가 되는 것입니다.
속성을 부를 때는.(점)을 붙이면 되는데요. book.title을 치게 되면 "자바스크립트"가 출력되는 것을 확인할 수 있습니다.
이미 만들어진 함수를 내장함수 또는 내장 메서드라고 하는데요.
alert()라는 함수는 알림 창을 띄워주는 함수이고 이는 window라는 객체의 내장메서드가 됩니다.
이에 대한 내용들은 직접 한번 실습을 해보면서 코드에 대한 감을 익혀보는 것을 추천드립니다.
지금까지 객체란 무엇이고 객체를 왜 써야 하는지, 간단한 실습 사진을 작성해 보았습니다.
다음 시간에는 객체에 대한 실전 활용방법을 작성해 보도록 하겠습니다.
긴 글 읽어주셔서 감사드립니다