객체
객체
•
배열은 요소에 접근할 때 인덱스를 사용하지만, 객체는 키(key)를 사용
•
객체는 중괄호 {...}로 생성하며, 다음과 같은 형태의 자료를 쉽표(,)로 연결해서 입력
키 : 값
JavaScript
복사
객체 선언 예시
<script>
const product = {
제품명 : '건조 망고', -> 쉼표로 구분 {key : value}
유형 : '당절임',
성분 : '망고, 설탕, 나트륨, 색소',
원산지 : '필리핀'
}
</script>
JavaScript
복사
•
요소에 접근하기 ( 대괄호 [] 사용)
product['제품명']
product['유형']
JavaScript
복사
•
요소에 접근하기 ( 온점 . 사용)
product.제품명
product.유형
JavaScript
복사
•
식별자로 사용할 수 없는 단어를 키로 사용할 경우
◦
객체를 생성할 때 키(key)는 식별자와 문자열 모두 사용 가능
▪
대부분의 개발자가 식별자를 키로 사용
▪
식별자로 사용할 수 없는 단어를 키로 사용할 때는 문자열 사용
◦
식별자가 아닌 문자열을 키로 사용했을 때는 무조건 대괄호[...] 사용해야 객체의 요소에 접근 가능
속성과 메소드
•
객체의 속성은 모든 형태의 자료값 가질 수 있다
•
메소드
◦
객체의 속성 중 함수 자료형인 속성
// eat 메소드
<script>
const pet = {
name : 'cloud',
eat : function(food) {}
}
person.eat()
</script>
JavaScript
복사
◦
메소드 내부에서 this 키워드 사용하기
▪
자기 자신의 자신이 가진 속성이라는 것을 표시할 때, this 키워드 사용
<script>
const pet = {
name : 'cloud',
eat : function(food) {
alert(this.name + '은/는' + food + '을/를 먹습니다.')
}
}
person.eat('rice')
</script>
JavaScript
복사
◦
동적으로 객체 속성 추가/제거
<script>
const student = {}
student.name = 'ash'
student.hobby = 'piano'
student.future = 'scientist'
console.log(JSON.stringify(student, null, 2))
</script>
JavaScript
복사
delete 객체.속성
JavaScript
복사
<script>
const student = {}
student.name = 'ash'
student.hobby = 'piano'
student.future = 'scientist'
delete student.future
console.log(JSON.stringify(student, null, 2))
</script>
JavaScript
복사
◦
메소드 간단 선언 구문
원래 버전
eat : function(food) {
alert(this.name + '은/는' + food + '을/를 먹습니다.')
}
JavaScript
복사
→ 귀찮
간단하게 선언
eat(food) {
alert(this.name + '은/는' + food + '을/를 먹습니다.')
}
JavaScript
복사
→ 주의
◦
function(){} 형태로 선언하는 익명함수와, () ⇒ {} 형태로 선언하는 화살표 함수는
◦
객체의 메소드.속성의 this 키워드를 다루는 방식이 다름
→ 특별한 경우가 아니라면, 객체의 메소드는 익명 함수를 사용한다. (화살표 함수 잘 사용 X)
→ this 키워드 사용의미가 다르기 때문
객체 자료형
◦
속성과 메소드를 가질 수 있는 모든 것은 객체
▪
배열도 객체, 함수도 객체
▪
배열인지 확인하려면, Array.isArray() 메소드를 사용
•
(Array도 메소드를 갖고 있으므로 객체)
▪
함수는 ‘실행이 가능한 객체', JS에서는 함수를 일급 객체(first-class object) 또는 first-class citizen에 속한다고 표현
기본 자료형
◦
기본 자료형
▪
숫자, 문자열, 불
▪
이러한 자료형은 객체가 아니므로, 속성을 가질 수 없음
◦
기본 자료형을 객체로 선언하기
▪
숫자 객체, 문자열 객체, 불 객체를 생성
•
단순한 기본 자료형이 아니므로, 이전과 다르게 속성을 가짐
const 객체 = new 객체 자료형 이름()
new Number(10)
new String('Hello')
new Boolean(true)
JavaScript
복사
◦
기본 자료형의 일시적 승급
▪
JS는 사용의 편리성을 위해서
▪
기본 자료형의 속성과 메소드를 호출할 때
▪
일시적으로 기본 자료형을 객체로 승급시킴
▪
명령이 끝나면, 다시 원래 타입으로 돌아온다
◦
프로토타입으로 메소드 추가하기
▪
prototype 객체에 속성과 메소드를 추가하면, 모든 객체(와 기본 자료형)에서
▪
해당 속성과 메소드를 사용할 수 있다
객체 자료형 이름.prototype.메소드 이름 = function() {
}
JavaScript
복사
<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>
JavaScript
복사
▪
indexOf() 메소드로 JS에서 문자열 내부에 어떤 문자열이 있는지, 배열 내부에 어떤 자료가 있는지
<script>
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, 43, 103, 57, 52]: ', b.contain(273))
console.log('0 in [273, 43, 103, 57, 52]: ', b.contain(0))
</script>
JavaScript
복사
Number 객체
◦
숫자 N번째 자릿수까지 출력하기 → toFixed()
▪
소수점 이하 몇 자리까지만 출력하고 싶을 때 사용
◦
NaN 과 Infinity 확인하기 : isNaN(), isFinite()
▪
Number 뒤에 점을 찍고 사용
Number.isNaN(m)
Number.isFinite(n) -> false 나오면 angks
JavaScript
복사
String 객체
◦
문자열 양쪽 끝의 공백 없애기 → trim()
◦
문자열을 특정 기호로 자르기 → split()
배열 내부의 문자열을 쉼표로 자르기
input = input.map((line) => line.split(','))
JavaScript
복사
JSON 객체
◦
인터넷에서 문자열로 데이터를 주고 받을 때는
◦
CSV, XML, CSON 등의 다양한 자료 표현 방식을 사용
◦
값을 표현할 때는 문자열, 숫자, 불 자료형만 사용할 수 있다
◦
문자열은 반드시 큰따옴표(””)로 만들어야한다
◦
키 key에도 반드시 따옴표(””)
{
"name" : "book",
"price" : 18000,
"publisher" : "ISLAND"
}
JavaScript
복사
◦
JS 객체를 JSON 문자열로 변환할 때는 JSON.stringify() 메소드 사용
console.log(JSON.stringify(data))
console.log(JSON.stringify(data, null, 2)) -> 들여쓰기 2칸으로 설정
JavaScript
복사
◦
JSON 문자열을 JS 객체로 전개할 때는 JSON.parse() 메소드 사용
console.log(JSON.parse(json))
-> JSON 문자열을 다시 JS 객체로 변환
JavaScript
복사
Math 객체
◦
수학과 관련된 기본적인 연산을 할 때는 Math 객체를 사용
▪
Mah 객체 속성으로는 pi, e 와 같은 수학 상수가 있다
▪
Main.sin(), Math.cos(), Math.tan() 같은 삼각함수도 있다
▪
Math.random() → 0~1 미만 랜덤한 숫자 생성
외부 script 파일 읽어들이기
◦
파일 커지면 파일 분리할 필요
<script src="test.js"></script>
JavaScript
복사
Lodash 라이브러리
◦
개발할 때 보조적으로 사용하는 함수들을 제공해주는 유틸리티 라이브러리 중 가장 많이 사용
◦
CDN (Contests Delivery Network)은 콘텐츠 전송 네트워크
◦
min 버전 : JS 코드르 집핑(zipping)한 파일
▪
집핑(zipping) - 데이터를 CDN으로 전송하는 경우, 데이터의 용량을 줄이고자 다음과 같이 소개를 줄이고 모든 코드르 응축
◦
sortBy() 메소드
▪
배열을 어떤 것으로 정렬할지 지정하면, 지정한 것을 기반으로 배열을 정렬해서 리턴
요약
◦
실체가 있는 것 중에서 객체가 아닌 것 → 기본 자료형 이라하며, 숫자,문자열,불이 대표적인 예
◦
객체를 기반으로 하는 자료형을 객체 자료형 → new 키워드를 활용해서 생성
◦
기본 자료형의 승급이란 기본 자료형이 일시적으로 객체 자료형으로 변화하는 것을 의미한다
◦
prototype 객체란 객체의 틀을 의미, 이곳에 속성과 메소드를 추가하면 해당 객체 전체에서 사용