33강) 객체 기본
-
객체 : 실제로 존재하는 사물(
배열도 객체)
이름(name)과 값(value)으로 구성된 속성을 가진 자바스크립트의 기본 데이터 타입typeof ([])
"object"
// object가 객체!!키: 값 (중괄호{...}로 생성, 쉼표(,)로 연결해 입력)
배열은 요소에 접근할 때 인덱스 사용 //
객체는 요소에 접근할 때 키 사용 -
요소 : 배열 내부에 있는 값
-
속성 : 객체 내부에 있는 값
-
메소드 : 속성 중에 함수 자료형인 것
(화살표 함수는 메소드 사용X) -
this 키워드 : 객체 내부의 메소드에서 객체 자신을 나타내는 키워드
const pet = { name: '구름', eat: function (food) { alert(this.name + '은/는' + food + '을/를 먹습니다.') } } pet.eat('밥')
34강) 객체 속성추가와 제거
-
동적으로 속성을 추가 : 객체를 처음 생성한 후에 속성을 추가하는 것
객체[속성] = 값
-
동적으로 속성을 제거 : 객체를 처음 생성한 후에 속성을 제거하는 것
delete 객체.속성 / delete 객체[속성]
-
메소드 간단 선언 구문
const pet = { name: '구름', eat (food) { alert(this.name + '은/는' + food + '을/를 먹습니다.') } } pet.eat('밥')
35강) 기본자료형과 객체자료형, 프로토타입
- 기본자료형 : 숫자, 문자열, 불
(스택에 값 저장 -> 속성 가질 수 X)기본 자료형을 객체로 선언
(new 키워드 사용안하면 함수가 자료형 변환 기능으로 작동)
const 객체 = new 객체자료형 이름()
-
객체자료형 : 함수, 배열, 객체, ...이외 전부
(스택과 힙을 연결 -> 속성과 메소드 가짐)함수는 일급객체에 속한다
-
프로토타입으로 메소드 추가하기
: 어떤 객체의 prototype이라는 속성이 바로 객체 전용 옷(틀)!
prototype객체에 속성과 메소드 추가하면 모든 객체(와 기본 자료형)에서 해당 속성과 메소드 사용할 수 있다!!객체자료형 이름.prototype.메소드 이름 = function() {
}
36강) 다양한 메소드 맛보기
-
Number객체
-
toFixed() : 숫자 N번째 자릿수까지 출력
ex)소수점 아래 2자리까지 출력하고 싶으면 toFixed(2)
-
isNaN(), isFinite() : NaN과 Infinity 확인하기
NaN(Not a Number) 인지 Infinity(무한) 인지
Number 뒤에 점찍고 사용 (true/false로 나옴)
-
-
String객체
- trim() : 문자열 양쪽 끝의 공백 없애기
공백(띄어쓰기, 줄바꿈 등) 제거 가능
- split() : 문자열을 특정 기호로 자르기
문자열을 매개변수(다른 문자열)로 잘라서 배열을 만들어 리턴하는 메소드
- length
- indexOf()
등등..
- trim() : 문자열 양쪽 끝의 공백 없애기
-
JSON객체
(JavaScript Object Notation)- 값을 표현할 때는 문자열, 숫자, 불자료형만 사용가능(함수 등은 사용불가)
- 문자열은 반드시 큰따옴표로
- 키에도 반드시 따옴표 붙이기
자바스크립트 객체를 JSON문자열로 변환
: JSON.stringify() 메소드
JSON문자열을 자바스크립크 객체로 전개
: JSON.parse() 메소드
-
Math객체
-
Math.random() : 랜덤한 숫자 생성
-
Math.floor() : 소수점 이하 버림
-
Math.ceil() : 소수점 이하 올림
-
Math.round() : 소수점 이하 반올림
-
Math.max() : 최대값
-
Math.min() : 최솟값
-
37강) 6.2절 마무리
-
외부 script 파일 읽어들이기
-
Lodash 라이브러리
(다른 사람들이 만든 다양한 함수와 클래스를 묶어서 제공해주는 것 : 외부 라이브러리)sortBy() 메소드
- CDN -> 콘턴츠 전송 네트워크
- min 버전 -> 자바스크립코드를 집핑한 파일
(집핑: 코드를 응축하는 것)
const num = 52000 num.원 = function () { return this.valueOf() + '원' } console.log(num.원()) // -> num은 기본자료형이므로 메소드 추가XXX(에러 뜸) prototype에 메소드 추가해야 함!!!
function printLang(code) { return printLang._lang[code] } printLang._lang = { ko : '한국어', en : '영어', ja : '일본어', fr : '프랑스어', es : '스페인어' } console.log('printLang("ko"):', printLang('ko')) // printLang("ko") : 한국어 console.log('printLang("en"):', printLang('en')) // printLang("en") : 영어
const degree = 90 const radian = degree * (Math.PI / 100) console.log(Math.sin(radian))
const books = [{ name: '혼자 공부하는 파이썬', price: 18000, publisher : '한빛미디어' }, { name: 'HTML5 웹 프로그래밍 입문', price: 26000, publisher : '한빛아카데미' }, { name: '머신러닝 딥러닝 실전 개발 입문', price: 30000, publisher : '위키북스' }, { name: '딥러닝을 위한 수학', price: 25000, publisher : '위키북스' }] console.log(_.orderBy(books, (book) => book.name))
38강) 객체의 기본 속성 지정하기
- 속성존재 여부 확인 : 객체 내부에 어떤 속성이 있는지 확인하는 것. 객체에 없는 속성은 접근하면 undefined 나옴!
+ dog.status = dog.status !== undefined ? dog.status : '이상 없음' + dog.status = dog.status ? dog.status : '이상 없음' + dog.status = dog.status || '이상 없음' + const test = function (object) { const { name, age, color, status } = { status: '이상 없음', ...object } + const test = function ({ name, age, color, status = '이상 없음' }) { return `${name} : ${age} : ${color} : ${status}` }
다중 할당: 배열과 객체 하나로 여러 변수에 값을 할당하는 것
-
배열 기반의 다중 할당
[식별자, 식별자, 식별자,...] = 배열
-
객체 기반의 다중 할당
{ 속성 이름, 속성 이름 } = 객체
{ 식별자=속성 이름, 식별자=속성 이름 } = 객체
const object = { name: '혼자 공부하는 파이썬', price: 18000, publisher: '한빛미디어' } const { name, price } = object console.log('# 속성 이름 그대로 꺼내서 출력하기') console.log(name, price) console.log('') // # 속성 이름 그대로 꺼내서 출력하기 혼자 공부하는 파이썬 18000 const { a=name, b=price } = object console.log('# 다른 이름으로 속성 꺼내서 출력하기') console.log(a, b) // # 다른 이름으로 속성 꺼내서 출력하기 혼자 공부하는 파이썬 18000
-
배열 전개 연산자
[...배열]
[...배열, 자료, 자료, 자료]
- 얕은 복사(참조 복사) :
복사하는 행위가 단순하게 다른 이름을 붙이는 형태로 동작하는 복사 - 깊은 복사 :
복사 후 두 객체를 완전하게 독립적으로 사용할 수 있는 복사
- 얕은 복사(참조 복사) :
-
객체 전개 연산자
{...객체}
{...객체, 자료, 자료, 자료}
39강) 라이브 서버와 DOMContentLoaded 이벤트
-
문서 객체(document object) : HTML 요소
-
문서 객체 모델(DOM, Document Object Model) : 문서 객체를 조합해서 만든 전체적인 형태
-
DOMContentLoaded 이벤트 : 문서 객체 조작할 때 사용
(웹 브라우저가 문서 객체를 모두 읽고 나서 실행하는 이벤트)document.addEventListener('DOMContentLoaded', () => {
// 문장
})
// DOMContentLoaded 이벤트 연결 document.addEventListener('DOMContentLoaded', () => { const h1 = (text) => `<h1>${text}</h1>` document.body.innerHTML += h1('DOMContentLoaded 이벤트 발생')
- document.body.innerHTML : 문서의 바디 안에 있는 HTML코드를 자바스크립트로 조작할 수 있게 해주는 코드
- addEventListener() 메소드 :
document라는 문서 객체의 DOMContentLoaded 이벤트가 발생했을 때, 매개변수로 지정한 콜백 함수를 실행하라!!
