객체란?
JavaScript에서 객체(Object)란 JavaScript의 모든 것이라 볼 수 있을 정도로 모든 것이 객체라 볼 수 있습니다.
- JS 내장객체
: JavaScript 내에 미리 정의되어있는 객체로 필요할때마다 해당 객체 형식으로 생성하여 사용할 수 있습니다. - 브라우저 관련 객체
: 브라우저 내 내장된 객체를 말하며, 최상위window로 부터 계층적 구조로 이루어져있습니다. - 문서 객체 모델(DOM)
: Document Object Model로 웹문서의 구조를 계층적으로 관리하는 구조를 말합니다.
객체의 형태
JS 객체는 {KeyName: KeyValue} 의 형태로 keyName과 KeyValue 로 구성되어있습니다.
이러한 {} 형태는 JSON(JavaScript Object Notation) 객체 문법 형태 입니다.
Javascript의 기본 데이터 타입인 문자열, 숫자, 배열, 불리언 그리고 다른 객체, 함수까지 포함할 수 있습니다
객체는 크게 프로퍼티와 메서드로 구성되어있으며,
프로퍼티: 해당 객체의 속성이나 특징을 말합니다.객체명.프로퍼티로 접근할 수 있습니다.매서드: 해당 객체가 할 수 있는 동작이라고 할 수 있습니다.객체명.메서드명()으로 실행시킬 수 있습니다.
객체 생성
객체를 생성할 때는 {} 를 이용해서 생성합니다.
{} 형태사용하기
let 객체명 = {KeyName : KeyValue};let person = { name : '장지현', age : 29, } //객체 생성
💡 KeyName 생성할 때 참고
KeyName을 생성해줄 때는 문자열의 경우도''따옴표 없이 작성해줘도 JS 자체에서 자동으로 형변환을 해줘서 문제가 없지만 내용 안에 공란(띄어쓰기) 등이 포함되어있을 경우 무조건,''이 필요합니다.
객체 요소에 접근하기
객체에 접근할 때는 지정한 key값으로 접근할 수 있습니다.
1. 객체명["키값"]
2. 객체명.키값
객체 요소 동적으로 추가/삭제
추가
객체명.keyName = 값; 또는 객체명['keyName'] = 값; 형태로 추가할 수 있으며, key의 경우 기존 key 중 있을 경우 해당 키에 값으로 추가
💡함수 안에서 인자를 받아 객체에 KeyName 추가해줄 때
keyName을 파라미터로 받은 안자를 추가해줄 때는 무조건객체명[파라미터명]으로 접근해줘야한다.객체명.파라미터명으로 접근해버리면 인자가 아니라 해당 파라미터명 자체로 keyName이 추가되버린다.
삭제
객체 내 요소를 삭제할 경우는 delete 키워드를 사용할 수 있습니다.
delete 객체명.KeyName; 또는 delete 객체명.['KeyName'];으로 요소를 삭제할 수 있습니다.
내장객체
내장객체란, JavaScript 내에 정의되어있는 객체로 필요에 따라 해당 객체를 생성하여 사용할 수 있습니다. 이를 인스턴스라고 합니다.
인스턴스를 만드는 방법은, 아래와 같습니다.
let(또는 const) 변수명(인스턴스명) = new 객체명();
주요 내장객체로는 String(문자열) ,Array(배열), Date(시간), Math(수학) 등이 있습니다.
String 객체
문자열 객체 입니다.
String 객체 생성하기
let str = "문자열";
let str = new String("문자열");
Strign 프로퍼티
| 프로퍼티 명 | 설명 | 사용법 |
|---|---|---|
length | 문자열의 길이 값을 반환해주는 프로퍼티 입니다. | 문자열명.length |
String 메서드
| 메서드 명 | 설명 | 사용법 |
|---|---|---|
includes() | 해당 문자열 내 특정 문자가(대소문자 구분) 존재하는지 여부를 Boolean 값으로 반환합니다. | 문자열명.includes(찾을문자, 찾을자리-기본값0) |
replace() | 문자열 내 특정문자를 다른 문자로 변환해줍니다. 해당하는 문자 중 첫번째 문자에만 변환됩니다. | 문자열명.replace(찾을문자, 변환할 문자 또는 실행할 함수) |
replaceAll() | 문자열 내 특정문자를 다른 문자로 변환해줍니다. 해당하는 문자 전체가 변환 됩니다. | 문자열명.replaceAll(찾을문자, 변환할 문자 또는 실행할 함수) |
split() | 문자열 내 특정 구분자를 기준으로 문자열을 잘라서 배열로 반환합니다. | 문자열명.split(구분자) |
toUpperCase() | 문자열을 대문자로 변환해줍니다. | 문자열명.toUpperCase() |
toLowerCase() | 문자열을 소문자로 변환해줍니다. | 문자열명.toLowerCase() |
indexOf() | 문자열 내 특정문자의 위치를 반환해줍니다. 발견되지 않을 시 -1을 반환해주며 해당 문자열내 특정문자가 여러개일 시 첫번째 위치만 반환해줍니다. | 문자열명.indexOf(특정문자) |
substr() | Deprecated 해당 문자열의 기준 인덱스에서 주어진 숫자의 개수만큼 문자를 반환합니다. | 문자열.substr(시작인덱스, 가져올 문자 개수-미입력시 시작인덱스부터 끝까지) |
substring() | 해당 문자열의 지정한 시작인덱스 부터 끝 인덱스 전까지 문자를 반환합니다. | 문자열명.substring(시작인덱스, 끝인덱스-미입력시 시작인덱스부터 끝까지) |
trim() | 문자의 앞 뒤 공백을 모두 삭제합니다. | 문자열명.trim() |
trimStart() | 문자의 앞 공백을 삭제합니다. | 문자열명.trimStart() |
trimEnd() | 문자의 뒤 공백을 삭제합니다. | 문자열명.trimEnd() |
Array 객체
배열 객체 입니다. [요소1, 요소2, 요소3] 형식으로 생겼습니다.
각 각 배열은 맨 첫번째 부터 0번째 요소, 1번째 요소 순으로 자리 순서가 매겨지는데 이를 index라고 합니다.
Array 객체 생성하기
- new 키워드 사용하기
let arr = new Array()let arr = new Array(배열의 크기) []형태 사용하기
let arr = []let arr = [요소1, 요소2, 요소3]- Array() 형태 사용하기
let arr = Array(요소1, 요소2, 요소3)
Array 요소에 접근하기
배열 내 요소에 접근할 때는 이 인덱스 번호로 접근할 수 있습니다.
접근하는 방법은 배열명[인덱스 번호]로 접근할 수 있습니다.
let arr = [딸기, 사과, 바나나, 배]
console.log(arr[0]); // arr의 0번째 요소 = 딸기
console.log(arr[1); // arr의 1째 요소 = 사과
console.log(arr[2); // arr의 2째 요소 = 바나나
console.log(arr[3); // arr의 3째 요소 = 배Array 프로퍼티
| 프로퍼티 명 | 설명 | 사용법 |
|---|---|---|
length | 배열의 길이 값을 반환해주는 프로퍼티 입니다. | 배열명.length |
Array 메서드
| 메서드 명 | 설명 | 사용법 |
|---|---|---|
concat() | 기준배열 뒤로 대상배열 요소를 추가해줍니다. | 기준배열.concat(대상배열) |
every() | 배열의 모든 요소가 주어진 함수에 대해 모두 참인지 비교하여 true/false 값 반환 | 배열명.every(함수자리) |
filter() | 배열의 요소 중 주어진 함수에 대해 참인 요소만 찾아 해당 요소들로 새로운 배열을 만듭니다. | 배열명.filter(함수자리) |
forEach() | 배열의 모든 요소에 대해 주어진 함수를 실행합니다. | 배열명.forEach(함수자리) |
indexOf() | 배열의 요소 중 주어진 값과 일치한 가장 첫번재 요소의 인덱스를 반환 합니다. | 배열명.indexOf(값) |
join() | 배열의 요소들을 문자열로 합친 값을 반환합니다. 구분기호 미지정 시 ,(쉼표)로 지정 시 지정한 구분기호로 구분하여 문자열로 반환 됩니다. | 배열명.join(구분기호-생략가능) |
push() | 배열의 맨 마지막에 값을 추가 하고 추가 후 배열의 길이(length)를 반환합니다. | 배열명.push(추가할 값) |
unshift() | 배열의 맨 앞에 값을 추가하고 추가 후 배열의 길이(length)를 반환합니다. | 배명명.unshift(추가할 값) |
pop() | 배열의 마지막 값을 제거 후 해당 값을 반환 합니다. | 배열명.pop() |
shift() | 배열의 맨 앞 값을 제거 후 해당 값을 반환 합니다. | 배열명.shift() |
splice() | 배열에 요소를 추가하거나 제거하거나 대체할 수 있습니다. 제거된 요소를 담은 배열을 반환합니다. | 배열명.splice(시작인덱스, 제거할요소의 개수-생량가능, 추가할 요소 값들-생량가능) |
slice() | 배열에서 특정부분만 제거합니다. 제거된 요소를 담은 배열을 반환합니다. | 배열명.slice(시작인덱스, 끝인덱스) |
reverse() | 배열의 배치 순서를 역순으로 변경 후 해당 배열을 반환홥니다. | 배열명.reverse() |
sort() | 배열의 배치 순서를 주어진 정렬함수를 기준으로 정렬됩니다. 정렬함수를 입력하지 않을 시 유니코드 포인트에 따라 정렬됩니다. | 배열명.sort(함수자리-생략가능) |
toString() | 배열 요소를 ,(쉼표)로 구분하여 문자열로 반환해줍니다. | 배열명.toString() |
Date 객체
날짜와 시간정보를 나타내는 객체 입니다.
Date 객체를 사용하려면 인스턴스를 만들어 해당 인스턴스에 대해 프로퍼티와 메서드를 활용해서 사용할 수 있습니다.
Date 객체 생성하기
- 현재 날짜 :
let 변수명(인스턴스명) = new Date() - 특정 날짜 :
let 변수명(인스턴스명) = new Date('YYYY/MM/DD')
let 변수명(인스턴스명) = new Date(YYYY, (MM-1), DD)💡 Date 객체 내 월(Month)표시
Date 객체 내에서 월(Month)의 경우 1월은 0으로 계산됩니다. 따라서let 변수명(인스턴스명) = new Date(YYYY, MM, DD)이 방법으로 인스턴스를 만들때는 기존 생각하는 월에서-1을 해줘야합니디.
Date 메서드
get : 날짜 정보를 가져오는 메서드
| 메서드 명 | 설명 | 사용법 |
|---|---|---|
getFullYear() | 연도 정보를 반환해줍니다. | 인스턴스명.getFullYear() |
getMonth() | 월 정보를 가져옵니다. (1월 = 0 부터 시작합니다.) | 인스턴스명.getMonth() |
getDate() | 일 정보를 가져옵니다. | 인스턴스명.getDate() |
getDay() | 요일 정보를 가져옵니다.(일요일 = 0 ~ 토 = 6) | 인스턴스명.getDay() |
getHours() | 시 정보를 가져옵니다. | 인스턴스명.getHours() |
getMinutes() | 분 정보를 가져옵니다. | 인스턴스명.getMinutes() |
getSeconds() | 초 정보를 가져옵니다. | 인스턴스명.getSeconds() |
getMilliseconds() | 밀리초 정보를 가져옵니다. | 인스턴스명.getMilliseconds() |
getTime() | 1970년 1월 1일부터 경과된 시간을 밀리초 타임스탬프 표기합니다. | 인스턴스명.getTime() |
set : 날짜 정보를 수정하는 메서드
| 메서드 명 | 설명 | 사용법 |
|---|---|---|
setFullYear | 연도 정보를 수정합니다. | 인스턴스명.setFullYear(연도) |
setMonth() | 월 정보를 수정합니다. (1월 = 0 부터 시작합니다.) | 인스턴스명.setMonth(월-1월이 0인거 명심) |
setDate() | 일 정보를 수정합니다. | 인스턴스명.setDate(일자) |
setHours() | 시 정보를 수정합니다. | 인스턴스명.getHours(시간 - 0~23) |
setMinutes() | 분 정보를 수정합니다. | 인스턴스명.setMinutes(분 - 0~59) |
setSeconds() | 초 정보를 수정합니다. | 인스턴스명.setSeconds(초 - 0~59) |
setMilliseconds() | 밀리초 정보를 수정합니다. | 인스턴스명.setMilliseconds(밀리초 - 0~999) |
setTime() | 1970년 1월 1일부터 경과된 시간을 밀리초 타임스탬프를 수정합니다. | 인스턴스명.setTime(밀리초 단위로 표시) |
to : 날짜 정보를 변환하는 메서드
| 메서드 명 | 설명 | 사용법 |
|---|---|---|
toLocalString() | 현재날짜와 시간을 현지 시간으로 표시된 문자열로 변환합니다. | 인스턴스명.toLocalString(현지코드 - 미입력시 현재 사용자의 코드) |
toString() | 날짜를 문자형식으로 변환합니다. | 인스턴스명.toString() |
Math 객체
수학과 관련된 객체 입니다.
간단한 연산은 연산자를 통해서도 가능하지만 좁 더 복잡한 연산이 필요할때 이용할 수 있습니다.
또한 앞서, String, Array, Date의 경우 해당 객체로 인스턴스를 만들어 사용했지만 Math 객체의 경우는 인스턴스를 만들지 않고 해당 객체 그대로인채로 프로퍼티와 메서드를 사용합니다.
Math 프로퍼티
| 프로퍼티 명 | 설명 | 사용법 |
|---|---|---|
E | 오일러 상수 | Math.E |
PI | 원주율 | Math.PI |
Math 메서드
| 메서드 명 | 설명 | 사용법 |
|---|---|---|
abs() | 절대값을 반환합니다. | Math.abs(숫자) |
floor() | 매개변수의 소수점 이하 부분을 버립니다. | Math.floor(숫자) |
ceil() | 매개변수의 소수점 이하 부분을 올림 합니다. | Math.ceil(숫자) |
round() | 매개변수의 소수점 이하 부분을 반올림 합니다. | Math.round(숫자) |
max() | 매개변수 중 최대값을 반환합니다. | Math.max(숫자1, 숫자2 ...) |
min() | 매개변수 중 최소값을 반환합니다. | Math.min(숫자1, 숫자2 ...) |
random() | 0과 1 사이의 무작위 수를 반환합니다. | Math.random() |
pow() | 숫자의 지수값을 반환합니다. | Math.pow(숫자, 제곱값) |
sqrt() | 숫자의 제곱근값을 반환합니다. | Math.sqrt(숫자) |
참고
Do it! 한 권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석 - 고경희
위 책을 공부하며 작성하고 있습니다!
