- 객체 : 실제로 존재하는 사물
- 속성 : 이름과 값으로 구성
- ex ) 이름 : 구름, 나이 : 7살, 산책하기(), 밥 먹기() → 모두 속성으로 산책하기(), 밥 먹기()는 속성 중에 동작(함수)인 것으로 메소드라고 한다.
객체
<script>
const product = {
제품명: '7D 건조 망고',
유형: '당절임',
성분: '망고, 설탕, 메타중아황산나트륨, 치자황색소',
원산지: '필리핀'
}
</script>
- 객체 뒤에 대괄호 사용하고 키를 입력하면 요소에 접근 가능
product['제품명'] -> '7D 건조 망고'
product['유형'] -> '당절임'
product['성분'] -> '망고, 설탕, 메타중아황산나트륨, 치자황색소'
product['원산지'] -> '필리핀'
product.제품명 -> '7D 건조 망고'
product.유형 -> '당절임'
product.성분 -> '망고, 설탕, 메타중아황산나트륨, 치자황색소'
product.원산지 -> '필리핀'
속성과 메소드
- 요소 : 배열 내부에 있는 값
- 속성 : 객체 내부에 있는 값
- 메소드 : 객체의 속성 중 함수 자료형이 속성
<script>
const pet = {
name: '구름',
eat: function (food) { }
}
// 메소드를 호출한다.
pet.eat()
</script>
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>
// 실행 결과
// {
// "이름": "윤인성",
// "취미": "악기",
// "장래희망": "생명공학자"
// }
- 삭제
<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>
// 실행 결과
// 구름은/는 밥을/를 먹습니다.
객체 자료형
- 객체 : 속성과 메소드를 가질 수 있는 모든 것 ex) 객체
- 배열도 속성을 가질 수 있다.
> const a = []
undefined
> a.sample = 10
10
> a.sample
10
> typeof a
"object"
> Array.isArray(a)
true
- 함수도 객체를 가질 수 있다.
- 함수는 실행이 가능한 객체라는 특이한 자료로 typeof 연산자를 사용해서 자료형을 확인하면 object가 아닌 function을 출력하므로 객체의 특성을 완벽하게 가지고 있으므로 일급객체라고도 한다.
> function b () {}
undefined
> b.sample = 10
10
> b.sample
10
> typeof b
"function"
기본 자료형
- 실체가 있는 것 중에서 객체가 아닌 것
- 숫자, 문자열, 불
- 객체가 아니므로 속성을 가질 수 없다.
> const c = 273
undenfined
> c.sample = 10
10
> c.sample
undefined // 속성을 만들 수 있는 것처럼 보이지만 실제로는 만들어지지 않는다.
> const d = '안녕하세요'
undefined
> d.sample = 10
10
> d.sample
undefined
기본 자료형을 객체로 선언하기
- Number, String, Boolean 함수 사용
const 객체 = new 객체 자료형 이름()
new Number(10)
new String('안녕하세요')
new Boolean(true)
> const f = new Number(273)
undefined
> typeof f
"object"
> f.sample = 10
> f.sample
10
> f
Number {273, sample : 10}
> f + 0
273
> f.valueOf()
273
프로토타입으로 메소드 추가하기
객체 자료형 이름.prototype.메소드 이름 = function () {
}
> Number.prototype.sample = 10
10
> const i = 273
undefined
> i.sample
10
제곱 연산자(**)
> 2 ** 2
4
> 2 ** 3
8
> 2 ** 4
16
<script>
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))
</script>
// 실행 결과
// a.power(): 144
// a.power(3): 1728
// a.power(4): 20736
indexOf()
- 해당 문자열이 시작하는 위치(인덱스)를 출력하고, 없으면 -1을 출력한다.
> const j = '안녕하세요'
undefined
> j.indexOf('안녕')
0
> j.indexOf('하세')
2
> j.indexOf('없는 문자열')
-1
// 배열의 indexOf()
> const k = [1, 2, 3]
undefined
> k.indexOf(2)
1
> k.indexOf(3)
2
> k.indexOf(100)
-1
contain()
- 문자열 내부에 문자열이 포함되어 있는지 여부를 구한다.
<script>
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))
</script>
// 실행 결과
// 안녕 in 안녕하세요: true
// 없는데 in 안녕하세요: false
// 273 in [273, 32, 103, 57, 52]: true
// 0 in [273, 32, 103, 57, 52]: false
Number 객체
- 숫자 N번째 자릿수까지 출력하기 : toFixed()
> const l = 123.456789
undefined
> l.toFixed(2)
"123.46"
> l.toFixed(3)
"123.457"
> l.toFixed(4)
"123.4568"
- NaN과 Infinity 확인하기 : isNaN(), isFinite()
- NaN - NaN인지 여부 확인
> 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
> Number.isFinite(1)
true
> Number.isFinite(10)
true
String 객체
> const stringA = `
메시지를 입력하다보니 앞에 줄바꿈도 들어가고`
undefined
> const stringB = ` 앞과 뒤에 공백도 들어가고 `
undefined
> stringA
"
메시지를 입력하다보니 앞에 줄바꿈도 들어가고"
> stringB
" 앞과 뒤에 공백도 들어가고 "
> stringA.trim()
"메시지를 입력하다보니 앞에 줄바꿈도 들어가고"
> stringB.trim()
"앞과 뒤에 공백도 들어가고"
> let input = `
일자,달러,엔,유로
02,1141.8,1097.46,1262.37
03,1148.7,1111.36,1274.65
`
undefined
> input = input.trim()
"일자,달러,엔,유로
02,1141.8,1097.46,1262.37
03,1148.7,1111.36,1274.65"
> input = input.split('\\n')
["일자,달러,엔,유로", "02,1141.8,1097.46,1262.37", "03,1148.7,1111.36,1274.65"]
> input = input.map((line) => line.split(','))
[Array(4), Array(4), Array(4)]
> JSON.stringify(input, null, 2)
"[
[
"일자",
"달러",
"엔",
"유로"
],
[
"02",
"1141.8",
"1097.46",
"1262.37",
],
[
"03",
"1148.7",
"1111.36",
"1274.65"
]
]"
JSON 객체
- JSON.stringify() → 자바스크립트 객체를 JSON 문자열로 변환할 때
- 2번째 매개변수는 객체에서 어떤 속성만 선택해서 추출하고 싶을 때 사용하나 거의 사용하지 않으며, 일반적으로 null을 넣는다.
- 3번째 매개변수는 들여쓰기 2칸으로 설정한다.
<script>
const data = [{
name: '혼자 공부하는 파이썬',
price: 18000,
publisher: '한빛미디어'
}, {
name: 'HTML5 웹 프로그래밍 입문',
price: 26000,
publisher: '한빛아카데미'
}]
console.log(JSON.stringify(data))
console.log(JSON.stringify(data, null, 2))
</script>
// 실행 결과
// [{"name": "혼자 공부하는 파이썬","price": 18000,"publisher": "한빛미디어"}, {"name": "HTML5 웹 프로그래밍 입문","price": 26000,"publisher": "한빛아카데미"}]
// [
// {
// "name": "혼자 공부하는 파이썬",
// "price": 18000,
// "publisher": "한빛미디어"
// },
// {
// "name": "HTML5 웹 프로그래밍 입문",
// "price": 26000,
// "publisher": "한빛아카데미"
// }
// ]
- JSON.parse() → JSON 문자열을 자바스크립트 객체로 전개할 때
<script>
const data = [{
name: '혼자 공부하는 파이썬',
price: 18000,
publisher: '한빛미디어'
}, {
name: 'HTML5 웹 프로그래밍 입문',
price: 26000,
publisher: '한빛아카데미'
}]
const json = JSON.stringify(data)
console.log(json)
console.log(JSON.parse(json))
</script>
// 실행 결과
// [{"name": "혼자 공부하는 파이썬","price": 18000,"publisher": "한빛미디어"}, {"name": "HTML5 웹 프로그래밍 입문","price": 26000,"publisher": "한빛아카데미"}]
// Array(2)
// 0: {"name": "혼자 공부하는 파이썬","price": 18000,"publisher": "한빛미디어"}
// 1: {"name": "HTML5 웹 프로그래밍 입문","price": 26000,"publisher": "한빛아카데미"}
// length: 2
// __proto__: Array(0)
Math 객체
- Math.sin(), Math.cos(), Math.tan()
> Math.PI
3.141592653589793
> Math.E
2.718281828459045
<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("-5~5 사이 랜덤한 정수 숫자: ", Math.floor(num * 10 - 5))
console.log("-25~25 사이 랜덤한 정수 숫자: ", Math.floor(num * 50 - 25))
console.log('')
</script>
// 실행 결과
// # 랜덤한 숫자
// 0-1 사이 랜덤한 숫자: 0.56234851654
// # 랜덤한 숫자 범위 확대
// 0~10 사이 랜덤한 숫자: 0.75354653215
// 0~50 사이 랜덤한 숫자: 3.45131644565
// # 랜덤한 숫자 범위 이동
// -5~5 사이 랜덤한 숫자: -4.135465433213
// -25~25 사이 랜덤한 숫자: -21.6513165464
// # 랜덤한 정수 숫자
// -5~5 사이 랜덤한 정수 숫자: -5
// -25~25 사이 랜덤한 정수 숫자: -22