자기계발/혼공단

[자기계발] 혼공단10기 자바스크립트 5주차 (객체)

mylee99 2023. 8. 11. 16:55
5주차(8/7-8/13)
Chapter 06

 

Chapter 06. 객체

1. 객체의 기본

객체(Object) : '실제로 존재하는 사물', '이름과 값으로 구성'된 속성을 가진 자바스크립트의 기본 데이터 타입

배열과 다르게 요소에 접근할 때 인덱스가 아닌 키를 사용함.

객체는 중괄호{...}로 생성하며, 아래와 같은 형태의 자료를 쉼표(,)로 연결해서 입력함.

키: 값
//객체 선언 예제
const product = {
    제품명: '7D 건조 망고',
    유형: '당절임',
    성분: '망고, 설탕, 메타중아황산나트륨, 치자황색소',
    원산지: '필리핀'
}
//객체 요소에 접근
product['제품명']		//객체 뒤에 대괄호 사용 후 키 입력
product.유형			//온점 사용

 

1) 속성과 메소드

요소(element) : 배열 내부에 있는 값

속성(property) : 객체 내부에 있는 값

메소드(method) : 객체의 속성 중 함수 자료형인 속성

 

(1) 속성과 메소드 구분하기

아래 코드에서 객체 pet은 name 속성과 eat 속성을 가지고 있는데, eat 속성처럼 입력값을 받아 무언가 한 다음 결과를 도출해내는 함수 자료형을 특별히 eat() 메소드라고 부름.

const pet = {
    name: '구름',
    eat: function (food) { }
}
//메소드 호출
pet.eat()

 

(2) 메소드 내부에서 this 키워드 사용하기

메소드 내에서 자기 자신이 가진 속성이라는 것을 표시할 때는 this 키워드를 사용함.

const pet = {
    name: '구름',
    eat: function (food) {		//간단 선언은 eat (food) { 로 가능
        alert(this.name + '은/는 ' + food + '을/를 먹습니다.')
    }
}
//메소드 호출
pet.eat('밥')		//result: 구름은/는 밥을/를 먹습니다.

 

2) 동적으로 객체 속성 추가/제거

객체를 처음 생성한 후에 속성을 추가하거나 제거하는 것

 

- 추가 : 객체를 생성한 후 속성을 지정하고 값을 입력함.

- 제거 : delete 키워드를 사용함.

//객체 선언
const student = {}
student.이름 = '윤인성'
student.취미 = '악기'
student.장래희망 = '생명공학자'
//객체 속성 제거
delete student.장래희망
//출력
console.log(JSON.stringify(student, null, 2))		//result: 이름, 취미만 나옴.

 

 

* 화살표 함수를 사용한 메소드

function () { } 형태로 선언하는 익명 함수와 () => { } 형태로 선언하는 화살표 함수는 객체의 메소드로 사용할 때 this 키워드를 다루는 방식이 다름.

//변수 선언
const test = {
    a: function () {        //익명 함수로 선언
        console.log(this)
    },
    b: () => {              //화살표 함수로 선언
        console.log(this)
    }
}
//메소드 호출
test.a()
test.b()

this 키워드가 나타내는 것이 조금 다름.

window 객체는 웹 브라우저 자체를 나타내는 '웹 브라우저에서 실행하는 자바스크립트의 핵심 객체'임.

이처럼 메소드 내부에서 this 키워드를 사용할 때 의미가 달라지므로 화살표 함수를 메소드로 사용하지 않는 편.

 

 

2. 객체의 속성과 메소드 사용하기

자바스크립트에서 사용하는 자료는 크게 기본 자료형과 객체 자료형으로 구분할 수 있음.

- 기본 자료형 : 숫자, 문자열, 불 (실체가 있는 것(undefined와 null 등이 아닌 것) 중에 객체가 아닌 것)

- 객체 자료형 : 함수, 배열, 이외 전부 ...... (속성과 메소드를 가질 수 있는 것)

 

1) 기본 자료형을 객체로 선언하기

숫자, 문자열, 불 등으로 자료형을 변환하는 함수(Number, String, Boolean)는 다음과 같이 사용함.

const 객체 = new 객체 자료형 이름()

이렇게 사용하면 숫자 객체, 문자열 객체, 불 객체를 생성할 수 있음.

단순 기본 자료형이 아니므로 이전과 다르게 속성을 가짐.

new Number(10)
new String('안녕하세요')
new Boolean(true)

★ new 키워드를 사용하지 않으면 함수가 자료형 변환 기능으로 작동함. (객체가 아님)

 

2) 기본 자료형의 일시적 승급

JS는 사용의 편리성을 위해 기본 자료형의 속성과 메소드를 호출할 때 일시적으로 기본 자료형을 객체로 승급시킴.

사용할 수는 있지만, 속성과 메소드를 추가로 가질 수는 없는 것

 

3) 프로토타입으로 메소드 추가하기

어떤 객체의 prototype이라는 속성이 객체 전용 옷(틀)이며, prototype 객체에 속성과 메소드를 추가하면 모든 객체(와 기본 자료형)에서 해당 속성과 메소드를 사용할 수 있음.

객체 자료형 이름.prototype.메소드 이름 = function () {

}

Number.prototype에 sample이라는 속성을 추가하면 기본 자료형 숫자 뒤에 온점을 찍고 해당 속성을 활용할 수 있음.

- 최신 JS의 숫자를 n제곱할 수 있는 제곱 연산자(**)를 활용해 n제곱하는 메소드 추가 예제

//power() 메소드 추가
Number.prototype.power = function (n = 2) {
    return this.valueOf() ** n
}
//Number 객체의 power() 메소드 사용
const a = 12
console.log('a.power(): ', a.power())       //144   
console.log('a.power(3): ', a.power(3))     //1728
console.log('a.power(4): ', a.power(4))     //20736

- 문자열 내부에 어떤 문자열이 있는지, 배열 내부에 어떤 자료가 있는지 확인할 때 사용하는 indexOf() 메소드 사용 예제

문자열 내부에 문자열이 있을 경우 시작하는 위치(인덱스)를 출력하고, 없으면 -1을 출력함.

따라서 "문자열.indexOf(문자열) >= 0" 등의 코드를 사용하면 문자열 내부에 어떤 문자열이 포함되어 있는지 true 또는 false로 확인 가능함. 이를 "문자열.contain(문자열)"했을 떄 true 또는 false를 리턴하는 형태로 변경하면 편리하게 사용

//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('안녕'))       //true
console.log('없는데 in 안녕하세요:', a.contain('없는데'))   //false

//Array 객체의 contain() 메소드 사용
const b = [273, 32, 103, 57, 52]
console.log('273 in [273, 32, 103, 57, 52]: ', b.contain(273))  //true
console.log('0 in [273, 32, 103, 57, 52]: ', b.contain(0))      //false

 

4) Number 객체

(1) 숫자 N번째 자릿수까지 출력하기: toFixed()

> const l = 123.456789
undefined
> l.toFixed(2)
'123.46'

 

(2) NaN과 Infinity 확인하기 : isNaN(), isFinite()

어떤 숫자가 NaN(Not a Number)인지 또는 Infinity(무한)인지 확인할 때는 Number.isNaN() 메소드와 Number.isFinite() 메소드를 사용함. 이 메소드들은 숫자 자료 뒤에 온점을 찍고 사용하지 않고, Number 뒤에 점을 찍고 사용함.

> const m = Number('숫자로 변환할 수 없는 경우')
undefined
> l.toFixed(2)
'123.46'
> const m = Number('숫자로 변환할 수 없는 경우')
undefined
> m
NaN

양의 무한대인 경우 Infinity, 음의 무한대인 경우 -Infinity

이 둘에 해당할 경우 isFinite(유한한 숫자인가?)가 false로 나오며, 일반적인 숫자는 셀 수 있으므로 true

> 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

무한대 숫자는 양의 무한대 숫자와 음의 무한대 숫자로 나뉨.

isFinite() 메소드가 false인 경우는 양의 무한대 숫자와 음의 무한대 숫자 2가지 경우로, 비교 연산자로 비교 가능함.

> n === Infinity || n === -Infinity
true

 

5) String 객체

(1) 문자열 양쪽 끝의 공백(띄어쓰기, 줄바꿈 등) 없애기 : trim()

> const StringA = `
메시지를 입력하다보니 앞에 줄바꿈도 들어가고`
undefined
> const StringB = `     앞과 뒤에 공백도 들어가고    `
undefined

> StringA.trim()
'메시지를 입력하다보니 앞에 줄바꿈도 들어가고'
> StringB.trim()
'앞과 뒤에 공백도 들어가고'

 

(2) 문자열을 특정 기호로 자르기 : split()

> let input = `
일자,달러,엔,유로
02,1141.8,1097.46,1262.37
03,1148.7,1111.36,1274.65
`
undefined

> input = input.trim()
'일자,달러,엔,유로\n02,1141.8,1097.46,1262.37\n03,1148.7,1111.36,1274.65'
> input = input.split('\n')
(3) ['일자,달러,엔,유로', '02,1141.8,1097.46,1262.37', '03,1148.7,1111.36,1274.65']
> input = input.map((line) => line.split(','))
(3) [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']
    length : 3
    [[Prototype]] : Array(0)

 

6) JSON 객체

인터넷에서 문자열로 데이터를 주고 받을 때 사용하는 CSV, XML, CSON 등의 다양한 자료 표현 방식 중의 하나.

JavaScript Object Notation의 약자로, 자바스크립트의 객체처럼 자료를 표현하는 방식임.

- 값을 표현할 때는 문자열, 숫자, 불 자료형만 사용할 수 있음(함수 등은 사용 불가).

- 문자열은 반드시 큰따옴표로 만들어야 함.

- 키에도 반드시 따옴표를 만들어야 함.

 

자바스크립트 객체를 JSON 문자열로 변환할 때는 JSON.stringify() 메소드를 사용함.

- 2번째 매개변수는 객체에서 어떤 속성만 선택해서 추출하고 싶을 때 사용하나 거의 사용하지 않으며, 일반적으로 null을 넣는다. 3번째 매개변수는 들여쓰기 2칸으로 설정한 예제

//자료 생성
const data = [{
    name: '혼자 공부하는 파이썬',
    price: 10000,
    publisher: '한빛미디어'
}, {
    name: '혼자 공부하는 자바스크립트',
    price: 26000,
    publisher: '한빛아카데미'
}]

//자료를 JSON으로 변환
console.log(JSON.stringify(data))
console.log(JSON.stringify(data, null, 2))

JSON 문자열을 자바스크립트 객체로 전개할 때는 JSON.parse() 메소드를 사용함.

- 매개변수에 JSON 형식의 문자열을 넣어줌.

//자료 생성
const data = [{
    name: '혼자 공부하는 파이썬',
    price: 10000,
    publisher: '한빛미디어'
}, {
    name: '혼자 공부하는 자바스크립트',
    price: 26000,
    publisher: '한빛아카데미'
}]

//자료를 JSON으로 변환
const json = JSON.stringify(data)
console.log(json)

//JSON 문자열을 다시 자바스크립트 객체로 변환
console.log(JSON.parse(json))

 

7) Math 객체

Math 객체 속성으로는 pi, e와 같은 수학 상수가 있음.

메소드로는 Math.sin(), Math.cos(), Math.tan()와 같은 삼각함수도 있음.

> Math.PI
3.141592653589793
> Math.E
2.718281828459045

 

랜덤한 숫자를 생성할 때는 Math.random() 메소드를 사용함.

0 이상, 1 미만의 랜덤한 숫자를 생성하며, 0 <= 결과 <1의 범위만 생성함.

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))

 

8) 외부 script 파일 읽어들이기

프로그램의 규모가 커지면 파일 하나가 너무 방대해지기 때문에, HTML과 자바스크립트 파일을 분리.

아래와 같이 src 속성에 읽어들일 파일의 경로를 입력하고, HTML 파일에 포함시킴.

<script src="test.js"></script>

 

9) Lodash 라이브러리

다른 사람이 만든 다양한 함수와 클래스를 묶어서 제공해주는 것을 외부 라이브러리라고 부름.

유틸리티 라이브러리는 개발할 때 보조적으로 사용하는 함수들을 제공해주는 라이브러리임.

그 중 최근 많이 사용되는 Lodash 라이브러리를 CDN 링크를 복사해서 라이브러리를 읽어들이는 예제

Lodash 라이브러리는 배열을 정렬해서 리턴해주는 메소드인 sortBy(),  날짜 시간을 쉽게 다루는 라이브러리인 Luxon와 date-fns, 웹 페이지에 스프레드시트를 출력하는 라이브러리인 Handsontable, 그래프를 그릴 수 있는 라이브러리인 D3.js와 ChartJS, 3차원 그래픽을 다루는 라이브러리인 Three.js와 같은 다양한 기능을 사용할 수 있음.

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>

(1) CDN이란 콘텐츠 전송 네트워크(Contents Delivery Network)라는 의미

일반적으로 어떤 사이트는 어떤 특정한 지역의 서버에 위치함. 예를 들어 서울에서 미국 홈페이지의 데이터를 전송받으면 속도가 느리고, 여러 사정(서버가 있는 곳에 산사태가 나섯 전기가 끊긴다던지)에 의해 데이터를 받지 못할 수도 있음.

만약 전 세계 여러 지역에 전송할 데이터를 창고처럼 준비해두고 사용자가 데이터를 요청했을 때 가장 가까운 지역에서 데이터를 전송해준다면 훨씬 빠르게 데이터를 전송해줄 수 있음. 또한 가까운 지역에 문제가 있으면 그 다음으로 가까운 지역에서 데이터르 전송하면 데이터를 받을 수 없는 문제도 해결 가능함. 이런 통신 네트워크가 CDN.

(2) min 버전임.

min 버전의 자바스크립트 파일은 자바스크립트 코드를 집핑(zipping)한 파일을 의미함.

집핑이란 데이터의 용량을 줄이고자 모든 코드를 응축하는 것.

 

 

3. 객체와 배열 고급

1) 속성 존재 여부 확인

객체가 없는 속성에 접근하면 undefined 자료형이 나오므로, 조건문으로 속성 존재 여부를 확인할 수 있음.

//객체 생성
const object = {
    name: '혼자 공부하는 파이썬',
    price: 18000,
    publisher: '한빛미디어'
}

//객체 내부에 속성이 있는지 확인
if (object.name !== undefined) {
    console.log('name 속성이 있습니다.')
} else {
    console.log('name 속성이 없습니다.')
}

if(object.author !== undefined) {
    console.log('author 속성이 있습니다.')
} else {
    console.log('author 속성이 없습니다.')
}

 

 

5주차 기본 미션
객체, 속성, 메소드가 무엇인지 설명하기

객체 : 현실 세계의 사물이나 개념을 모델링한 것.
속성 : 객체가 가지고 있는 데이터나 상태.
메소드 : 객체가 수행할 수 있는 동작이나 함수.

객체가 자동차라면 속성으로는 브랜드, 모델, 색상 등을 가질 수 있고, 메소드로는 주행, 가속, 브레이크 등을 가질 수 있다.

 

 

5주차 선택 미션
p.288 확인 문제 3번 풀고, 풀이 과정 설명하기

문제 : 

모질라 문서에서 Math 객체와 관련된 내용을 읽고 사인 90도의 값을 구해보세요. 참고로 사인 90도는 1입니다. 아주 단순하게 생각해서 구현하면 0.8939966636005579 라는 결과가 나옵니다. 0.8939966636005579가 나왔다면 왜 그런지, 그리고 이를 어떻게 해야 제대로 사용할 수 있는지 구글 검색 등을 활용해서 알아보고 코드를 수정하세요.

 

풀이 과정 : 

모질라 문서 Math 객체 관련 내용 URL : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math

GPT한테 물어봄........

//원래 시도했던 코드
const degree = 90
console.log(Math.sin(degree))

//수정한 코드
const degree = 90
const radians = degree * Math.PI / 180
const sinValue = Math.sin(radians)
console.log(sinValue)

 

 

Review

꿀같던 여름방학이 끝나고 진도가 어마무시하다. 아니 이럴 줄 알았으면 방학에 안놀고 조금이라도 해놨지....

멘탈 무너진 저의 숙제를 도와주신 GPT 선생님께 무한한 감사를 ㅠ

오늘은 실무에서 쓰는 내용도 제법 나왔고, 안쓰지만 알아두면 좋을 내용도 배웠고, 알고 있는데 뜻을 잘 모르던 개념도 알게 되어서 진짜진짜 완전 유익한 시간이었다!

이제 한 주만 더 하면 벌써 끝난다 0_0 조금만 더 화이팅!

저작자표시 비영리 변경금지