호에.. 벌써 5주차..!
과거의 나 대단한걸..
객체
typeof ([])
> "odject"
속성과 메소드
const object = {
number: 273,
string: '구름'
boolean: true,
array: [52, 273, 103, 32],
method: function () { }
}
- 속성과 메소드 구분하기
<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>
객체 자료형
> const a = []
undefined
> a.sample = 10
10
> a.sample
10
// 함수
> function b () {}
undefined
> b.sample = 10
10
> b.sample
10
// Array.isArray()
> typeof a
"object"
> Array.isArray(a)
true
// 일급 객체
> typeof b
"function"
기본 자료형
> 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
기본 자료형을 객체로 선언하기
const 객체 = new 객체 자료형 이름()
new Numnber(10) // 숫자 객체
new String('안녕하세요') // 문자열 객체
new Boolean(true) // 불 객체
기본 자료형의 일시적 승급
> '안녕하세요'.anchor('greeting')
"<a name="greeting">안녕하세요</a>"
> '안녕하세요'.bold()
"<b>안녕하세요</b>"
> const h = '안녕하세요'
undefined
> h.sample = 10
0
> h.sample
undefined
프로토타입으로 메소드 추가하기
객체 자료형 이름.prototype.메소드 이름 = function() {
}- 제곱 연산자(**)
<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>- indexOf()
// 문자열
> const j = '안녕하세요'
undefined
> j.indexOf('안녕')
0
> j.indexOf('하세')
2
> j.indexOf('없는 문자열')
-1
// 배열
> cosnt k = [1, 2, 3]
undefined
>k.indexOf(2)
1
>k.indexOf(3)
2
>k.indexOf(100)
-1- contain()
<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()
> const i = 123.456789
nudefined
> l.toFixed(2)
"123.46"
> l.toFixed(3)
"123.457"
> l.toFixed(4)
"123.4568"- NaN과 Infinity 확인하기 : isNaN(), isFinite()
> const m = Number('숫자로 변화할 수 없는 경우')
undefined
> m
NaN
> m === NaN
false
> Number.isNaN(m)
true
//Infinity
> const n = 10 / 0
undefined
> n
Infined // 양의 무한대
> const 0 = -10 / 0
undefined
> 0
-Infined // 음의 무한대
> Number.isFinite(n)
false
> Number.isFinite(0)
false
> Number.isFinite(1)
true
> Number.isFinite(10)
true
String 객체
문자열 양쪽 끝의 공백 없애기: trim()
JSON 객체
- 하나의 자료 예
{
"name": "혼자 공부하는 파이썬",
"price": 18000,
"publosher": "한빛미디어"
}- 여러 개의 자료 예
[{
"name": "혼자 공부하는 파이썬",
"price": 18000,
"publosher": "한빛미디어"
},{
"name": "HTML5 웹 프로그래밍 입문",
"price": 26000,
"publosher": "한빛아카데미"
}]
Math 객체
> Math.PI
3.141592653589793
> Math.E
2.718281828459045
외부 script 파일 읽어들이기
main.html
<!DOCTYPE html>
<html>
<head>
<title>외부 script 파일 읽어들이기(1)</title>
</head>
<script src="test.js"></script>
<script>
console.log('# main.html의 script 태그')
console.log('sample 값:', sample)
</script>
<body>
</body>
</head>
</html>test.js
console.log('# test.js 파일')
const sample = 10
속성 존재 여부 확인
<script>
// 객체를 생성합니다.
const object = {
"name": "혼자 공부하는 파이썬",
"price": 18000,
"publosher": "한빛미디어"
}
// 객체 내부에 속성이 있는지 확인합니다.
if (object.name !== undefined) {
console.log('name 속성이 있습니다.')
} else {
console.log('name 속성이 없습니다.')
}
if (object.author !== undefined) {
console.log('author 속성이 있습니다.')
} else {
console.log('author 속성이 없습니다.')
}
</script>
배열 기반의 다중 할당
[식별자, 식별자, 식별자, ...] = 배열
객체 기반의 다중 할당
{ 속성 이름, 속성 이름 } = 객체
{ 식별자=속성 이름, 식별자=속성 이름 } = 객체
배열 전개 연산자
- 전개 연산자를 사용한 배열 복사
[...배열]- 전개 연산자를 사용한 배열 요소 추가
[...배열, 자료, 자료, 자료]
객체 전개 연산자
전개 연산자를 사용한 객체 복사
{...객체}전개 연산자를 사용한 객체 요소 추가
{...객체, 자료, 자료, 자료}
+ git https://github.com/dltjdud-0225/13gi_hongong_js.git
기본 미션
객체, 속성, 메소드가 무엇인지 설명하기
객체(Object)
- 속성과 메소드를 가질 수 있는 자바스크립트의 데이터 유형
- JavaScript의 거의 모든 객체는 Object의 인스턴스
- {} 중괄호를 사용하여 객체를 생성하며, 키: 값 형식으로 구성
- 여러 속성을 쉼표 ,로 구분하여 작성
const person = {
name: "서영",
age: 25,
job: "개발자"
};
속성(Property)
- 객체 내부에 저장된 값
- 모든 자료형(숫자, 문자열, 배열, 함수 등)이 속성이 될 수 있음
const example = {
number: 42,
text: "Hello",
isStudent: false,
scores: [100, 90, 80],
details: { city: "Seoul", country: "Korea" }
};
메소드(Method)
- 객체의 속성 중에서 함수 자료형을 가진 속성
- 객체 내부에서 동작을 정의할 때 사용
- this 키워드를 사용하여 객체의 다른 속성에 접근 가능
const cat = {
name: "나비",
sound: function() {
console.log(`${this.name}가 야옹~`);
}
};
// 메소드 호출
cat.sound(); // "나비가 야옹~"
선택미션
p. 288 확인 문제 3번 풀고, 풀이 과정 설명하기
<script>
// 변수를 선언합니다.
const degree = 90
// 출력합니다.
const radian = degree * (Math.PI / 180) // degree -> radian으로 변환
console.log(Math.sin(radian)) // 사인 값 출력
</script>'13기 혼공단(js)' 카테고리의 다른 글
| [혼공JS] 4주차 (0) | 2025.02.09 |
|---|---|
| [혼공JS] 3주차 (0) | 2025.01.24 |
| [혼공JS] 2주차 (0) | 2025.01.19 |
| [혼공JS] 1주차 (0) | 2025.01.11 |