Web(Front) - JavaScript 객체

📒 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);

8️⃣ 함수 호이스팅

• 함수 선언문의 경우 함수 선언 위치 상관없이 코드 내 어느 곳에서든지 호출 가능
• JS 모든 선언 (var, function)을 호이스팅(Hoisting)
• 함수 선언문으로 정의된 함수는 JS 엔진 스크립트가 로딩되는 시점에 이를 변수객체에 저장
• 함수 선언, 초기화, 할당이 한 번에 이루어짐.
• 함수 표현식의 경우 함수 호이스팅이 아닌 변수 호이스팅 발생

9️⃣ 함수 매개변수

• 매개변수(parameter) : 함수의 정의 부분에 외부로부터 전달받을 변수
• 전달인자(argument) : 함수 호출 시 전달하는 값
• JS에서 함수 정의 시 매개변수에 대한 타입 명시 X
• 함수 호출 시 정의된 매겨변수와 전달인자 개수 일치하지 않더라도 호출 가능