728x90
자바스크립트 객체의 속성과 메소드 사용하기
📌 기본자료형
- 숫자
- 문자열
- 불
📌 객체자료형
- 함수
- 배열
- 이외 전부 ...
자바스크립트는 유연하므로 기본 자료형이 객체 자료형이 될 수도 있습니다.
객체 자료형
📌 배열
> const a =[]
undefined
> a.sample = 10
10
> a.sample
10
> a
[sample: 10]
> typeof(a)
'object'
> Array.isArray(a)
true속성과 메소드를 가질 수 있는 모든 것이 객체입니다.
그러므로 배열도 객체입니다.
📌 함수
> function b() {}
undefined
> b.sample = 10
10
> b.sample
10
> b
ƒ b() {}
> typeof(b)
'function'함수는 '실행 가능한 객체' 라는 특이한 자료로 객체의 특성을 완벽하게 가지고 있습니다.
자바스크립트에서는 함수를 일급객체(first-class object 또는 first-class citizen)에 속한다고 표현합니다.
📌 기본 자료형(primitive types)
자바스크립트에서는 실체가 있는 것(undefined 와 null 등이 아닌 것) 중에 객체가 아닌 것.
숫자, 문자열, 불이 바로 기본 자료형입니다.
기본 자료형을 객체로 선언하기
const 객체 = new 객체 자료형 이름()
new Number(10)
new String('안녕하세요')
new Boolean(true)기본 자료형을 객체로 선언해주면, 이전과 다르게 속성을 가지게 됩니다.
숫자와 관련된 연산자도 모두 활용 가능하며, 속성과 메소드를 활용할 수도 있습니다.
> const f = new Number(273)
undefined
> typeof f
'object'
> f.sample = 10
10
> f.sample
10
> f
Number {273, sample: 10}
> f + 1
274
> f.valueOf()
273프로토타입으로 메소드 추가하기
객체 전체에 어떤 속성과 메소드를 추가한다면, 기본 자료형도 속성과 메소드를 사용할 수 있습니다.
📌 prototype
객체 전용 옷(틀)
📌 제곱연산자(**)
> 2**2
4
> 2**3
8
> 2**4
16
📌 자료형에 n을 곱하는 메소드
<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>객체 내부에서 값을 꺼내 쓰는 것을 명확하게 하기 위해 valueof() 메소드를 사용하는 것이 일반적입니다.
📌 indexof()
문자열 또는 배열 내부에 어떤 자료가 있는지 확인하기 위해 사용
indexof(자료) → 해당 자료가 위치한 index반환
> onst j = '안녕하세요'
undefined
> j.indexOf('안녕')
0
> j.indexOf('하세')
2
> j.indexOf('없는 문자열')
-1
> const k = [1,2,3]
undefined
> k.indexOf(2)
1
> k.indexOf(3)
2
> k.indexOf(100)
-1문자열.indexof(문자열) >= 0 코드를 활용해 문자열 내부에 어떤 문자가 포함되어 있는지 true또는 false로 결과를 얻을 수 있습니다.
<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>
<script>
const num = 52000
Number.prototype.원 = function () {
return this.valueOf() + '원'
}
console.log(num.원())
</script>
<script>
function printLang(code){
return printLang._lang[code]
}
printLang._lang = {
ko: '한국어',
en: '영어',
ja: '일본어',
fr: '프랑스어',
es: '스페인어'
}
console.log('printLang("ko"):', printLang('ko'))
console.log('printLang("en"):', printLang('en'))
</script>
📌 숫자 N번째 자릿수까지 출력하기:toFixed()
소수점 이하 몇 자리까지만 출력하고 싶을 때 사용.
> const l = 123.456789
undefined
> l.toFixed(2)
'123.46'
> l.toFixed(3)
'123.457'
> l.toFixed(4)
'123.4568'
📌 숫자가 아닌지 확인하기 NaN: isNaN()
Not a number
> const m = Number('숫자로 변환할 수 없는 경우')
undefined
> m
NaN
> Number.isNaN(m)
true
> m === NaN
false
📌 무한인지 확인하기 Infinity:isFinite()
Finite 유한
isFinite가 false이면, 무한값을 의미한다.
NaN과 다르게 무한대 값은 비교 연산자로 비교할 수 있다.
> const n = 20/0
undefined
> n
Infinity
> const o = -10/0
undefined
> o
-Infinity
> Number.isFinite(n)
false
> Number.isFinite(o)
false
> Number.isFinite(1)
true
> n === Infinity || n === -Infinity
true📌 문자열 양쪽 끝의 공백 없애기:trim()
문자열 앞뒤 공백(띄어쓰기, 줄바꿈 등)을 제거
> const stringA = `
메세지를 입력하다보니 앞에 줄바꿈도 들어가고`
undefined
> const stringB = ` 앞과 뒤에 공백도 들어가고 `
undefined
> stringA
'\n 메세지를 입력하다보니 앞에 줄바꿈도 들어가고'
> stringB
' 앞과 뒤에 공백도 들어가고 '
> stringA.trim()
'메세지를 입력하다보니 앞에 줄바꿈도 들어가고'
> stringB.trim()
'앞과 뒤에 공백도 들어가고'
📌 문자열을 특정 기호로 자르기: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]'JSON 객체
JavaScript Object Notation
자바스크립트 객체처럼 자룔를 표현하는 방식
인터넷에서 문자열로 데이터를 주고 받을 때는 CSV, XML, CSON 등의 다양한 자료 표현 방식을 사용할 수 있습니다.
현재 가장 많이 사용되는 자료 표현 방식은 JSON객체입니다.
자바스크립트 배열과 객체를 활용해 어떤 자료를 표현하는 형식!
- 값을 표현할 때는 문자열, 숫자, 불 자료형으로만 사용(함수 사용 불가)
- 문자열은 반드시 큰따옴표로 만듦
- 키도 반드시 큰따옴표로 만듦
📌 JSON.stringify()
자바스크립트 객체를 JSON문자열로 반환할 때 사용하는 메소드
<script>
const data = [{
name: '혼자 공부하는 파이썬',
price: 18000,
publisher: '한빛미디어'
},{
name: 'HTMLS 웹 프로그래밍 입문',
price: 26000,
publisher: '한빛아카데미'
}]
console.log(JSON.stringify(data))
// 2번째 매개변수는 객체에서 어떤 속성만 선택해 추출하고 싶을 때 사용
// 일반벅으로 null을 넣음
// 3번째 매개변수는 2칸 들여쓰기 설정
console.log(JSON.stringify(data, null, 2))
</script>
📌 JSON.parse()
JSON 문자열을 자바스크립트 객체로 전개할 때 사용
<script>
const data = [{
name: '혼자 공부하는 파이썬',
price: 18000,
publisher: '한빛미디어'
},{
name: 'HTMLS 웹 프로그래밍 입문',
price: 26000,
publisher: '한빛아카데미'
}]
const json = JSON.stringify(data)
console.log(json)
console.log(JSON.parse(json))
</script>
Math 객체
수학과 관련된 기본적인 연산을 할때 사용.
pi, e 수학 상수부터 Math.sin(), Math.cos(), Math.tan()와 같은 삼각함수도 있음.
> Math.PI
3.141592653589793
> Math.E
2.718281828459045
📌 랜덤한 숫자 형성 : Math.random()
<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>
📌 sin(90) 구하기
<script>
const degree = 90
const value = Math.sin(degree)
console.log(value.toFixed(0))
</script>단순하게 반올림으로 생각했으나, radian수식을 활용해야 하는 문제였다.
<script>
const degree = 90
const radian = 90 * (Math.PI / 180)
console.log(Math.sin(radian))
</script>60분법을 rad단위로 바꾸기 위해서는 pi / 180을 곱하면 된다.
외부 script 파일 읽어들이기
📌 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
Lodash 라이브러리
다른 사람이 만든 외부 자바스크립트 활용.
유틸리티 라이브러리 중 하나로, 개발할 때 보조적으로 사용하는 함수를 제공해주는 라이브러리
low dash(_)의 줄임말
📌 외부라이브러리
다양한 함수와 클래스를 묶어서 제공해주는 것
📌 CND
Contents Delivery Network
전 세계 여러 지역에 전송할 데이터를 창고처럼 준비해두고 사용자가 데이터를 요청했을 때 가장 가까운 지역에서 데이터를 전송해 빠르게 데이터를 전송할 수 있는 통신 네트워크
📌 min
코드를 웅축한하는 것.
집핑(zipping)이라고 부름.
[Documentation] 클릭하면 수많은 함수를 어떻게 사용하는지 그리고 어떤 결과가 나오는지 확인할 수 있음
📌 _sortBy 활용해 name 기준 오름차순 정렬
<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: '머신러닝 딥러닝 실전 개발 입문',
price: 30000,
publisher: '위키북스'
},{
name: '딥러닝을 위한 수학',
price: 25000,
publisher: '위키북스'
}]
const output = _.sortBy(books, ['price'])
console.log(output)
</script>
📌 _orderBy 활용해 name 기준 오름차순 정렬
<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: '머신러닝 딥러닝 실전 개발 입문',
price: 30000,
publisher: '위키북스'
},{
name: '딥러닝을 위한 수학',
price: 25000,
publisher: '위키북스'
}]
const output = _.orderBy(books, (book) => book.name)
console.log(JSON.stringify(output, null, 2))
</script>
참고한 책 : 혼자 공부하는 자바스크립트
'JavaScript' 카테고리의 다른 글
| 자바스크립트 문서 객체 조작하기 (0) | 2022.11.08 |
|---|---|
| 자바스크립트 객체와 배열 고급 (0) | 2022.11.07 |
| 자바스크립트 객체의 기본 (0) | 2022.11.04 |
| 자바스크립트 함수 고급 (0) | 2022.11.03 |
| 자바스크립트 함수의 기본 형태 (0) | 2022.11.03 |
