JS 튜토리얼

제이에스 홈 JS 소개 JS 어디로 JS 출력 JS 문 JS 구문 JS 코멘트 JS 변수 제이에스렛 JS 상수 JS 연산자 JS 산술 JS 할당 JS 데이터 유형 JS 함수 JS 객체 JS 이벤트 JS 문자열 JS 문자열 메서드 JS 문자열 검색 JS 문자열 템플릿 JS 번호 JS 숫자 메서드 JS 배열 JS 배열 메서드 JS 배열 정렬 JS 배열 반복 JS 배열 상수 JS 날짜 JS 날짜 형식 JS 날짜 가져오기 메서드 JS 날짜 설정 방법 JS 수학 JS 랜덤 JS 부울 JS 비교 JS 조건 JS 스위치 JS 루프 In에 대한 JS 루프 의 JS 루프 JS 루프 동안 JS 브레이크 JS 이터러블 JS 세트 JS 맵 JS 유형 JS 유형 변환 JS 비트와이즈 JS 정규 표현식 JS 오류 JS 범위 JS 호이스팅 JS 엄격 모드 JS 이 키워드 JS 화살표 함수 JS 클래스 JS JSON JS 디버깅 JS 스타일 가이드 JS 모범 사례 JS 실수 JS 성능 JS 예약어

JS 버전

JS 버전 JS 2009(ES5) JS 2015(ES6) JS 2016 JS 2017 JS 2018 JS IE / 엣지 JS 연혁

JS 객체

객체 정의 개체 속성 개체 메서드 개체 표시 개체 접근자 객체 생성자 개체 프로토타입 객체 반복 가능 객체 세트 객체 맵 개체 참조

JS 함수

기능 정의 기능 매개변수 함수 호출 함수 호출 기능 적용 함수 클로저

JS 클래스

수업 소개 클래스 상속 클래스 정적

JS 비동기

JS 콜백 JS 비동기 JS 약속 JS 비동기/대기

JS HTML DOM

DOM 소개 DOM 메서드 DOM 문서 DOM 요소 DOM HTML DOM 양식 DOM CSS DOM 애니메이션 DOM 이벤트 DOM 이벤트 리스너 DOM 탐색 DOM 노드 DOM 컬렉션 DOM 노드 목록

JS 브라우저 BOM

JS 창 JS 화면 JS 위치 JS 연혁 JS 네비게이터 JS 팝업 경고 JS 타이밍 JS 쿠키

JS 웹 API

웹 API 소개 웹 양식 API 웹 기록 API 웹 스토리지 API 웹 작업자 API 웹 가져오기 API 웹 지리적 위치 API

JS 아약스

AJAX 소개 AJAX XMLHttp AJAX 요청 AJAX 응답 AJAX XML 파일 AJAX PHP AJAX ASP AJAX 데이터베이스 AJAX 애플리케이션 AJAX 예제

JS JSON

JSON 소개 JSON 구문 JSON 대 XML JSON 데이터 유형 JSON 구문 분석 JSON 문자열화 JSON 객체 JSON 배열 JSON 서버 JSON PHP JSON HTML JSON JSONP

JS 대 jQuery

jQuery 선택기 제이쿼리 HTML 제이쿼리 CSS 제이쿼리 DOM

JS 그래픽

JS 그래픽 JS 캔버스 JS 플로틀리 JS 차트.js JS 구글 차트 JS D3.js

JS 예제

JS 예제 JS HTML DOM JS HTML 입력 JS HTML 객체 JS HTML 이벤트 JS 브라우저 JS 편집기 JS 연습 JS 퀴즈 JS 인증서

JS 참조

자바스크립트 객체 HTML DOM 객체


자바스크립트 객체


JavaScript에서 객체는 왕입니다. 객체를 이해하면 JavaScript를 이해합니다.


JavaScript에서 거의 "모든 것"은 객체입니다.

  • 부울은 객체가 될 수 있습니다( new키워드로 정의된 경우)
  • 숫자는 객체일 수 있습니다( new키워드로 정의된 경우)
  • 문자열은 객체가 될 수 있습니다( new키워드로 정의된 경우)
  • 날짜는 항상 객체입니다
  • 수학은 항상 객체다
  • 정규식은 항상 객체입니다.
  • 배열은 항상 객체입니다
  • 함수는 항상 객체입니다
  • 개체는 항상 개체입니다

프리미티브를 제외한 모든 JavaScript 값은 객체입니다.


자바스크립트 프리미티브

기본 값속성이나 메서드가 없는 값입니다.

원시 데이터 유형 은 원시 값을 갖는 데이터입니다 .

JavaScript는 5가지 유형의 기본 데이터 유형을 정의합니다.

  • string
  • number
  • boolean
  • null
  • undefined

기본 값은 변경할 수 없습니다(하드코딩되어 있으므로 변경할 수 없음).

x = 3.14이면 x 값을 변경할 수 있습니다. 그러나 3.14의 값은 변경할 수 없습니다.

유형논평
"안녕하세요""안녕하세요"는 항상 "안녕하세요"입니다.
3.14숫자3.14는 항상 3.14입니다.
진실부울사실은 항상 사실이다
거짓부울거짓은 항상 거짓이다
없는null(객체)null은 항상 null
찾으시는 주소가 없습니다찾으시는 주소가 없습니다undefined는 항상 undefined입니다

객체는 변수입니다

JavaScript 변수에는 단일 값이 포함될 수 있습니다.

예시

let person = "John Doe";

JavaScript 변수에는 많은 값이 포함될 수도 있습니다.

객체도 변수입니다. 그러나 개체에는 많은 값이 포함될 수 있습니다.

개체 값은 이름: 값 쌍(콜론으로 구분된 이름과 값)으로 작성됩니다.

예시

let person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

JavaScript 객체는 명명된 값 의 모음입니다.

const키워드 로 개체를 선언하는 것이 일반적 입니다.

예시

const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};


개체 속성

JavaScript 객체에서 명명된 값을 속성 이라고 합니다 .

재산
이름 남자
암사슴
나이 50
눈 색깔 푸른

이름 값 쌍으로 작성된 객체는 다음과 유사합니다.

  • PHP의 연관 배열
  • 파이썬의 사전
  • C의 해시 테이블
  • Java의 해시 맵
  • Ruby 및 Perl의 해시

개체 메서드

메서드는 개체에 대해 수행할 수 있는 작업 입니다.

개체 속성은 기본 값, 기타 개체 및 함수가 될 수 있습니다.

객체 메소드 는 함수 정의 를 포함하는 객체 속성 입니다.

재산
이름 남자
암사슴
나이 50
눈 색깔 푸른
전체 이름 function() {return this.firstName + " " + this.lastName;}

JavaScript 개체는 속성 및 메서드라고 하는 명명된 값의 컨테이너입니다.

다음 장에서 방법에 대해 자세히 알아볼 것입니다.


자바스크립트 객체 생성

JavaScript를 사용하여 고유한 개체를 정의하고 만들 수 있습니다.

새 개체를 만드는 방법에는 여러 가지가 있습니다.

  • 개체 리터럴을 사용하여 단일 개체를 만듭니다.
  • 키워드를 사용하여 단일 개체를 만듭니다 new.
  • 개체 생성자를 정의한 다음 생성된 형식의 개체를 만듭니다.
  • 를 사용하여 객체를 생성합니다 Object.create().

객체 리터럴 사용

이것은 JavaScript 객체를 생성하는 가장 쉬운 방법입니다.

객체 리터럴을 사용하면 하나의 명령문에서 객체를 정의하고 생성할 수 있습니다.

객체 리터럴은 중괄호 {} 안에 있는 이름:값 쌍(예: age:50)의 목록입니다.

다음 예제에서는 4개의 속성이 있는 새 JavaScript 객체를 만듭니다.

예시

const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

공백과 줄 바꿈은 중요하지 않습니다. 객체 정의는 여러 줄에 걸쳐 있을 수 있습니다.

예시

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

이 예에서는 빈 JavaScript 개체를 만든 다음 4개의 속성을 추가합니다.

예시

const person = {};
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";

자바스크립트 키워드 new 사용하기

다음 예제에서는 를 사용하여 새 JavaScript 객체를 new Object()만든 다음 4개의 속성을 추가합니다.

예시

const person = new Object();
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";

위의 예는 정확히 동일합니다.

그러나 사용할 필요가 없습니다 new Object().

가독성, 단순성 및 실행 속도를 위해 객체 리터럴 방법을 사용하십시오.


JavaScript 객체는 변경 가능합니다

개체는 변경 가능합니다. 개체는 값이 아닌 참조로 처리됩니다.

person이 객체인 경우 다음 명령문은 person의 복사본을 생성하지 않습니다.

const x = person;  // Will not create a copy of person.

개체 x는 사람 의 복사본이 아닙니다 . 사람 입니다 . x와 person은 같은 객체입니다.

x를 변경하면 사람도 변경됩니다. x와 사람은 같은 대상이기 때문입니다.

예시

const person = {
  firstName:"John",
  lastName:"Doe",
  age:50, eyeColor:"blue"
}

const x = person;
x.age = 10;      // Will change both x.age and person.age