Javascript의 객체에 대한 초보자 가이드

자바스크립트에서 대부분의 것은 객체입니다. 따라서 이 개념을 파악하는 것이 매우 필요합니다. 이 가이드에서는 객체, 객체 생성, 사용 방법 등에 대해 알아볼 것입니다. 시작합시다 🔥

개체란 무엇입니까?

Mozilla 개발자 가이드에 따르면 개체는 관련 데이터 및/또는 기능의 모음입니다. 기본적으로 속성이라고 하는 몇 가지 키-값 쌍으로 구성됩니다. 객체 내부에 메서드나 함수를 저장할 수도 있습니다.

그것이 어떻게 보이고 어떻게 우리가 객체를 만드는지 봅시다 -

var user = {
   firstName: 'Harshad',
   lastName: 'Mehta',
   age:45,
   hobbies:['winning','driving Lexus'],
   isLion : true,
   message: function(){
      return `${this.firstName} says Lala!!!`
   }
}
console.log(user) //this will return all the object values 
console.log(user.message()) // this will run the function message inside the user object

여기서 무슨 일이 일어나고 있는지 분석해 봅시다.

여기에서 사용자라는 개체 이름을 만들고 모든 속성을 {} 대괄호 안에 저장했습니다. 각 속성에 대해 : 콜론(이 경우 firstName: 'Harshad')으로 구분된 키 이름과 값을 제공합니다. 마지막으로 모든 속성은 , 쉼표로 구분됩니다.

개체는 예제에서 볼 수 있듯이 모든 데이터 유형의 속성을 가질 수 있습니다. 개체에는 문자열, 숫자, 부울, 배열이 있습니다. 심지어 우리는 객체 메소드라고 하는 객체에 함수를 가지고 있었습니다.

개체의 속성에 액세스하는 방법:

Dot Notation(.) ⇒ 이것은 우리가 사용자 객체 내에서 메시지 기능을 실행하기 위해 그 예에서 사용한 것입니다. 키 이름 뒤에 점(.)을 사용하여 객체의 속성 값에 액세스합니다. 예를 들어 - 이전 예에서 console.log(user.age) 를 수행하여 사용자의 나이를 얻을 수 있습니다. 이것은 결과로 45를 줄 것입니다.

대괄호 표기법 [] ⇒ 객체의 값에 접근하는 또 다른 방법입니다. 예를 들어 console.log(user['age']) 이것은 45세인 사용자의 나이를 줄 것입니다.

중첩 개체 ✨:

이전 예에서 취미용 배열 대신 중첩 객체를 만들 수도 있었습니다. 예를 들어

//This is how we nest objects  
var user = {
   firstName: 'Harshad',
   lastName: 'Mehta',
   age:45,
   isLion : true,
   hobbies:{
      firstHobby:'Winning',
      secondHobby:'Driving Lexus'
   },
   message: function(){
      return `${this.firstName} says Lala !! `
   }
}
// accessing nested object.
console.log(user.hobbies.firstHobby) // Winning
console.log(user['hobbies']['firstHobby']) //Winning

객체 멤버 설정 및 업데이트:

var user = {
   firstName: 'Harshad',
   lastName: 'Mehta',
   age:45,
   isLion : true,
}

user.age = 55;
user.isLion = false;
console.log(user.age) //55
console.log(user.isLion) //false

여기에서 무슨 일이 일어나고 있는지에 대한 아이디어가 꽤 간단하게 진행되기를 바랍니다.

동일한 작업을 수행하여 새 멤버를 설정할 수도 있습니다.

var user = {
   firstName: 'Harshad',
   age:45,
}
user.luckyNumber = 5; //this will create a nre property in user object
console.log(user) //{ firstName: 'Harshad', age: 45, luckyNumber: 5 }

'이' 키워드란 무엇입니까?

첫 번째 예에서 우리는 this.firstName를 참조하는 메시지 함수 내부에서 firstName을 반환하는 것을 보았습니다. 기본적으로 '이것'은 그것이 쓰여진 대상 자체를 의미합니다. 이 예에서 이것은 사용자 개체를 나타냅니다.

'this'는 매우 유용합니다. 멤버의 컨텍스트가 변경될 때 항상 올바른 값이 사용되도록 합니다. 예를 들어

var user1 = {
   name: "Harshad",
   age: 45,
   message: function () {
      return `${this.name} says Hii`;
   },
};
var user2 = {
   name: "John",
   age: 30,
   message: function () {
      return `${this.name} says Bye`;
   },
};
console.log(user1.message()); // Harshad says Hii
console.log(user2.message()); // John says Bye

우리는 두 객체 모두에서 ${this.name}를 사용했지만 각각 Harshad와 John과 같은 다른 결과를 얻습니다. 동적으로 객체를 생성할 때 많이 사용됩니다.

지금은 여기까지입니다. 시작하기에 충분합니다. 이 게시물이 마음에 들면 pls upvote 및 공유. 또한 더 많은 개발 관련 정보를 위해 저를 팔로우할 수 있습니다. 대단히 감사합니다. 좋은 하루 되시고 행복한 코딩 되세요 :)