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 객체는 정렬되지 않은 속성의 모음입니다.

속성은 일반적으로 변경, 추가 및 삭제할 수 있지만 일부는 읽기 전용입니다.


JavaScript 속성 액세스

개체의 속성에 액세스하는 구문은 다음과 같습니다.

objectName.property      // person.age

또는

objectName["property"]   // person["age"]

또는

objectName[expression]   // x = "age"; person[x]

표현식은 속성 이름으로 평가되어야 합니다.

실시예 1

person.firstname + " is " + person.age + " years old.";

실시예 2

person["firstname"] + " is " + person["age"] + " years old.";


JavaScript for...in 루프

JavaScript for...in문은 개체의 속성을 반복합니다.

통사론

for (let variable in object) {
  // code to be executed
}

루프 내부의 코드 블록은 for...in각 속성에 대해 한 번씩 실행됩니다.

객체의 속성을 통해 반복:

예시

const person = {
  fname:" John",
  lname:" Doe",
  age: 25
};

for (let x in person) {
  txt += person[x];
}

새 속성 추가

단순히 값을 지정하여 기존 개체에 새 속성을 추가할 수 있습니다.

person 객체가 이미 존재한다고 가정하고 새 속성을 부여할 수 있습니다.

예시

person.nationality = "English";

속성 삭제

키워드 는 delete객체에서 속성을 삭제합니다.

예시

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

delete person.age;

또는 사람["나이"] 삭제;

예시

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

delete person["age"];

키워드 는 delete속성 값과 속성 자체를 모두 삭제합니다.

삭제 후에는 속성을 다시 추가하기 전에는 사용할 수 없습니다.

delete연산자는 개체 속성에 사용하도록 설계되었습니다 . 변수나 함수에는 영향을 미치지 않습니다.

연산자 는 delete미리 정의된 JavaScript 개체 속성에 사용하면 안 됩니다. 응용 프로그램이 충돌할 수 있습니다.


중첩된 개체

객체의 값은 다른 객체일 수 있습니다.

예시

myObj = {
  name:"John",
  age:30,
  cars: {
    car1:"Ford",
    car2:"BMW",
    car3:"Fiat"
  }
}

점 표기법이나 대괄호 표기법을 사용하여 중첩된 객체에 액세스할 수 있습니다.

예시

myObj.cars.car2;

또는:

예시

myObj.cars["car2"];

또는:

예시

myObj["cars"]["car2"];

또는:

예시

let p1 = "cars";
let p2 = "car2";
myObj[p1][p2];

중첩 배열 및 객체

객체의 값은 배열이 될 수 있고 배열의 값은 객체가 될 수 있습니다.

예시

const myObj = {
  name: "John",
  age: 30,
  cars: [
    {name:"Ford", models:["Fiesta", "Focus", "Mustang"]},
    {name:"BMW", models:["320", "X3", "X5"]},
    {name:"Fiat", models:["500", "Panda"]}
  ]
}

배열 내부의 배열에 액세스하려면 각 배열에 대해 for-in 루프를 사용하십시오.

예시

for (let i in myObj.cars) {
  x += "<h1>" + myObj.cars[i].name + "</h1>";
  for (let j in myObj.cars[i].models) {
    x += myObj.cars[i].models[j];
  }
}

속성 속성

모든 속성에는 이름이 있습니다. 또한 가치도 있습니다.

값은 속성의 속성 중 하나입니다.

기타 속성은 열거 가능, 구성 가능 및 쓰기 가능입니다.

이러한 속성은 속성에 액세스하는 방법을 정의합니다(읽을 수 있습니까?, 쓸 수 있습니까?).

JavaScript에서는 모든 속성을 읽을 수 있지만 값 속성만 변경할 수 있습니다(속성이 쓰기 가능한 경우에만).

( ECMAScript 5에는 모든 속성 속성을 가져오고 설정하는 메서드가 있습니다.)


프로토타입 속성

JavaScript 객체는 프로토타입의 속성을 상속합니다.

키워드 는 delete상속된 속성을 삭제하지 않지만 프로토타입 속성을 삭제하면 프로토타입에서 상속된 모든 객체에 영향을 미칩니다.