목록은 데이터를 저장하는 유용한 방법이지만 목록의 특정 개체에 대한 여러 속성을 저장하려는 경우에는 사용하기가 불편합니다. 예를 들어, 쿠키 가게에서 판매되는 모든 쿠키에 대한 데이터를 저장하려면 데이터를 저장할 여러 목록을 만들어야 합니다.
그것이 객체가 들어오는 곳입니다. 객체를 사용하면 이름:값 쌍으로 데이터를 저장할 수 있습니다. 즉, 애플리케이션에 저장한 데이터에 레이블을 추가할 수 있습니다.
이 가이드에서는 객체가 무엇이고 코드에서 객체를 사용하는 방법에 대해 논의할 것입니다. JavaScript 프로그래밍 언어에서 객체 생성, 객체 수정 및 객체 삭제에 대해 이야기하겠습니다.
개체란 무엇입니까?
객체는 JavaScript의 데이터 유형입니다. 0개 이상의 이름과 값으로 구성되며 함께 쌍을 이룹니다. 각 이름은 값에 대한 레이블 역할을 합니다. 즉, 개체의 특정 값에 액세스하려면 해당 레이블을 참조하기만 하면 됩니다. 이름은 때때로 "키"라고 합니다.
값에는 문자열, 숫자 또는 다른 개체와 같은 모든 유형의 데이터가 포함될 수 있습니다. 값에는 특정 개체에 적용되는 기능인 속성과 메서드도 포함될 수 있습니다.
키와 값은 함께 매핑되어 JS 개체에서 키:값 쌍을 만듭니다.
JavaScript 객체는 JSON(JavaScript Object Notation의 약자)이 구축된 개념입니다. JSON은 JavaScript와 약간 다르지만 이 두 데이터 구조는 모두 이름:값 쌍 접근 방식을 사용하여 데이터를 저장합니다.
개체를 만드는 방법
객체를 생성하는 방법에는 두 가지가 있습니다. 개체 생성자 접근 방식을 사용하거나 개체 리터럴을 선언할 수 있습니다.
참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.
부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.
객체 생성자는 "new" 키워드를 사용하여 새 객체를 생성합니다.
const cookie = new Object();
이것은 값을 추가할 수 있는 빈 개체를 만듭니다. 단순히 중괄호 세트인 객체 리터럴을 사용하여 객체를 선언할 수도 있습니다.
const cookie = {};
이 두 가지 예에서 우리는 빈 객체를 만들었습니다. JavaScript 응용 프로그램에서 이러한 메서드를 서로 바꿔 사용할 수 있습니다. 객체 리터럴 메서드는 단순성 때문에 아마도 더 일반적일 것입니다. 중괄호 세트만 생성하면 됩니다.
데이터로 객체를 생성하기 위해 객체 리터럴 구문을 사용할 수 있습니다:
const raspberry_white_choc = {
name: "Raspberry White Chocolate Chip",
price: 1.50,
available: true,
stock: 42
} 이 개체에는 4개의 이름과 값이 있습니다. 예를 들어 "price"라는 레이블은 부동 소수점 숫자 1.50과 연결됩니다. "사용 가능" 레이블은 부울 값 "true"와 연결됩니다.
객체를 읽는 방법
지금까지 객체를 생성하는 방법에 대해 논의했지만 객체에 액세스할 수 없다면 객체는 별로 쓸모가 없습니다. 객체의 내용을 읽는 방법에는 두 가지가 있습니다. 점 표기법(.) 또는 대괄호 표기법([])을 사용할 수 있습니다.
초콜릿 칩 쿠키의 이름을 검색한다고 가정해 보겠습니다. 다음 코드를 사용하여 그렇게 할 수 있습니다.
console.log(raspberry_white_choc.name);
이 코드는 다음을 반환합니다:라즈베리 화이트 초콜릿 칩. 이 예에서 우리는 객체의 이름인 "raspberry_white_choc"를 참조하고 그 다음에 점이 오고 그 다음에 값을 검색하려는 속성의 이름을 참조했습니다. 이것이 점 표기법이라고 불리는 이유입니다. 개체와 속성 이름 사이에 점이 있습니다.
대괄호 표기법을 사용하여 개체를 읽을 수도 있습니다.
console.log(raspberry_white_choc["available"]);
우리 코드는 true를 반환합니다. 대괄호 표기법은 개체의 이름을 지정한 다음 검색하려는 값의 이름을 지정하는 곳입니다. 검색하려는 값의 이름은 따옴표로 묶은 다음 대괄호로 묶어야 합니다.
개체를 수정하는 방법
다음 세 가지 방법으로 개체를 수정할 수 있습니다.
- 개체에 항목 추가
- 기존 개체 항목 수정
- 개체에서 항목 제거
이전의 쿠키 예를 참조하여 이것들을 하나씩 논의해 보겠습니다.
개체에 항목 추가
목록과 달리 push()가 없습니다. 또는 append() 객체에 값을 추가하는 데 사용할 수 있는 함수입니다. 할당 연산자를 사용하여 속성에 새 값을 할당하기만 하면 됩니다.
객체에 "gluten_free" 값을 추가하고 싶다고 가정해 보겠습니다. 다음 문장 중 하나를 사용하여 그렇게 할 수 있습니다.
// Using bracket notation raspberry_white_choc["gluten_free"] = false; console.log(raspberry_white_choc.gluten_free); // Using dot notation raspberry_white_choc.gluten_free = false; console.log(raspberry_white_choc.gluten_free);
코드 반환:
false false
이 두 가지 예에서 우리는 "gluten_free"라는 객체에 새 항목을 만들었습니다. 이 항목에 할당한 값은 "거짓"입니다.
기존 개체 항목 수정
개체의 내용을 변경하는 것은 개체에 새 값을 할당하는 것과 같은 방식으로 작동합니다. 두 방법 모두 할당 연산자를 사용하여 개체를 수정합니다.
라즈베리 화이트 초콜릿 칩 쿠키에 대한 레시피를 변경했는데 이제 글루텐이 없다고 가정해 보겠습니다. 다음 코드를 사용하여 객체의 "gluten_free" 항목을 변경할 수 있습니다.
raspberry_white_choc.gluten_free = true; console.log(raspberry_white_choc.gluten_free);
우리 코드는 true를 반환합니다. 원하는 경우 대괄호 표기법을 사용하여 변경할 수도 있습니다.
개체에서 항목 제거
"delete" 키워드를 사용하면 개체에서 속성을 제거할 수 있습니다. 다음 코드를 사용하면 객체에서 "gluten_free" 속성을 삭제할 수 있습니다.
delete raspberry_white_choc.gluten_free; console.log(raspberry_white_choc);
코드 반환:
{ available: true, name: "Raspberry White Chocolate Chip", price: 1.5, stock: 42 } 보시다시피 "gluten_free"라는 이름은 더 이상 개체에 없습니다. 삭제 키워드를 사용하여 삭제했기 때문입니다.
결론
JavaScript 객체 구조를 사용하면 관련 데이터를 쉽게 저장할 수 있습니다. 이 기사에서는 객체가 쿠키 저장소의 쿠키에 정보를 저장할 수 있는 방법에 대해 이야기했습니다. 또한 개체를 사용하여 사용자 계정, 제과점의 요리법 또는 일정 약속을 저장할 수도 있습니다.