배열은 요소에 접근할 때 인덱스를 사용한다. 객체는 키(key)를 사용한다.
객체는 중괄호로 생성하며, 쉼표로 연결하여 입력한다.
JSON 형태!
자바에서의 클래스로 이해하면 되겠다.
const product = {
제품명 : "7D 건조 망고"
, 유형 : "당절임"
, 성분 : "망고, 설탕, 메타중아황산나트륨, 치자황색소"
, 원산지 : "필리핀"
}여기서 product는 참조변수이며, Map형식과 비슷하다.
키와 값 뒤에 쉼표를 넣어 구분해주었다.
객체 요소에 접근하는 것은 두 가지 방법이 있다.
1. 대괄호[] 사용 : product["제품명"] -> "7D 건조 망고"를 출력.
"제품명", "유형", "성분", "원산지"가 배열의 index처럼 사용되는 것이다.
2. 온점 . 사용 : product.제품명 -> "7D 건조 망고"를 출력.
온점(접근연산자)를 사용
속성과 메소드
객체의 속성은 모든 형태의 자료값으로 가질 수 있다.
this : 자기 자신이 가진 속성이라는 것을 표시할 때 사용
<script>
const pet = {
name : "콩"
, eat : function (food) {
alert(this.name + "은/는 " + food + "을/를 먹습니다.")
}
}
pet.eat("사료")
</script>
this키워드를 사용하여 자신이 가진 속성에 접근함.
동적으로 객체 속성 추가하고 제거하기
<script>
const student = {}
student.name = "김자바"
student.hobby = "블로그포스팅"
student.goal = "프로그래머"
delete student.goal
console.log(JSON.stringify(student, null, 10))
// JSON.stringify(value[, replacer[, space]])
</script>
객체 추가는 온점을 사용해서 하였으며,
제거는 delete 키워드를 사용하여 속성을 제거하였다.
여기서 JSON.stringify()의 기본형은 JSON.stringify(value[, replacer[, space]]) 이다.
(참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify )
익명함수와 람다식의 this키워드
<script>
const test = {
a : function () {
console.log(this)
},
b : () => {
console.log(this)
}
}
test.a()
test.b()
</script>여기서 a와 b는 key이다.
a는 익명함수로 선언되었고, b는 람다식으로 선언되었다.
만들어진 형태에 따라 this키워드를 출력했을 때, 출력된 메타데이터가 다르다.
객체 자료형
속성과 메소드를 가질 수 있는 모든 것은 객체!!!!
배열, 함수는 객체이다.
- 배열인지 확인하기 위해 Array.isArray() 메소드를 사용.
- 함수는 "실행이 가능"한 객체.
기본 자료형
실체가 있는 것(undefined와 null 제외) 중 객체가 아닌 것!!
숫자, 문자열, 불이 있다.
이러한 자료형은 객체가 아니다.-> 속성을 가질 수 없다.
기본 자료형을 객체로 선언하기
숫자 객체,
문자열 객체,
불 객체
를 생성해보기. -> 단순한 기본 자료형이 아니므로 이전과 다르게 속성을 같는다. (new 예약어 이용)
const 객체 = new 객체_자료형_이름()<script>
const f = new Number(399)
console.log(typeof f)
f.sample = 10
console.log(f.sample)
console.log(f)
console.log(f + 0)
console.log(f.valueOf())
</script>
이렇게 생성해주면 속성을 가질 수 있게 된다.
숫자와 똑같이 활용 가능하고, valueOf()함수를 통해 값을 추출할 수도 있다.
기본 자료형의 일시적 승급
자바스크립트는 편리성을 위해
기본 자료형의 속성과 메소드를 호출할 때 일시적으로 기본 자료형을 객체로 승급시킨다. (일.시.적.으.로)
<script>
const h = "안녕하세요"
h.sample = 10
console.log(h.sample = 10)
console.log(h.sample)
</script>
prototype으로 메소드 추가하기
prototype 객체에 속성과 메소드를 추가하면 모든 객체와 기본 자료형에서 해당 속성과 메소드를 사용할 수 있다.
객체_자료형_이름.prototype.메소드_이름 = function() { }<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>
prototype - indexOf() 함수로 자바스크립트에서
문자열 내부에 어떤 문자열이 있는지, 배열 내부에 어떤 자료가 있는지
확인할 수 있다.
<script>
String.prototype.contain = function (data) {
return this.indexOf(data) >= 0
}
Array.prototype.contain = function (data) {
return this.indexOf(data) >= 0
}
const stringValue = "안녕하세요"
console.log("안녕 in 안녕하세요: ", stringValue.contain("안녕"))
console.log("없는문자열 in 안녕하세요: ", stringValue.contain("없는문자열"))
const arrayValue = [185, 165, 35, 45, 26, 14]
console.log("35 in [185, 165, 35, 45, 26, 14] : ", arrayValue.contain(35))
console.log("0 in [185, 165, 35, 45, 26, 14] : ", arrayValue.contain(0))
</script>
Number 객체- toFixed() 함수로 Number 객체에서 숫자 n번째 자리수(소수점 이하 몇 자리)까지 출력할 수 있다.
<script>
const num = 123.456789
console.log(num.toFixed(2))
console.log(num.toFixed(5))
</script>toFixed()는 반올림을 적용한다.
Number 객체- isNaN() , isFinite() 함수 : NaN과 Infinity 확인하는 함수이다.
toFixed()함수처럼 Number뒤에 점을 찍어 사용하면 된다.
자바스크립트에서는 음수무한대인 -Infinity와 양수무한대인 +Infinity 두 가지의 무한대가 존재한다.
String 객체- trim() 함수 : 문자열 양쪽 끝의 공백을 없애는 함수이다.
위에 두줄과 밑에 두줄의 차이점 : 양쪽 끝의 공백이 없다!
String 객체- split() 함수 : 문자열을 특정 기호로 자르는 함수이다.
매개변수로 입력한 문자열로 잘라서 배열의 형태로 리턴해준다.
<script>
string_split = `
원, 달러, 엔, 유로
02,1148.8,1097.46,1262.37
03,1148.7,1111.36,1274.65
04,1140.69,1107.81,1266.58
07,1143.4,1099.58,1267.8
08,1141.6,1091.97,1261.07 `
console.log(string_split)
console.log("")
string_split = string_split.trim()
console.log(string_split)
console.log("")
string_split = string_split.split("\n")
console.log(string_split)
console.log("")
string_split = string_split.map((line) => line.split(","))
console.log(string_split)
console.log("")
console.log(JSON.stringify(string_split, null, 2))
</script>
JSON 객체
인터넷에서 문자열로 데이터를 주고 받을 때 사용되는 자료 표현 방식이다.
- 값을 표현할 때는 문자열, 숫자, 불 자료형만 사용 가능
- 문자열과 key에는 반드시 큰따옴표가 필요
하나의 자료는 중괄호를 사용하여 쉼표로 나열하고,
여러 개의 자료는 중괄호들 밖에 대괄호를 사용해준다. (배열로 묶어주는 것)
[{
"name": "혼자 공부하는 파이썬",
"price": 18000,
"publisher": "한빛미디어"
}, {
"name": "HTML5 웹 프로그래밍 입문",
"price": 26000,
"publisher": "한빛아카데미"
}]위 코드의 경우, JSON 객체 안에 속성이 3개씩 들어있다고 보면 된다.
JSON 객체는 통신 때 사용된다.
JSON 객체 - parse() 함수 : JSON 문자열을 자바스크립트 객체로 전개할 때 JSON.parse()함수를 사용한다.
stringfy() : JSON객체를 문자열로
parse() : 문자열을 JSON객체로!
<script>
const data = [{
name: "혼자 공부하는 파이썬",
price: 18000,
publisher: "한빛미디어"
}, {
name: "HTML5 웹 프로그래밍 입문",
price: 26000,
publisher: "한빛아카데미"
}]
console.log(JSON.stringify(data))
console.log(JSON.stringify(data, null, 2))
const json = JSON.stringify(data)
console.log(json)
console.log(JSON.parse(json))
</script>
Math 객체
수학과 관련된 기본적인 연산을 할 때 사용
pi와 e 같은 수학 상수가 있다.
메소드로는 Math.sin(), Math.cos(), Math.tan()과 같은 삼각함수도 있다.
랜덤함수인 Math.random()을 사용하여 0~1 사이의 난수를 생성할 수 있다.
<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))
</script>
외부 script 파일 읽기
html파일에서 css파일 혹은 image(jpg, png, ...), 비디오와 음성파일 등 외부 파일을 읽어들이는 방법과 동일하다.
<script src="경로/자바스크립트파일이름.js"></script>위 코드를 <head> 태그 안에 첨가하면 된다.
실행 내용에 따라 내부 <script>태그로 자바스크립트 코드를 작성하고, 외부의 자바스크립트 파일을 가져와 두가지를 혼합하여 사용하여야할 수도 있다. 이럴때에는 순서에 따라 결과가 바뀔 수 있으니, 순서에 유의하여 작성해야 한다.
Lodash 라이브러리
보조적으로 사용하는 함수를 제공해주는 utility library 중 가장 많이 사용하는 라이브러리.
Lodash CDN 링크 페이지 : https://cdn.jsdelivr.net
CDN은 Contents Delivery Network로 콘텐츠 전송 네트워크를 의미한다.
웹상의 소스를 가져다가 쓰는 것!
Lodash 라이브러리 - sortBy() 함수
sortBy() 함수는 prototype 메소드이다.
배열을 어떤 것으로 정렬할지 지정하면, 지정한 것을 기반으로 배열을 정렬하여 리턴해주는 함수이다.
_.sortBy(배열, 정렬기준키)"_" (Lodash 라이브러리의 객체) 라는 기호를 객체로 만든 것이다. 이 _객체 안에 많은 메소드들이 들어 있다.
- 객체가 아닌 실체를 기본 자료형이라 한다. 숫자, 문자열, 불이 있다.
- 객체를 기반으로 하는 자료형은 객체 자료형이며, new 키워드를 활용하여 생성한다.(static제외)
- prototype 객체란 객체의 틀을 의미하고, 이곳에 속성과 메소드를 추가하여 해당 객체 전체에 사용할 수 있도록 한다.
객체에서 변수 추출해보기
<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>
const { name, price } = object를 다중할당이라 한다.
JSON.stringfy() 예제
<script>
const cloud = {
"이름": "구름",
"나이": 4,
"종족": "강아지"
}
const mallang = {
이름 : "말랑",
나이 : 2,
종족 : "고양이"
}
const kong = cloud
kong.이름 = "콩"
kong.종족 = "고양이"
console.log(JSON.stringify(cloud))
console.log(JSON.stringify(mallang))
console.log(JSON.stringify(kong))
</script>kong은 cloud를 가리키고 있는 참조변수..
따라서 kong으로 키를 선택하여 변경하면 cloud의 내용이 같이 변경되는 것이다.
출처 : 혼자 공부하는 자바스크립트 (윤인성)
'JavaScript' 카테고리의 다른 글
| 자바스크립트#07 : 문서 객체 모델 (0) | 2022.12.20 |
|---|---|
| 자바스크립트 : cm to 단위 변환 프로그램 실습 (0) | 2022.12.20 |
| 자바스크립트#05 : 함수 (0) | 2022.12.15 |
| 자바스크립트#04 : 반복문 (0) | 2022.12.14 |
| 자바스크립트#03 : 조건문 (0) | 2022.12.13 |
댓글