[혼공스] Ch.06 객체

객체의 기본

• 객체

자바스크립트에서 여러 자료를 다룰때는 객체를 사용합니다.

배열도 객체입니다.

//객체의 형태
키: 값

//예시
const product = {
  제품명: '건조 망고'
  성분: '망고, 설탕'
  원산지: '필리핀'
}

• 속성과 메소드

배열 내부에 있는 값을 요소(element)라고 합니다.

객체 내부에 있는 값은 속성(property)이라고 합니다.

객체 내부에 있는 함수(함수 자료형인 속성)를 메소드(method)라고 합니다.

• 메소드 내부에서 this 키워드 사용하기

메소드 내에서 자기 자신이 가진 속성을 출력하고 싶을 때는 자신이 가진 속성임을 분명하게 표시해야 합니다.

자기 자신이 가진 속성이라는 것을 표시할 때는 this 키워드를 사용합니다.

• 동적으로 객체 속성 추가/제거

객체를 처음 생성할 때 속성을 추가하는 것을 '정적으로 속성을 추가한다'라고 합니다.

객체를 처음 생성한 후에 속성을 추가하거나 제거하는 것을 '동적으로 속성을 추가/제거한다'라고 표현합니다.

const student = {
  반: '1'
  학생 수: '40'
  반장: '김정민'
}
//객체 속성 추가
  student.학년 = '2학년'
  
//객체 속성 제거
  delete student.반장

객체의 속성과 메소드 사용하기

• 자료형

기본 자료형

1. 숫자
2. 문자열
3. 불

 

객체 자료형

1. 함수
2. 배열
3. 등등

함수는 객체의 특성을 완벽하게 가지고 있으므로 자바스크립트에서는 함수를

일급 객체(first-class object)에 속한다고 표현하기도 합니다.

• 기본 자료형을 객체로 선언하기

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

new Number(10)
new String('안녕하세요')
new Boolean(true)

• 프로토타입으로 메소드 추가하기

어떤 객체의 prototype이라는 속성이 바로 객체 전용 옷(틀)이라고 할 수 있습니다.

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

객체 자료형 이름.prototype.메소드 이름 = function () {

}

Number 객체

• 숫자 N번째 자릿수까지 출력하기: toFixed()

소수점 이하 몇 자리까지만 출력하고 싶을 때 사용합니다.

const l = 123.456789

l.toFixed(2)
"123.46"

l.toFixed(3)
"123.457"

• NaN(Not a Number)과 Infinity 확인하기: isNaN(), isFinite()

이 메소드들은 숫자 자료 뒤에 온점을 찍고 사용하는 것이 아니라 Number 뒤에 점을 찍고 사용합니다.

//NaN
const m = Number('숫자로 변환할 수 없는 경우')
//NaN을 생성합니다
m
NaN
//NaN과 비교해서는 NaN인지 확인할 수 없습니다.
m === NaN
false

Number.isNaN(m)
true

//Infinity
const n = 10/0
//양의 무한대를 생성합니다.
n
Infinity

const o = -10/0
//음의 무한대를 생성합니다.
o
-Infinity

//inFinite(유한한 숫자인가?)가 false로 나옵니다.
Number.isFinite(n)
false

Number.isFinite(o)
false

//일반적인 숫자는 셀 수 있으므로 true가 나옵니다.
Number.isFinite(1)
true

Number.isFinite(10)
true

//무한대 값은 비교 연산자로 비교할 수 있습니다.
n === Infinity || n === -Infinity
true

String 객체

• 문자열 양쪽 끝의 공백 없애기: trim()

문자열의 trim() 메소드를 사요하면 문자열 앞뒤 공백(띄어쓰기, 줄바꿈 등)을 제거할 수 있습니다.

stringA
"
메세지"

stringB
"	메세지	"

//문자열 앞뒤 공백이 제거됩니다.
stringA.trim()
"메세지"

stringB.trim()
"메세지"

• 문자열을 특정 기호로 자르기: split()

문자열을 매개변수(다른 문자열)로 잘라서 배열을 만들어 리턴하는 메소드입니다.

let input = '02, 255, 213'

input = input.split(',')
['02', ' 255', ' 213']

• JSON 객체

JavaScript Object Notation의 약자로 자바스크립트의 객체처럼 자료를 표현하는 방식입니다.

1. 값을 표현할 때는 문자열, 숫자, 불 자료형만 사용할 수 있습니다(함수 등은 사용 불가).
2. 문자열은 반드시 큰따옴표로 만들어야 합니다.
3. 키에도 반드시 따옴표를 붙여야 합니다.

자바스크립트 객체를 JSON 문자열로 변환할 때는 JSON.stringify() 메소드를 사용합니다.

JSON 문자열을 자바스크립트 객체로 전개할 때는 JSON.parse() 메소드를 사용합니다.

//JSON 형식
{
  "name": "김정민",
  "age": 29,
}

• Math 객체

숫자와 관련된 기본적인 연산을 할 때 사용합니다.

Math 객체의 메소드 중에서 많이 사용하는 함수는 Math.random() 입니다.

Math.random() 메소드는 0이상, 1 미만의 랜덤한 숫자를 생성합니다.

 

객체와 배열 고급

• 속성 존재 여부 확인

객체에 없는 속성에 접근하면 undefined 자료형이 나옵니다.

따라서 조건문으로 undefined인지 아닌지 확인하면 속성 존재 여부를 확인할 수 있습니다.

//객체의 특정 속성이 false로 변환될 수 있는 값(0, false, 빈 문자열 등)이 아닐 때와 같은
//전제가 있어야 안전하게 사용할 수 있습니다.
//객체 내부에 속성이 있는지 확인합니다.
object.name || console.log('name 속성이 없습니다.')
object.author || console.log('author 속성이 없습니다.')

//속성이 false로 변환될 수 잇는 값이 들어오지 않을 것이라는 전제가 있으면 사용할 수 있습니다.
//객체의 기본 속성을 지정합니다.
object.name = object.name || '제목 미정'
object.author = object.author || '저자 미상'

• 다중 할당

//배열 기반의 다중 할당
[식별자, 식별자, 식별자, ...] = 배열

//예시
let [a, b] = [1, 2]

console.log(a, b)
1, 2

[a, b] = [b, a]
//a에 b가 할당되고, b에 a가 할당되므로 값이 서로 교환됩니다.
(2) [2, 1]

console.log(a, b)
2, 1

//객체 기반의 다중 할당
{속성 이름, 속성 이름} = 객체
{식별자 = 속성 이름, 식별자 = 속성 이름} = 객체

//예시
//name 속성과 price 속성을 그대로 꺼냅니다.
const {name, price} = object
console.log(name, price)

//name 속성을 a라는 이름으로, price 속성을 b라는 이름으로 꺼냅니다.
const {a = name, b = price} = object
console.log(a, b)

• 배열 전개 연산자

복사했을 때 다른 이름이 붙을 뿐인 것을 얕은 복사(참조 복사)라고 부릅니다.

배열과 객체는 할당할 때 얕은 복사가 이루어집니다.

 

얕은 복사의 반대말은 깊은 복사입니다.

깊은 복사라면 복사한 두 배열이 완전히 독립적으로 작동합니다.

자바스크립트 개발에서는 깊은 복사를 '클론(clone)을 만드는 것'이라고 표현하기도 합니다.

최신 자바스크립트에서는 전개 연산자를 사용해 다음과 같이 입력하기만 하면 됩니다.

//전개 연산자를 사용한 배열 복사
[...배열]

//전개 연산자를 사용한 배열 요소 추가
[...배열, 자료, 자료, 자료]

• 객체 전개 연산자

객체도 깊은 복사를 할 때 전개 연산자를 사용할 수 있습니다.

객체는 전개 순서가 중요합니다.

//전개 연산자를 사용한 객체 복사
{...객체}

//전개 연산자를 사용한 객체 요소 추가
{...객체, 자료, 자료, 자료}