JavaScript_객체

객체란 추상적인 의미로, 이름과 값으로 구성된 속성을 가진 자바 스크립트의 기본 데이터 타입이다.

자바스크립트에서 여러 자료를 다룰 때는 객체(object)를 사용한다. 배열도 객체인데, 배열도 여러 자료를 다룰 수 있다.

배열에서는 인덱스와 요소가 있었다면, 객체에서는 키를 사용해 값을 접근할 수 있다.

위처럼 객체를 선언해보면, 대괄호나 온점(.)을 사용해서 값으로 접근할 수 있다.

 

(속성과 메소드)

배열 내부에 있는 값을 요소라고 하고 객체 내부에 있는 값은 속성이라고 부른다. 객체의 속성도 모든 형태의 자료형을 가질 수 있다. 

객체의 속성 중 함수 자료형인 속성을 메소드라고 부른다. 메소드 내에서 자기 자신이 가진 속성을 출력하고 싶을 때는 this 키워드를 사용한다.

 

(동적으로 객체 속성 추가, 삭제)

객체를 처음 생성한 후 속성을 추가, 제거하는 것을 동적으로 속성을 추가, 제거한다고 한다. 추가할 때는 객체.속성 = '...' 형태를 사용해서 추가할 수 있고, 제거할 때는 delete 키워드를 사용해서 제거한다.

 

자바스크립트에서는 기본자료형(숫자, 문자열, 불)과 객체 자료형(배열, 함수 등)으로 나눌 수 있다. 속성과 메소드를 가질 수 있는 모든 것은 객체이다. 

기본 자료형도 객체로 선언할 수 있다. 아래와 같이 사용하면 숫자 객체, 문자열 객체, 불 객체를 생성할 수 있다.

const 객체 = new 객체 자료형 이름 ( )

이렇게 생성되면 단순한 기본 자료형이 아니므로 이전과 다르게 속성을 가진다. 

자바스크립트에서는 사용의 편리성을 위해 기본 자료형의 속성과 메소드를 호출할 때 일시적으로 기본 자료형을 객체로 승급시킨다. 이러한 것은 일시적이라서 기본 자료형의 경우 속성과 메소드를 사용할 수는 있지만, 속성과 메소드를 추가로 가질 수는 없다.

prototype 객체에 속성과 메소드를 추가하면 모든 객체와 기본자료형에서 해당 속성과 메소드를 사용할 수 있다.

 

(1) Number 객체

Number 객체에서 자주 사용하는 메소드는 toFixed()이다. 소수점 이하 몇 자리까지만 출력하고 싶을 때 사용한다. 

어떤 숫자가 NaN(Not a Number)인지 또는 무한인지 확인할 때는 Number.isNaN()메소드와 Number.isFinite()메소드를 사용한다. 

(2) String 객체

문자열 양쪽 끝의 공백을 제거할 때는 trim() 메소드를 사용합니다.

그리고 개인적으로 가장 많이 사용하는 메소드는 split()이다. 데이터가 쉼표로 구분되어 있으면 문자열을 구분해줄 때 사용한다.

(3) JSON 객체

인터넷에서 문자열로 데이터를 주고받을 때 csv, xml에 같은 것을 이용할 수도 있지만 json 객체도 많이 사용된다.

JSON은 JavaScript Object Notation의 약자로 자바스크립트의 객체처럼 자료를 표현하는 방식을 말한다. JSON 형식에서는 값을 표현할 때는 문자열, 숫자, 불, 자료형만 사용할 수 있고(함수 사용불가) 문자열은 반드시 큰 따옴표로 만들어야 한다. 그리고 key에도 반드시 따옴표를 붙여야 한다.

JSON.stringify() 메소드를 사용하면 자바스크립트 객체를 JSON 문자열로 변환할 수 있다. 반대로 JSON 문자열을 자바스크립트 객체로 전개할 때는 JSON.parse() 메소드를 사용한다.

(4) Math 객체

수학과 관련된 연산을 할 때 Math 객체를 사용한다. pi, e와 같은 수학 상수가 있고 메소드로는 Math.sin(), Math.cos(), Math.tan()와 같은 삼각함수도 있다.

(5) 외부 script 파일 읽어 들이기

html 페이지 내부에 script 태그 안에 코드를 입력했었는데, 파일을 분리해서 관리할 수도 있다. 별도의 자바스크립트 파일을 만들고 같은 폴더 안에 넣어서 메인 html 파일에 <script src="test.js"></script> 문을 추가해주면 사용할 수 있다.

다른 사람이 만든 외부 자바스크립트 파일을 사용할 수도 있다. 외부 라이브러리로 유틸리티 라이브러리가 있는데, underscore나 Lodash 라이브러리가 있다.

https://lodash.com/

Lodash

곧바로 다운로드한 파일을 읽어드려도 되고, 아니면 CDN copies를 클릭해 링크페이지에서 클립보드 복사를 통해 script태그에 src 속성에 추가해서 사용할 수도 있다.

이외에도 날짜와 시간을 쉽게 다루는 라이브러리(Luxon, data-fns), 그래프를 그릴 수 있는 라이브러리(D3.js, ChartJS), 웹페이지에 스프레드시트를 출력하는 라이브러리(Handsontable)등 다양한 것들이 있다.

 

다중 할당

배열과 비슷한 방법으로 한 번에 여러 개의 변수에 값을 할당하는 다중 할당 기능을 사용할 수도 있다. 아래와 같이 할당 연산자(=) 왼쪽에 식별자의 배열을 넣고 오른쪽에 배열을 위치시키면 위치에 맞게 값이 할당된다. 배열의 크기는 같을 필요 없고 const 키워드로도 사용 가능하다.

객체 내부에 있는 속성을 꺼내서 변수로 할당할 때 다음과 같이 사용할 수도 있다.

 

얕은 복사

복사했을 때 다른 이름이 붙은 것일 뿐 결과가 같은 값인 경우를 얕은 복사(참조 복사)라고 한다.

깊은 복사는 반대인데, 전개 연산자를 사용해서 클론을 만드는 것이다.

좌) 얕은복사 / 우) 깊은 복사