[혼공스] 중간정리 [6챕터] 객체

const 별 = {
	이름: '별',
    나이: 1,
    예방접종: true,
    
    이름:'구름',
    나이: 6,			// 이렇게 전개됨
    종족: '강아지'
}

객체

객체의 기본

객체란 추상적 의미이고

'실제로 존재하는 사물'을 의미하고 이름과 값으로 구성된 속성(property)을 가진 자바스크립트의 기본 테이터 타입

 

객체

자바스크립트에서 여러 자료를 다룰 때는 객체(object)를 사용 하고 배열도 여러 자료를 다룰수있는데, 이도 배열도 객체이기 때문

 

배열을 typeof로 실행해보면 object 라는 문자열이 출력됨.

 

>typeof ([])

"object"

object = 객체

 

const array = ['사과', '바나나', '망고', '딸기']

배열에는 인덱스(index)와 요소(element)가 있는데 요소를 사용하기 위해서는 배열 이름 뒤에 인덱스로 접근

array[0] //사과
array[2] //망고

인덱스	요소
0	사과
1	바나나
2	망고
3	딸기

배열은 객체를 기반으로 만들어졌기 때문에, 배열과 객체는 상당히 비슷한데 배열은 요소에 접근할 때 인덱스를 사용하지만 객체는 키(key)를 사용한다.

키: 값

 

const product = {
	제품명: '누가 크래커'
    유형: '과자'
    성분: '누가, 밀가루, 설탕'
    원산지: '대만'
    }

이 객체를 표로 나타내면

키	속성
제품명	누가 크래커
유형	과자
성분	누가, 밀가루, 설탕
원산지	대만

 

product['제품명']
product['유형']
product['성분']
product['원산지']
//객체의 요소에 접근하기

product.제품명
product.유형
product.성분
product.원산지
//[]대괄호 이외에 온점을 사용하여 요소에 접근하기.

 

속성과 메소드

배열 내부에 있는 값을 요소(element)라고 하는데 객체 내부에 있는 값은 속성(property) 라고 함

배열의 요소와 마찬가지로 객체의 속성도 모든 형태의 자료형을 가질 수 있다.

const object = { 
	number: 273,
    string: '구름',
    boolean: true,
    array: [52, 273, 103, 32],
    
    method: function () { }
}

속성과 메소드 구분하기

객체의 속성 중 함수 자료형인 속성을 메소드(method)라고 부른다

다음 코드에서 객체pet은 name 속성과 eat 속성을 가지고 있는데 eat 속성처럼 입력값을 받아 무언가 한 다음 결과를 도출해내는 함수 자료형을 특별히 eat() 메소드라고 부른다

const pet = {
	name: '구름',
    eat: function (food) { }
    }
    
    pet.eat()

 

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

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

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

const pet = {
	name: '구름',
    eat: (function (food) {
     alert(this.name + '은/는' + food + '을/를 먹습니다.')
     }
 }
 
 pet.eat('밥')
 
 //구름은/는 밥을/를 먹습니다.

 

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

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

 

동적으로 객체 속성 추가하기

const student = {}
student.이름 = '우태현'
student.취미 = '유투브'
student.장래희망 = '개발자'

console.log(JSON.stringify(student, null, 2)

//{
// "이름": "우태현",
// "취미": "유투브",
// "장래희망": "개발자"
//}

 

동적으로 객체 속성 제거하기

delete 객체.속성

 

// 객체를 선언
const student = {}
student.이름 = '우태현'
student.취미 = '유투브'
student.장래희망 = '개발자'

//객체의 속성을 제거
delete student.장래희망

//출력
console.log(JSON.stringify(student, null, 2))

//{
// "이름": "우태현"
// "취미": "악기"
//}

메소드 간단 선언 구문

function () { } 형태로 메소드가 선언이 가능한데

최신 버전의 자바스크립트에서는 메소드를 조금 더 쉽게 선언할 수 있는 전용 구문이 있다.

 

메소드 선언 구문

const pet = {
	name: '구름',
	eat (food) {
	alert(this.name + '은/는' + food + '을/를 먹습니다')
    }
}

pet.eat('밥')

//구름은/는 밥을/를 먹습니다

 

화살표 함수를 사용한 메소드

function () { } 형태로 선언하는 익명 함수와 () => { } 형태로 선언하는 화살표 함수는

객체의 메소드로 사용될 때 this 키워드를 다루는 방식을 다르다.

 

this 키워드의 차이

const test = {
	a: function () {
    	console.log(this) // 익명 함수로 선언
    },
    b: () => {
    	console.log(this) // 화살표 함수로 선언
    }
}
//메소드 호출
test.a()
test.b()

// {a: f, b: f}
// Window {postMessage: f, blur: f, focus: f, close: f, parent: Window, ...} 
// Window 객체를 출력함

window 객체는 웹 브라우저 자체를 나타내는 '웹 브라우저에 실행하는 자바스크립트의 핵심 객체' 라고 생각하면 됨

'기본적으로 this 키워드가 window 객체를 나타낸다' 하지만 상황에 따라 또 다른 객체를 나타낼 수도 있음

 

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

자바스크립트에서 사용하는 자료는 크게 기본 자료형(primitives)과 객체 자료형(object)으로 구분할 수 있다

자바스크립트는 유연함의 대명사인데 기본 자료형이 객체 자료형이 될 수도 있다.

이를 활용하는 예제로써는 prototype 객체가 있다.

 

객체 자료형

속성과 메소드를 가질 수 있는 모든 것은 객체이며 배열도 하나의 객체이다.

a라는 이름의 배열을 선언하고 배열에 속성을 지정한 후 확인해보면 배열이 속성을 가질수 있다는 것을 알수 있다.

> const a = []
undefined

> a.sample = 10

10

> a.sample

10

 

 

함수도 객체이고 다음과 같이 함수 b를 선언하고 함수에 속성을 지정한 후 확인해보면

함수가 속성을 가질 수 있다는 것을 알 수 있다.

 

> function b () { }

undefined

 

> b.sample = 10

10

 

> b.sample

10

 

그래서 typeof 연산자를 사용해서 배열의 자료형을 사용하면 "object"라고 객체가 출력되는데

이때 배열인지 확인하려면 Array.isArray() 메소드를 사용하면 된다. (Array도 물론 메소드를 갖고있으므로 객체임)

> typeof a

"object"

 

> Array.isArray(a)

true

 

함수는 '실행이 가능한 객체'라는 특이한 자료로 typeof 연산자를 사용해서 자료형을 확인하면 "function"을 출력하는데

함수는 객체의 특성을 완벽하게 가지고 있으므로 자바스크립트에서는 함수를 일급 객체(first-class object / first-class citizen)에 속한다고 표현하기도 함

> typeof b

"function"

 

기본 자료형

자바스크립트에서는 실체가 있는 것(undefined와 null 등이 아닌 것) 중에 객체가 아닌 것을 기본 자료형(primitive types / primitives)라고 부른다. 이때 숫자, 문자열, 불이 바로 기본 자료형이다.

 

> const c = 273

undefined

> c.sample = 10

10

> c.sample

undefined // 속성을 만들 수 있는 것처럼 보이지만 실제로 속성이 만들어지지 않음

 

c.sample = 10 은 속성을 추가하는 것처럼 보이지만 다음 코드에 c.sample이 undefined로 나오므로 속성이 추가되지 않았다는것을 알 수 있다.

문자열과 불 자료형도 기본 자료형이므로 같은 결과가 나옴

 

> const d = '안녕하세요'

undefined

 

> d.sample = 10

10

 

> d.sample

undefined

 

> const e = true

undefined

 

>e.sample = 10

10

 

>e.sample

undefined

 

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

자바스크립트는 기본 자료형을 객체로 선언하는 방법을 제공함.

2장에서 살펴본 숫자, 문자열, 불 등으로 자료형을 변환하는 함수(Number, String, Boolean)은 다음과 같이 사용함

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

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

단순한 기본 자료형이 아니므로 이전과 다르게 속성을 가지는데

다음과 같이 new Number()를 사용해 숫자를 생성하면 숫자아 관련된 연산자도 모두 활용 가능하며 속성과 메소드까지도 활용이 가능하다.

> const f = new Number(273)
undefined

> typeof f
"object"

> f.sample = 10

10

 

> f.sample

10

 

> f

Number {273, sample: 10}

 

> f + 0

273

 

> f.valueOf()

273

 

※new 키워드를 사용하지 않으면 함수가 자료형 변환 기능으로만 작동함

 

기본 자료형의 일시적 승급

기본 자료형은 속성과 메소드를 가질 수 없는데 왜 가질수 있는것일까?

 

자바스크립트는 사용의 편리성을 위해 기본 자료형의 속성과 메소드를 호출할 때 일시적으로 기본 자료형을 객체로 승급시킴

 

일시적이기 때문에 실질적으로는 추가되지는 않음.

 

-> 왕관과 옷을 씌워줬다 문장이 끝남과 동시에 뺏어감

 

기본 자료형의 경우 속성과 메소드를 사용할 수는 있지만, 속성과 메소드를 추가로 가질 수는 없다고 생각하면 됨.

 

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

저 왕관과 옷 자체를 변경하면 어떨까?

숫자 객체 전체에 어떤 속성과 메소드를 추가할 수 있다면 기본 잘형 숫자도 속성과 메소드를 사용할 수 있다.

 

prototype 이라는 속성이 바로 객체 전용 옷(틀)이라고 할 수 있는데

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

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

}

예를 들어 다음과 같이 sample이라는 속성을 추가한다고 하면

Number.prototype에 sample이라는 속성을 추가하면 기본 자료형 숫자 뒤에 온점을 찍고 해당 속성을 활용할 수 있다.

> Number.prototype.sample = 10

10

 

>const i = 273

undefined

 

> i.sample

10

 

모든 숫자 자료형이 어떤 값을 공유할 필요는 없으므로, 일반적으로 프로토타입에 속성을 추가하지 않음

하지만 프로토타입에 메소드를 추가하면 다양하게 활용이 가능하다.

 

최신 자바스크립트에는 제곱 연산자(**)가 있는데 이를 사용하면 숫자를 n제곱할 수 있다.

 

> 2 ** 2 

4

 

> 2 ** 3 

8

 

> 2 ** 4 

16

 

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

Number.prototype.power = function (n = 2) {
	return this.valueOf() ** n
}

const a = 12

console.log('a.power():', a.power())
console.log('a.power(3):', a.power(3))
console.log('a.power(4):', a.power(4))


//a.power(): 144
//a.power(3): 1728
//a.power(4): 20736

this.valueOf()로 숫자 값을 꺼냈는데 사실 this **을 해도 문제 없이 계산될 코드이다.

하지만 객체 내부에서 값을 꺼내 쓰는 것임을 명확하게 하기 위해 4행처럼 valueoOf() 메소드를 사용하는것이 일반적

 

배열 내부에 어떤 자료가 있는지 확인할 때는 indexOf() 메소드를 사용함.

> const j = '안녕하세요'
undefined

 

> j.indexOf('안녕')

0

 

>j.indexOf('하세')

2

 

>j.indexOf('없는 문자열') // 없는 문자열일시 -1 return

-1

 

배열도 마찬가지이다

 

> const k = [1, 2, 3]

undefined

 

> k.indexOf(2)

1

 

> k.indexOf(3)

2

 

> k.indexOf(100)

-1

 

따라서 문자열.indexOf(문자열) > = 0 등의 코드를 사용하면 문자열 내부에 어떤 문자열이 포함되어 있는지 true 또는 false로 얻을 수 있음

이를 문자열.contain(문자열)했을때 true 혹은 false를 리턴하는 형태로 변경시 편리하게 사용 가능

String.prototype.contain = function (data) {
	return this.indexOf(data) >= 0
    }
    
    Array.prototype.contain = function (data) {
    	return this.indexOf(data) >= 0
    }
    
    const a = '안녕하세요'
    console.log('안녕 in 안녕하세요:', a.contain('안녕'))
    console.log('없는데 in 안녕하세요:', a.contain('없는데'))
    
    const b = [273, 32, 103, 57, 52]
	console.log('273 in [273, 32, 103, 57, 52]:', b.contain(273))
	console.log('0 in [273, 32, 103, 57, 52]:', b.contain(0))
    
//안녕 in 안녕하세요: true
//없는데 in 안녕하세요: false
//273 in [273, 32, 103, 57, 52]: true
//0 in [273, 32, 103, 57, 52]: false

Number 객체

Number 객체의 기본 메소드

 

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

Number 객체에서 자주 사용하는 메소드는 toFixed() 메소드이다.

소수점 이하 몇 자리 까지만 출력하고 싶을 때 사용하는데 소수점 아래 2자리까지 출력을 원한다면 tofFixed(2), 3자리는 toFIxed(3)로 쓰면 된다.

 

> const l = 123.456789

 

> l.toFixed(2)

"123.46"

 

> l.toFixed(3)

"123.457"

 

> l.toFixed(2)

"123.4568"

 

 

NaN과 Infinity 확인하기: isNaN(), isFinite()

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

메소드를 사용한다.

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

 

> const m = Number('숫자로 변환할 수 없는 경우')
undefined

> m

NaN

 

>m === NaN                 

//NaN와 비교해서는 NaN인지 확인 불가

false

 

> Number.isNaN(m)

true

--------------------------------------------

Infinity는 이렇게 사용할 수 있다.

> const n = 10 / 0

undefined

> n

Infinity

// 양의 무한대

 

> const o = -10 / 0

undefined

> o

-Infinity 

//음의 무한대

 

> Number.isFinite(n)

false

 

> Number.isFinite(o)

false

 

//isFinite = 유한한 숫자인가?

//무한대이므로 false 반환

 

> Number.isFinite(1)

true

 

> Number.isFinite(10)

true

 

//일반적인 숫자는 셀 수 있으므로 true

 

isFinite() 메소드가 false인 경우는 양의 무한대 숫자와 음의 무한대 숫자 2가지 경우인데

NaN와 다르게 무한대 값은 비교 연산자로 비교가 가능하다.

> n === Infinity || n === -Infinity

true

 

String 객체

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

 

사용자의 실수 또는 악의적인 목적으로 문자열 앞뒤에 공백이 추가되는 경우가 많은데

이런 것들을 미리 제거하는 것이다.

이런 기능을 trim이라고 부르며

trim() 메소드로 문자열 앞뒤 공백(띄어쓰기, 줄바꿈 등)을 제거할 수 있다.

 

 

> const stringA = `

메세지 쓰다보면 앞에 줄바꿈도 들어가고`

undefined

> const stringB = `         앞과 뒤에 공백도 들어가고      `

undefined

> stringA

"

메세지 쓰다보면 앞에 줄바꿈도 들어가고"

> stringB

'         앞과 뒤에 공백도 들어가고      '

 

> stringA.trim()

"메세지를 입력하다 보니 앞에 줄바꿈도 들어가고"

> stringB.trim()

"앞과 뒤에 공백도 들어가고"

 

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

알고리즘 대회 문제를 풀거나 웹 페이지에서 크롤링을 하면 쉼표 혹은 다른 것으로 구분된 문자열을 분해해야 할 경우가 있다. 

Ex) 파이썬 웹페이지 크롤링

 let input = ` 
 일자, 달러, 엔, 유로
 02,1141.8,1097.46,1262.37
 03,1148.7,1111.36,1274.65
 04,1140.6,1107.81,1266.58
 07,1143.4,1099.58,1267.8
 08,1141.6,1091.97,1261.07
 `
 
 '일자, 달러, 엔, 유로\n
 02,1141.8,1097.46,1262.37\n
 03,1148.7,1111.36,1274.65\n
 04,1140.6,1107.81,1266.58\n
 07,1143.4,1099.58,1267.8\n
 08,1141.6,1091.97,1261.07'
 > input = input.split('\n')
'일자, 달러, 엔, 유로', 

' 02,1141.8,1097.46,1262.37',

' 03,1148.7,1111.36,1274.65', 

' 04,1140.6,1107.81,1266.58',

' 07,1143.4,1099.58,1267.8', 

' 08,1141.6,1091.97,1261.07'



>input = input.map((line) => line.split(','))
(6) [Array(4), Array(4), Array(4), Array(4), Array(4), Array(4)]



//드롭다운 바 클릭 결과

0: (4) ['일자', ' 달러', ' 엔', ' 유로']
1: (4) [' 02', '1141.8', '1097.46', '1262.37']
2: (4) [' 03', '1148.7', '1111.36', '1274.65']
3: (4) [' 04', '1140.6', '1107.81', '1266.58']
4: (4) [' 07', '1143.4', '1099.58', '1267.8']
5: (4) [' 08', '1141.6', '1091.97', '1261.07']
length: 6

 

JSON 객체

인터넷에서 문자열로 데이터를 주고 받을때에는 CSV, XML, CSON 등의 다양한 자료 표현 방식이 있는데

가장 많이 사용되는것은 JSON 객체이다.

 

단일 자료 예제

{
	"name": "zard album",
    "price": 15000,
    "publisher": "wezard"
}

복수 자료 예제

[{
	"name": "zard album",
    "price": 15000,
    "publisher": "wezard"
}, {
	"name": "sard album",
    "price": 15000,
    "publisher": "sazard"
}]

 

JSON = 배열과 객체를 활용해 어떤 자료를 표현하는 형식

 

JSON의 추가 규칙

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

만약 자바스크립트 객체를 JSON 문자열로 변환하고 싶을때는

JSON.stringify() 메소드를 사용 하는데 사용법은 아래와 같다.

const data = [{
	name: 'ZARD 앨범',
    price: 18000,
    publisher: 'WE ZARD'
}, {
	name: 'SARD 앨범',
    price: 14000,
    publisher: 'WE SARD'
}]
// 자료를 JSON으로 변환합니다.
console.log(JSON.stringify(data))
console.log(JSON.stringify(data, null, 2))
//결과 
[{"name":"ZARD 앨범","price":18000,"publisher":"WE ZARD"},{"name":"SARD 앨범","price":14000,"publisher":"WE SARD"}]
[
  {
    "name": "ZARD 앨범",
    "price": 18000,
    "publisher": "WE ZARD"
  },
  {
    "name": "SARD 앨범",
    "price": 14000,
    "publisher": "WE SARD"
  }
]

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

const data = [{
	name: 'ZARD 앨범',
    price: 14000,
    publisher: 'WE ZARD'
}, {
	name: 'SARD 앨범',
    price: 12000,
    publisher: 'WE SARD'
}]
// 자료를 JSON으로 변환
const json = JSON.stringify(data)
console.log(json)
// JSON 문자열을 다시 자바스크립트 객체로 변환
console.log(JSON.parse(json))

[{"name":"ZARD 앨범","price":14000,"publisher":"WE ZARD"},
{"name":"SARD 앨범","price":12000,"publisher":"WE SARD"}]
Array(2) [{…}, {…}]0: {name: 'ZARD 앨범', price: 14000, publisher: 'WE ZARD'}
1: {name: 'SARD 앨범', price: 12000, publisher: 'WE SARD'}length: 
2[[Prototype]]: Array(0)

Math 객체

수학과 관련된 기본적인 연산을 할 때는 Math 객체를 사용한다.

 

const num = Math.random()

console.log('# 랜덤한 숫자')
console.log('0~1 사이의 랜덤한 숫자:', num)
console.log('')
      
console.log('# 랜덤한 숫자 범위 확대')
console.log('0~10 사이의 랜덤한 숫자:', num * 10)
console.log('0~50 사이의 랜덤한 숫자:', num * 50)
console.log('')

console.log('# 랜덤한 숫자 범위 이동')
console.log('-5~5 사이의 랜덤한 숫자:', num * 10 - 5)
console.log('-25~25 사이의 랜덤한 숫자:', num * 50 -25)
console.log('')

console.log('# 랜덤한 정수 숫자')
console.log('-5~5 사이의 랜덤한 정수 숫자:', Math.floor(num * 10 - 5))
console.log('-25~25 사이의 랜덤한 정수 숫자:', Math.floor(num * 50 - 25))

# 랜덤한 숫자
0~1 사이의 랜덤한 숫자: 0.3380184505120749

# 랜덤한 숫자 범위 확대
0~10 사이의 랜덤한 숫자: 3.380184505120749
0~50 사이의 랜덤한 숫자: 16.900922525603747

# 랜덤한 숫자 범위 이동
-5~5 사이의 랜덤한 숫자: -1.619815494879251
-25~25 사이의 랜덤한 숫자: -8.099077474396253
 
# 랜덤한 정수 숫자
-5~5 사이의 랜덤한 정수 숫자: -2
-25~25 사이의 랜덤한 정수 숫자: -9

외부 script 파일 읽어들이기

지금까지는 HTML 페이지 내부에 script 태그를 만들고 자바스크립트 코드를 입력했는데

간단한 프로그램은 그렇게 만들수 있으나 규모가 커지면 파일을 분리하는게 좋다.

별도의 자바스크립트 파일을 만들어야 하고, VS Code에서 main.html과 test.js인 파일을 생성하고 읽어들이면 된다.

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <script src="test.js"></script>
    <script>
      console.log('# main.html의 script 태그')
      console.log('sample 값:', sample)
    </script>
  </head>
  <body></body>
</html>

main.html

 

console.log('# test.js 파일')
const sample = 10

test.js

 

# test.js 파일

# main.html의 script 태그

sample 값 : 10

 

Lodash 라이브러리

다른 사람들이 다양한 함수와 클래스를 묶어 제공해주는 것을 외부 라이브러리 라고 하며

이를 활용하면 다양한 것들을 만들 수 있다.

유틸리티 라이브러리는 개발시 보조적으로 사용하는 함수들을 제공해주는 라이브러리이며

underscore, Lodash 등 다양한 라이브러리가 있다.

https://lodash.com 

Lodash CDN

https://www.jsdelivr.com/package/npm/lodash

 

<script src ="https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js">

 

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js">
    </script>
    <script>
      // 데이터를 생성합니다.
      const books = [{
        name: '혼자 공부하는 파이썬',
        price: 18000,
        publisher: '한빛미디어'
      }, {
        name: 'HTML5 웹 프로그래밍 입문',
        price: 26000,
        publisher: '한빛아카데미'
      }, {
        name: '머신러닝 딥러닝 실전 개발 입문',
        prie: 30000,
        publisher: '위키북스'
      }, {
        name: '딥러닝을 위한 수학',
        price: 25000,
        publisher: '위키북스'
      }]

      // 가격으로 정렬한 뒤 출력합니다.
      const output = _.sortBy(books, (book) => book.price)
      console.log(JSON.stringify(output, null,2))      
    </script>
  </head>
  <body></body>
</html>

속성 존재 여부 확인

객체 내부에 어떤 속성이 있는지 확인해보는 코드는 내가 코드를 작성할 때도, 남이 만든 코드를 이해할 때도 필요함

 

객체가 없는 속성에 접근하면 undefined 자료형이 나오는데 조건문으로 undefined인지 아닌지 확인하면

속성 존재 여부를 확인할 수 있다.

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <script>
      // 객체를 생성합니다.
      const object = {
        name: '혼자 공부하는 파이썬',
        price: 18000,
        publisher: '한빛미디어'
      }

      // 객체 내부에 속성이 있는지 확인합니다.
      if (object.name !== undefined) {
        console.log('name 속성이 있습니다.')
      } else {
        console.log('name 속성이 없습니다.')
      }
      if (object.author !== undefined) {
        console.log('author 속성이 있습니다.')        
      } else { 
        console.log('author 속성이 없습니다.')
      }
    </script>
  </head>
  <body></body>
</html>

//name 속성이 있습니다.
//author 속성이 없습니다.

일반적으로 개발자들은 더 간단히 검사하기 위해

다음과 같이 사용하기도 한다.

if (object.name) {
	console.log('name 속성이 있습니다.')
} else {
	console.log('name 속성이 없습니다.')
}
if (object.author) {
	console.log('author 속성이 있습니다.')
} else {
	console.log('author 속성이 없습니다.')
}

더 짧게 쓴다면 이렇게도 가능하다.

object.name || console.log('name 속성이 없습니다')
object.author || console.log('author 속성이 없습니다')

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <script>
      // 객체를 생성
      const object = {
        name: '혼자 공부하는 파이썬',
        price: 18000,
        publisher: '한빛미디어'
      }

       // 객체의 기본 속성을 지정
       object.name = object.name !== undefined ? object.name : '제목 미정'
       object.author = object.author !== undefined ? object.author : '저자 미상'

       // 객체를 출력
       console.log(JSON.stringify(object, null, 2))
    </script>
  </head>
  <body></body>
</html>

{

	"name": "혼자 공부하는 파이썬",
    "price": 18000,
    "publisher": "한빛미디어",
    "author": "저자 미상"
}

 

마찬가지로 짧게 쓸수 있다.

object.name = object.name || '제목 미정'
object.author = objet.author || '저자 미상'

객체 기반의 다중 할당

최신 자바스크립트에서는 객체 내부에 있는 속성을 꺼내 변수로 할당할 때 아래의 코드를 사용 할 수있다.

 

객체 속성 꺼내서 다중 할당하기

 

{ 속성 이름, 속성 이름 } = 객체
{ 식별자=속성 이름, 식별자=속성 이름 } = 객체

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <script>
      // 객체를 생성합니다.
      const object = {
        name: '혼자 공부하는 파이썬',
        price: 18000,
        publisher: '한빛미디어'
      }

       // 객체에서 변수를 추출합니다.
       const { name, price } = object
       console.log('# 속성 이름 그대로 꺼내서 출력하기')
       console.log(name, price)
       console.log('')

       const { a=name, b=price } = object
       console.log('# 다른 이름으로 속성 꺼내서 출력하기')
       console.log(a, b)
    </script>
  </head>
  <body></body>
</html>

배열 전개 연산자

배열과 객체는 할당할 때 얕은 복사 라는것이 이루어진다.

아래 코드는 '물건_200301'라는 배열을 '물건_200302'로 복사하는 코드이다.

복사한 뒤에는 '물건_200302'에 push() 메소드를 호출해 자료를 추가하고 '물건_200301'과 '물건_200302'를 출력하면 어떤 값을 출력할까?

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <script>
      // 사야 하는 물건 목록
      const 물건_200301 = ['우유', '식빵']
      const 물건_200302 = 물건_200301
      물건_200302.push('고구마')
      물건_200302.push('토마토')

      // 출력
      console.log(물건_200301)
      console.log(물건_200302)
    </script>
  </head>
  <body></body>
</html>

//(4) ["우유", "식빵", "고구마", "토마토"]
//(4) ["우유," "식빵", "고구마", "토마토"]

특이하게도 같은 값이 나온다. 배열은 복사해도 다른 이름이 붙을 뿐이다. 

이렇게 복사했을 때 다른 이름이 붙을 뿐 인것을 얕은 복사(참조 복사)라고 한다.

 

얕은 복사의 반대말은 깊은 복사인데, 깊은 복사라면 복사한 두 배열이 완전히 독립적으로 작동한다.

 

전개 연산자를 사용한 배열 복사

[...배열]

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <script>
      // 사야 하는 물건 목록
      const 물건_200301 = ['우유', '식빵']
      const 물건_200302 = [...물건_200301] // 전개 연산자를 통해 배열을 복사했음
      물건_200302.push('고구마')
      물건_200302.push('토마토')

      // 출력
      console.log(물건_200301)
      console.log(물건_200302)
    </script>
  </head>
  <body></body>
</html>

//(2) ["우유", "식빵"]
//(4) ["우유", "식빵", "고구마", "토마토"]

 

전개 연산자를 사용한 배열 요소 추가

[...배열, 자료, 자료, 자료]

다음 코드와 같이 자료를 앞에 추가할 수도 있다.

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <script>
      // 사야 하는 물건 목록
      const 물건_200301 = ['우유', '식빵']
      const 물건_200302 = ['고구마', ...물건_200301, '토마토']

      // 출력
      console.log(물건_200301)
      console.log(물건_200302)
    </script>
  </head>
  <body></body>
</html>

전개 연산자를 입력한 곳에 배열이 전개되어 들어가는 것뿐이므로 다음과 같이 배열을 여러 번 전개 할 수도 있다.

또한 다른 2개 이상의 배열을 붙일 때도 활용 할 수있음.

 

객체 전개 연산자

마찬가지로 객체도 깊은 복사시 전개 연산자를 사용할수 있다.

 

{...객체}

얇은 복사로 객체 복사하기

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <script>
      const 구름 = {
        이름: '구름',
        나이: 6,
        종족: '강아지'
      }
      const 별 = 구름
      별.이름 = '별'
      별.나이 = 1

      console.log(JSON.stringify(구름))
      console.log(JSON.stringify(별))
    </script>
  </head>
  <body></body>
</html>


//{"이름":"별","나이":1,"종족":"강아지"}
//{"이름":"별","나이":1,"종족":"강아지"}

전개 연산자를 통해 깊은 복사 하기

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <script>
      const 구름 = {
        이름: '구름',
        나이: 6,
        종족: '강아지'
      }
      const 별 = {...구름}
      별.이름 = '별'
      별.나이 = 1

      console.log(JSON.stringify(구름))
      console.log(JSON.stringify(별))
    </script>
  </head>
  <body></body>
</html>
//{"이름":"구름","나이":6,"종족":강아지"}
//{"이름":"별","나이":1,"종족":"강아지"}

전개 연산자를 사용한 객체 요소 추가

{...객체, 자료, 자료, 자료}

변경하고 싶은 속성만 추가하기

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <script>
      const 구름 = {
        이름: '구름',
        나이: 6,
        종족: '강아지'
      }
      const 별 = {
        ...구름,
        이름: '별',
        나이: 1,
        예방접종: true
      }

      console.log(JSON.stringify(구름))
      console.log(JSON.stringify(별))
    </script>
  </head>
  <body></body>
  </html>
//{"이름":"구름","나이":6,"종족":"강아지"}
//{"이름":"별","나이":1,"종족":"강아지","예방접종":true}

객체는 전개 순서가 중요하며 전개라는 이름처럼 전개한 부분에 객체가 펼쳐진다.

 

다음과 같이 입력한 경우는 '구름'이라는 객체가 앞부분에 전개되는데 이로 인해 뒤에 있는 이름과 나이가 앞에있는 이름과 나이를 덮어쓴다.

const 별 = {
	...rnfma,
    이름: '별',
    나이: 1,
    예방접종: true
}

 

const 별 = {
	이름: '구름',
    나이: 6,			// 이렇게 전개됨
    종족: '강아지'
    
    이름: '별',
    나이: 1,
    예방접종: true
}

----

const 별 = {
	이름: '별',
    나이: 1,
    예방접종:true,
    ...구름
}

 

전개 부분 뒤로 이동하기

 

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <script>
      const 구름 = {
        이름: '구름',
        나이: 6,
        종족: '강아지'
      }
      const 별 = {
        이름: '별',
        나이: 1,
        예방접종: true,
        ...구름
      }

      console.log(JSON.stringify(구름))
      console.log(JSON.stringify(별))
    </script>
  </head>
  <body></body>
</html>

//{"이름":"구름","나이":6,"종족":"강아지"}
//{"이름":"구름","나이":6,"예방접종":true,"종족":"강아지"}

객체와 관련된 다소 어려운 내용이지만 공부하다보면 계속 만나게되므로 꼭 살펴볼것.