Web(Front) - JavaScript 객체

ofijwe·2024년 8월 25일

web_front

Front End

목록 보기

8/10

📒 JavaScript 객체

1️⃣ 객체

이름과 값으로 구성된 프로퍼티의 집합
문자열, 숫자, boolean, null, undefined를 제외한 모든 값
js 객체 : 키와 값으로 구성된 프로퍼티들의 집합
전역 객체를 제외한 js 객체는 프로퍼티를 동적으로 추가하거나 삭제가능
함수는 일급 객체이므로 값으로 사용 X → 프로퍼티의 값으로 함수 사용 가능
프로토타입이라는 특별한 프로퍼티 포함

2️⃣ 객체 생성

객체 리터럴
- 가장 일반적인 방법
- {}를 사용해 객체 생성
- {}내에 1개 이상의 프로퍼티를 추가해 객체 생성
- 사용 방법
  - var obj = {};
Object 생성자 함수
- new 연산자와 Object 생성자 함수 호출해 빈 객체 생성
- 빈 객체 생성 후 프로퍼티 or 메소드 추가해 객체 완성
- 사용 방법
  - var obj = new Object();
생성자 함수
- 동일한 프로퍼티를 갖는 객체 생성 시
  - 위 두 방법은 동일한 코드를 반복적으로 작성
- 생성자 함수를 이용하면 템플릿(클래스)처럼 사용해 프로퍼티가 동일한 객체 여러 개를 간단히 생성 가능
- 사용 방법
  - 함수 이름의 첫 문자 대문자
  - 반드시 new 연산자를 붙여 실행
- 호출 시 동작 순서
  - 빈 객체를 만들어 this에 할당
  - 함수 본문 실행
  - this에 새로운 프로퍼티 추가해 this 수정
  - this 반환(default)

3️⃣ 객체 속성 값 조회

객체는 dot(.)을 사용하거나 대괄호([])를 사용해 속성 값에 접근
대괄호 내에 들어가는 프로퍼티 이름은 반드시 문자열이어야 함
객체에 없는 속성에 접근 시 undefined 반환
객체 속성 값 조회 할 때 || 연산자 사용 가능

4️⃣ 객체 속성 값 변경, 추가, 제거

속성 값 변경 시 dot(.)이나 대괄호([]) 사용
객체에 값 할당하는 속성이 없을 경우, 해당 속성이 추가됨
delete 연산자를 이용해 속성 제거

5️⃣ 객체 참조

객체는 복사되지 않고 참조됨.
JS에서 원시(Primitive) 데이터 타입이 아닌 모든 값은 참조 타입
참조 타입은 Object, Array, Date, Error 포함
타입 확인 방법 : typeof → null은 원시 타입. but, typeof 연산자에서 object를 반환

6️⃣ 객체 분류

Object
- Built-in Object
  - Standard Built-in Object
  - Native Object
    - BOM (Browser Object Model)
    - DOM (Document Object Model)
- Host Object(사용자 정의)

7️⃣ 함수 선언, 호출

JS에서 함수는 일급(first-class) 객체
함수를 변수, 객체, 배열 등에 저장 가능
다른 함수에 전달하는 전달 인자(콜백함수) or 리턴 값으로 사용 가능
프로그램 실행 중 동적 생성 가능

함수 정의 방법 3가지

함수 선언문

function sum1(num) {
    var sum = 0;
    for(var i = 1; i <= N; i++) {
        sum += i;
    }
    console.log(sum); // 5
}
sum1(10);

함수 표현식(리터럴)

var sum2 = function (N) {
    var sum = 0;
    for(var i = 1; i <= N; i++) {
        sum += i;
        }
    console.log(sum) // 55
};
sum2(10);

Function 생성자(constructor) 함수

var sum3 = new Function(
        "num",
        "var sum = 0;"
        + "for(var i = 1; i <= N; i++ {"
        + " sum += i;" + "} "
        + "console.log(sum);"
);
sum3(10);