[혼공자스] 06. 객체

 

 

 

 

객체

" 이름name 과 값 value으로 구성된 속성property을 가진 기본 데이터 타입"

 

 

배열과 객체의 차이점

 

배열: 인덱스index 와 요소 element / 인덱스로 요소에 접근

객체: 키key(식별자 사용) 와 값(속성) property / 값에 대괄호, 온점을 통해 접근

# 식별자: 숫자로 시작X, 기호는 $와 _만 포함

<script> //객체 선언
  const product = {
    제품명 : '7D 건조 망고',
    유형: '당 절임',
    성분: '망고, 설탕, 메타중아황산나트륨, 치자황색소',
    원산지: '필리핀'
  }
</script>

  product['제품명']
  product['유형']
  product.성분
  product.원산지

 

 

---

 

 

속성과 메소드

 

요소: 배열 내부에 있는 값

속성: 객체 내부에 있는 값

속성과 메소드 구분하기
메소드: 속성 안에 있는 함수. 자바스크립트에서는 함수도 속성에 포함됨.

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

  //메소드를 호출
  pet.eat()
</script>

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

 

메소드 내부에서 this 키워드 사용하기
메소드 내에 자기 자신이 가진 속성을 출력하고 싶을 때 자신이 가진 속성임을 분명하게 표시해야함. 그래서 this 키워드 사용.

//메소드 내부에서의 this 키워트
<script>
  //변수 선언
  const pet = {
    name : '구름',
    eat: function (food) {
      alert(this.name + '은/는 ' + food + '을/를 먹습니다.')
    }
  }

  //메소드를 호출
  pet.eat('밥')
</script>

 

 

 

---

 

 

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

객체를 처음 생성한 이후에 속성을 추가, 제거하는 것.

객체를 처음 생성 = 객체의 키와 값을 정적으로 생성

객체의 키와 값을 최초 생성 이후 추가, 제거하는 것 = 객체의 키와 값을 동적으로 생성

 

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

객체. 속성 = 값
객체['속성'] = 값

<script>
  // 객체를 선언
  const student = {}
  student.이름 = '윤인성'
  student.취미 = '악기'
  student.장래희망 = '생명공학자'

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

 

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

delete객체.속성 = 값

<script>
  //객체 선언
  const student = {}
  student.이름 = '윤인성'
  student.취미 = '악기'
  student.장래희망= '생명공학자'

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

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

 

 

메소드 간단 선언 구문

<script>
  //변수 선언
  const pet = {
    name: '구름',
    eat (food) {
      alert(this.name + '은/는 ' + food + '을/를 먹습니다.')
    }
  }
  //메소드 호출
  pet.eat('밥')
</script>

 

화살표 함수를 사용한 메소드
익명함수: function () {} 형태로 선언
화살표 함수: () => {} 형태로 선언
익명 함수와 화살표 함수의 객체의 메소드로 사용될 때 this 키워드를 다루는 방식이 다름

<script>
  //변수 선언
  const test = {
    a : function () { // 익명 함수로 선언
      console.log(this)
    },
    b : () => {  // 화살표 함수로 선언
      console.log(this)
    }
  }

  //메소드 호출
  test.a()
  test.b()
</script>

this 키워드는 익명 함수에서 자기자신(객체를 바인딩 할 수 있다.)을 불러올 수 있지만,

화살표 함수에서는 자기자신을 불러올 수 없다(객체를 바인딩 할 수 없다) 화살표함수랑 this 를 같이 쓰면 그냥 외부에서 this쓸 때랑 같은 결과값이 나옴.

 

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

 

 

자바스크립트 자료형은 크게 기본자료형과 객체자료형으로 나눌 수 있음.

 

객체 자료형

 

객체: 속성과 메소드를 가질 수 있는 모든 것.(배열, 함수 포함)

//배열이 속성을 가질 수 있음 (배열도 객체)
> const a = []
undefined
> a.sample = 10
10
> a.sample
10
>typeof a
'object' // 배열의 자료형을 확인하면 객체로 나온다.

//함수가 속성을 가질 수 있음(함수도 객체)
>function b () {}
undefined
>b.sample = 10
10
>b.sample
10
>typeof b
'function' //자료형이 함수로 나오는데, 함수는 객체의 특성을 완벽하게 갖고있으므로 자바스크립트에서 함수를 일급 객체(first-class object)에 속한다고 표현.

 

 

 

기본 자료형

 

자바스크립트에서는 실체가 있는 것(undefined와 null 등이 아닌 것) 중 객체가 아닌 것을 기본 자료형이라고 부름. : 숫자, 문자열, 불

//숫자는 속성이 추가되지 않음
> const c = 273
undefined
> c.sample = 10
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

 

 

기본 자료형을 객체로 선언하기
숫자, 문자열, 불 등으로 자료형을 변환하는 함수 ( Number, String, Boolean)
const 객체 = new 객체 자료형 이름 ( )

아래와 같이 사용하면 기본 자료형을 객체로 만들 수 있음. 속성과 메소드를 활용가능
new Nember (10) : 숫자 객체
new String ('안녕하세요') : 문자열 객체
new Boolean (true) : 불 객체
※ new 키워드를 사용하지 않으면 함수가 자료형 변환 기능으로 작동됨. 그럼 객체가 아니게됨.

 

//기본 자료형(숫자)를 숫자 객체로 만들기
> const f = new Number(273)
undefined
> typeof f
'object'
> f.sample = 10
10
> f. sample
10 // 속성을 갖음!
> f
Number {273, sample: 10} // 콘솔에서 단순하게 f를 출력하면 객체 형태로 출력
> f + 0 //숫자와 똑같이 활용가능. valueOf()메소드를 사용해서 값을 출력 가능
273
> f.valueOf()
273

 

 

기본 자료형의 일시적 승급 "있었는데요. 없었습니다"
문자열 자료형 등을 생성하고 온점을 찍으면 자동 완성 기능으로 메소드들이 등장함.
원래 기본 자료형(숫자, 문자열, 불)은 속성과 메소드를 가질 수 없으나
기본 자료형의 속성과 메소드를 호출할 때 일시적으로 기본 자료형을 객체로 승급시켜 속성과 메소드를 사용할 수 있게 함.
거의 뭐 줬다 뺐는너낌.

> const h = '안녕하세요'
undefined
> h.sample = 10
10 // 일시적으로 객체로 승급 -> smple 속성을 추가할 수 있게 됨.
> h.sample
undefined //일시적으로 승급된 것이라 추가했던 sample속성은 사라짐.

 

 

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

승급 때 일시적으로 입는 옷 자체를 변경하는 건 어떨까
어떤 객체의 prototype이라는 속성이 바로 객체 전용 옷(틀)임.
prototype객체에 속성과 메소드를 추가하면 모든 객체(와 기본 자료형)에서 해당 속성과 메소드를 사용할 수 있음.

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

 

> Number.prototype.sample = 10
10
> const i = 273
undefined
> i.sample
10

<script>
  //프로토타입으로 숫자 메소드 추가하기
  //power() 메소드를 추가
  Number.prototype.power = function (n=2) {
    return this.valueOf() ** n
  }

  //Number 객체의 power()메소드를 사용
  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))
</script>

ㄴ 그냥 this ** n을 해도 문제없이 계산은 되지만 객체 내부에서 값을 꺼내 쓰는 것임을 명확하게 하기 위해서 4행처럼 valueOf() 메소드를 사용하는 것이 일반적

 

indexOf() 메소드 사용: 자바스크립트에서 문자열 내부에 어떤 문자열이 있는지, 배열 내부에 어떤 자료가 있는지 확인

//indexOf()메소드 문자열 확인
> const j = '안녕하세요'
undefined
> j.indexOf('안녕')
0
> j.indexOf('하세') // 문자열 내에 있는 문자열이면 인덱스를 출력
2
> j.indexOf('없는 문자열')
-1  //문자열 내에 없는 문자열이면 -1이 출력됨.

//indexOf()메소드 숫자 확인
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를 리턴하는 형태로 변경하면 편리하게 사용 가능

<script>
  //contain()메소드를 추가
  String.prototype.contain = function(data) {
    return this.indexOf(data) >= 0
  }

  Array.prototype.contain = function (data) {
    return this.indexOf(data) >= 0
  }

  //String 객체의 contain()메소드를 사용
  const a = '안녕하세요'
  console.log('안녕 in 안녕하세요:', a.contain('안녕'))
  console.log('없는데 in 안녕하세요:', a.contain('없는데'))

  //Array 객체의 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))
</script>

 

 

Number 객체

숫자 N번째 자릿수까지 출력하기 : toFixed( N ) "소수점 이하 몇자리까지만 출력"
문자열로 출력됨

 

> const l = 123.456789
undefined
> l.toFixed(2)
'123.46'   //소수점 아래 2자리까지 출력
> l.toFixed(3)
'123.457'  //소수점 아래 3자리까지 출력
> l.toFixed(4)
'123.4568' //소수점 아래 4자리까지 출력

 

 

 

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

 

Number.isNaN() 와 Number.isFinite() 메소드 :
어떤 숫자가 NaN(Not a Number_숫자로 나타낼 수 없는 숫자)인지 또는 Infinity(무한) 확인
isNaN ( ) : 매개변수에 NaN이 오면 true , NaN이 안오면 false 출력
isFinite( ) : 자바스크립트에서 매개변수에 10/0을 넣으면 infinity로 출력됨

※ 보통 is○○( ) 메소드는 true 또는 false 를 불자료를 리턴함.

//isNaN( ) 메소드 사용
> const m = Number('숫자로 변환할 수 없는 경우')
undefined
> m
NaN
> m === 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가 나옴

 

 

String 객체

 

String 객체 기본 메소드: 문자열 양쪽 끝의 공백 없애기 " trim( ) "

> const stringA = '                      메시지를 입력하다보니 앞에 줄바꿈도 들어가고'
undefined
> const stringB = '             앞과 뒤에 공백도 들어가고           '
undefined
> stringA
'                      메시지를 입력하다보니 앞에 줄바꿈도 들어가고'
> stringB
'             앞과 뒤에 공백도 들어가고           '
> stringA.trim()
'메시지를 입력하다보니 앞에 줄바꿈도 들어가고'
> stringB.trim()
'앞과 뒤에 공백도 들어가고'

 

 

String 객체 기본 메소드 : 문자열을 특정 기호로 자르기 " split( ) " 

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

> 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
`      //이거 작은 따옴표가 아니다!!!!!!!! ~ 이랑 같이 있는 키다! 작은 따옴표쓰면 줄바꿈시 문자열로 인식이 안된다!!! 
undefined
> input = input.trim() // 띄어쓰기 공간 지우기
'일자, 달러, 엔, 유로\n02,1141.8, 1097.46, 1262.37\n03,1148.7,1111.36,1274.65\n04,1140.6,1107.81,1266.58\n07,1143.4, 1099.58, 1267.8\n08,1141.6, 1091.97, 1261.07'
> input = input.split('\n') //줄바꿈되어 있는 공간 자르기 
(6) ['일자, 달러, 엔, 유로', '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[[Prototype]]: Array(0)
> JSON.stringify(input, null, 2)
'[\n  [\n    "일자",\n    " 달러",\n    " 엔",\n    " 유로"\n  ],\n  [\n    "02",\n    "1141.8",\n    " 1097.46",\n    " 1262.37"\n  ],\n  [\n    "03",\n    "1148.7",\n    "1111.36",\n    "1274.65"\n  ],\n  [\n    "04",\n    "1140.6",\n    "1107.81",\n    "1266.58"\n  ],\n  [\n    "07",\n    "1143.4",\n    " 1099.58",\n    " 1267.8"\n  ],\n  [\n    "08",\n    "1141.6",\n    " 1091.97",\n    " 1261.07"\n  ]\n]'

이외의 String 객체의 중요 속성은 length 속성, indexOf() 메소드 등이 있음
다른 메소드들은 모질라 문서 참고 요망

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String

String - JavaScript | MDN

 

 

 

Math 객체

 

" 수학과 관련된 기본적인 연산 시 사용 "

> Math.PI
3.141592653589793
> Math.E
2.718281828459045

Math.floor 내림 / Math.ceil 올림 / Math.round 반올림 / Math.max 최대값 / Math.min 최소값 여기에 배열을 넣으면 안되고 배열을 넣으려면 전개연산자를 이용해야함

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math

Math - JavaScript | MDN

 

 

Math객체의 메소드 중 랜덤한 숫자 만들기 " Math.random( ) "
0 이상, 1 미만의 랜덤한 숫자를 생성. 0 <= 결과 < 1의 범위만 생성.

예시) 1~50 사이의 랜덤한 정수가 필요할 경우
Math.floor ( Math.random() * 50 ) 로 사용함.  

<script>
   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('-25~25 사이의 랜덤한 정수 숫자:', Math.floor(num * 50 - 25))
   console.log('-5 ~ 5 사이의 랜덤한 정수 숫자:', Math.floor(num * 10 - 5))
   console.log('')
</script>

 

위의 코드를 실행하면 이와 같은 결과를 브라우저 콘솔(F12)에서 볼 수 있다.

 

 

 

 

---

 

JSON 객체

"JavaScript Object Notation. 자바스크립트의 객체처럼 자료를 표현하는 방식"

인터넷에서 문자열로 데이터를 주고 받을 때 CSV, XML, CSON 등의 다양한 자료 표현 방식을 사용할 수 있다.
현재 가장 많이 사용되는 자료 표현 방식은 JSON 객체임. 자바스크립트의 배열과 객체를 활용해 어떤 자료를 표현하는 형식.

JSON형식의 규칙
1. 값을 표현할 때 : 문자열, 숫자, 불 자료형만 사용 가능 (함수 등은 사용 불가)
2. 문자열은 반드시 큰따옴표 사용.
3. 키에도 반드시 따옴표를 붙여야 함.

 

JSON객체의 메소드는 2가지뿐
자바스크립트 객체를 JSON문자열로 변환할 때는 JSON.stringify( )메소드 사용.

<script>
  //자료를 생성
  const data = [{
    name : '혼자 공부하는 자바스크립트',
    price : 18000,
    publisher : '한빛미디어'
  }, {
    name : 'HTML5 웹 프로그래밍 입문',
    price : 26000,
    publisher : '한빛아카데이'
  }]

  //자료를 JSON으로 변환
  console.log(JSON.stringify(data))
  console.log(JSON.stringify(data, null, 2))
</script>

 

위의 코드를 실행하면 이와 같은 결과를 브라우저 콘솔(F12)에서 볼 수 있다.

 

JSON 문자열을 자바스크립트 객체로 전환할 때 : JSON.parse( ) 메소드 사용 _ 매개변수에 JSON 형식의 문자열을 넣어주면됨

<script>
  //자료를 생성
  const data = [{
    name : '혼자 공부하는 자바스크립트',
    price : 18000,
    publisher : '한빛미디어'
  }, {
    name : 'HTML5 웹 프로그래밍 입문',
    price : 26000,
    publisher : '한빛아카데이'
  }]

  //자료를 JSON으로 변환
  const json = JSON.stringify(data)
  console.log(json)

  //JSON 문자열을 다시 자바스크립트 객체로 변환
  console.log(JSON.parse(json))
</script>

 

위의 코드를 실행하면 이와 같은 결과를 브라우저 콘솔(F12)에서 볼 수 있다.

 

 

---

 

 

외부 script 파일 읽어들이기

프로그램의 규모가 커지면서 파일 하나가 너무 방대해지기 대문에 파일을 분리하는게 좋음.
a.html과 b.js 파일 생성해서 같은 폴더에 넣어줌.확장자 js인 파일이 바로 읽어들일 외부 자바스크립트 파일임.

html 파일에 js파일을 script 태그로 불러와서 사용함
<script src = "b.js"></script>

js파일에서 간단하게 alert('안녕하세요')라고 치면 한글이 깨져서 안나오는 경우가 있는데
그럴 땐 title태그 위에 아래와 같은 걸 적으면 한글이 안깨진다.
<meta charset="utf-8"> 

 

//main.html 파일에서 작성
<!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>

//test.js 파일에서 작성
console.log('#test/js 파일')
const sample = 10

위와 같은 코드 작성하고, html 파일을 실행하면 아래와 같이 결과가 나온다.

위의 코드를 실행하면 이와 같은 결과를 브라우저 콘솔(F12)에서 볼 수 있다.

test/js 파일에 적힌 내용이 먼저 출력되는 이유는 html에 넣은 <script src="test.js"></script> 때문임.

 

---

 

Lodash 라이브러리 ( _ Low dash 의 줄인말)

직접 만든 외부 자바스크립트 파일을 읽어들일 수도 있지만, 다른 사람이 만든 외부 자바스크립트 파일을 사용할 수 있음.
다른 사람들이 만든 다양한 함수와 클래스를 묶어서 제공해주는 것: 외부 라이브러리
유틸리티 라이브러리 : 개발할 때 보조적으로 사용하는 함수들을 제공해주는 라이브러리. 그 중 최근 많이 사용되는 Lodash라이브러리.

https://lodash.com/

Lodash

사이트 다운로드 페이지에서 Full Build 클릭 - 2가지 상황 발생 ( 1. 곧바로 파일 다운로드가 되는 경우 OR 2. 파일 내용이 화면에 출력되는 경우)
1의 경우 다운로드한 파일을 HTML 파일과 같은 위치에 놓고 읽으면 됨
2의 경우 마우스 오른쪽 클릭 - 다른 이름으로 저장 - HTML 파일과 같은 위치에 놓고 다운로드.

 

또 다른 방법으로는 위의 사이트에서 CDN(Contents Delivery Network) copies 클릭 - lodash.min.js 오른쪽에 있는 Copy to Clipboard 아이콘을 클릭하고 Copy HTML 을 마저 클릭하면 복사가 된다. 그걸 이제 html 파일로 돌아와 스크립트에 넣으면 된다. <script src = " CDN코드 카피한거 넣기" ></script>

그 후 라이브러리 사용 방법은 홈페이지에 나와있는 도큐먼트를 보고 익히면 된다. 


Lodash 라이브러리에서 유용하게 활용 가능한 sortBy( ) 메소드

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

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

 

위의 코드를 실행하면 이와 같은 결과를 브라우저 콘솔(F12)에서 볼 수 있다. (price별로 정렬이 된 것)

Lodash 라이브러리는 이외에도 다양한 기능이 있음.
Luxon, date-fns : 날짜와 시간을 다루는 라이브러리
Handsontable : 웹 페이지에 스프레드 시트를 출력하는 라이브러리
D3.js, ChartJS : 그래프를 그릴 수 있는 라이브러리
Three.js : 3차원 그래픽을 다루는 라이브러리

 

 

 

객체와 배열 고급

 

<script>
    const dog = {
      name: '구름',
      age: 6,
      color: '갈색'
    }
    
    //출력될 때 status도 같이 넣고 싶음. 근데 매번 이상없음이라는 객체를 넣기가 귀찮아.
    //그래서 기능을 이용해서 상태에 내용을 집어넣으면 그 내용이 출력되고, 없으면 이상없음으로 출력되도록 만듬
    //아래는 과거에 쓰이던 방법 3가지, 현대에 쓰이는 방법 2가지임.
    const test = function() {
      //과거(1)
      object.status = object.status !== undefined ? object.status : '이상없음'
      //과거(2)
      object.status = object.status ? object.status : '이상없음'
      //과거(3)
      object.status = object.status || '이상없음'
      //현대(1)
      object = {status : '이상없음', ...object}
      //현대(2)
      fun = function({name, age, color, status = '이상없음'}) {
        return `${name}: ${age} : ${color} : ${status}` //함수를 이용해서 기본값을 지정하는 방법
      }
    }
</script>

<script>
    const test = function (object) {
        const {name, age, color, status }/*이걸 이렇게 써주면 5번째 줄에 object.name 이런식으로 써야하는 번거로움이 사라지고, 사람들 이렇게 많이들 사용함.*/ = {status:'이상없음', ...object} 

        return `${name} : ${age} : ${color} : ${status}`
    } 

    console.log(test({
        name : '구름',
        age: 7.
        color : '갈색'
    }))
</script>

 

 

속성 존재 여부 확인

<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>

 

위의 코드를 실행하면 이와 같은 결과를 브라우저 콘솔(F12)에서 볼 수 있다.

위의 코드를 더 짧게 사용가능 (아래)

object.name || console.log('name 속성이 없음')
object.author || console.log('author 속성이 없음')

기본 속성 지정하기

<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>

 

위의 코드를 더 짧게 사용할 수 있음

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

 

배열 기반의 다중 할당
한 번에 여러 개의 변수에 값을 할당하는 다중 할당 기능

> let [a, b] = [1, 2]
undefined
> console.log(a, b)
undefined
> [a, b] = [b, a]
(2) [2, 1]
> console.log(a, b)
undefined

> let arrayA = [1,2,3,4,5]
undefined
> const [a,b,c] = arrayA //배열의 크기는 같을 필요 없음. const키워드로 사용 가능
undefined
> console.log(a,b,c)
undefined

 

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

<script>
  const object = {
    name : '혼자공부하는 자바스크립트',
    price : 18000,
    publiisher : '한빛미디어'
  }
  //객체에서 변수 추출
  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>

 

배열 전개 연산자
배열과 객체는 할당할 때 얕은 복사라는것이 이루어짐

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

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

 

위의 코드를 실행하면 이와 같은 결과를 브라우저 콘솔(F12)에서 볼 수 있다.

출력하면 특이한 결과가 나온다. 배열은 복사해도 다른 이름이 붙을 뿐. 이렇게 복사했을 때 다른 이름이 붙을 뿐인 것을 얕은 복사(참조복사)라고 함.

깊은 복사
복사한 두 배열이 완전히 독립적으로 작동. 자바스크립트에서는 깊은 복사를 '클론(clone)을 만드는 것'이라고 표현
전개 연산자를 이용하여 입력

<script>
   //사야 하는 물건 목록
   const 물건_200301 = ['우유', '식빵']
   const 물건_200302 = [...물건_200301] //전개연산자를 사용하여 배열을 복사
   물건_200302.push('고구마')
   물건_200302.push('토마토')

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

위의 코드를 실행하면 이와 같은 결과를 브라우저 콘솔(F12)에서 볼 수 있다.

 

 

전산 연산자로 배열 전개하고 자료 추가하기

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

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

 

위의 코드를 실행하면 이와 같은 결과를 브라우저 콘솔(F12)에서 볼 수 있다.

 

> const a = ['우유', '식빵']
undefined
> const b = ['고구마','토마토']
undefined
> [...a, ...b]
(4) ['우유', '식빵', '고구마', '토마토']
> [...b,...a]
(4) ['고구마', '토마토', '우유', '식빵']

 

 

객체 전개 연산자
얕은 복사로 객체 복사하기

<script>
   const 구름 = {
      이름: '구름',
      나이: 6,
      종족: '강아지'
   }
   const 별 = 구름
   별.이름 = '별'
   별.나이 = 1

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

 

 

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

<script>
   const 구름 = {
      이름: '구름',
      나이: 6,
      종족: '강아지'
   }
   const 별 = {...구름}
   별.이름 = '별'
   별.나이 = 1

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

 

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

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

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

 

전개 부분 뒤로 이동하기

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

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

 

 

---

 

확인문제1