Web/Javascript

객체(Object)란 무엇인가???

zkzk7290 2024. 8. 7. 17:50
반응형
객체 :관련된 데이터와 함수(일반적으로 여러 데이터와 함수로 이루어지는데, 객체 안에 있을 때는 보통 프로퍼티와 메소드라고 부릅니다)의 집합입니다.

  객체의 구조
  객체 지향 프로그램의 객체 -- 고유한 특성과 동작을 가지는 것

  특성 (속성, 프로퍼티) - 변수,  기능 (동작, 메서드) - 함수

  • 특성: 객체를 구성하는 정보의 일부, 해당 객체의 상태 지표가 됨 
     -사람 -  이름, 나이, 성별, 직업, 주민등록번호, 키, 몸무게.... 
  • 기능 :객체가 수행할 수 있는 행동이나 기능을 정의                                                                                                         -사람 - 공부하다, 걷다, 먹다, 말하다, 잠을 자다.....

         EX) 스마트 폰을  객체의 구조식으로 표현  

         - 특성 (속성)-
          제조사: 'Apple'
          모델: '10s'
         저장공간: '64GB'
         배터리상태: '85%'

       -기능 (동작)- 
        전화 걸기
        앱 실행하기
        사진 찍기

let objectName = {
  // 키1: 값1,
  // 키2: 값2,
  // 키3: 값3,
  // ...

  //  값의 데이터 형식에는 제한 X (배열, 또 다른 객체, 함수 모두 사용 가능)
  //  키와 값을 하나의 쌍(멤버)으로 나열, 각각의 쌍은 ,(콤마)로 구분
  //  각각의 멤버(키와 값)는 콜론(:)으로 분리
  
  let lsa1 = ['성', '찬영'];

let lsa2 = {
  // 키(이름)는 문자열로 작성하되, 따옴표 없이 작성
  // : 영문자 사용을 권장, lowerCamelCase 사용을 권장
  lastName: '성',
  firstName: ' 찬영',

  height: '181',
  hobby: ['야구 시청', '독서']
};

 

객체의 생성 방법:  리터럴 방식, 생성자 함수 사용 방식

리터럴 방식 :  가장 간단하고 일반적인 객체 생성 방식
    - 중괄호 {}를 사용하여 객체를 선언하고 초기화 - 내부에 속성과 메서드 정의

const person1 ={// const는 해당 변수의 주소를 전달하기때문에  안에 내부 데이터는 수정이 가능하다 
// 쉽게 말해서 집의 주소를 바꾸면 안되고 집안에 있는 가구들은 바꿔도 상관이  없다.
    name : '김철수',
    age : '25',
    married : false
};
console.log(typeof(person1));
console.log(person1);
//값들에 접근하는 방법 (값을 반환하는 코드들 )
console.log(
    person1.name,
    person1['age']
);
기존의 프로퍼티 수정하기 
person2.age++;
person2['married'] = true;

 

 

생성자 함수 방식 : new 키워드와 함께 '사용자 정의 생성자 함수'를 사용하여 객체를 생성
- 같은 형태(구조)의 객체를 여러 개 생성할 때 유용

function person1(name, age, maerried){
    this.name =name ;
    this.age =age;
    this.maerried =maerried;
}

let person2 =new person1('김철수',27,false)
console.log(person2.name);
console.log(person2.age);
console.log(person2.maerried);

This  : 함수가 호출될때 결정이 된다.
- 고정된것이 아니라 함수가 호출 될떄 마다 값이 바뀐다.
console.log(this);//{}
//전역적인 문맥에서 this에 접근을 하게되면 윈도우 객체가 된다.

const car = {
    name :"BZ",
    getName: function(){
        console.log('car getName',this);
    },
};
const globalCar = car.getName;
globalCar();
const car2 = {
    name : 'BMW',
    getName : car.getName,
};
car2.getName()
// .bind this값을 고정 시켜주는 함수 
const bindGetname =car2.getName.bind(car);
console.log(bindGetname);//BZ가 나온ㅁ

https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Basics

 

JavaScript 객체 기본 - Web 개발 학습하기 | MDN

이 글에서는 JavaScript 객체와 관련된 기본적인 문법을 살펴보고 이전 코스에서 학습해서 이미 알고 있는 JavaScript 의 특징들과 우리가 이미 사용하고 있는 기능들이 이미 객체와 관련되어 있다는

developer.mozilla.org

 

반응형