본문 바로가기
코딩 이것저것

[코딩]자바스크립트 핵심 가이드(3)

by 글쓰는 홍차 2020. 5. 5.

자바스크립트에서 단순한 데이터 타입은 숫자, 문자열, 불리언(true/false), null, undefined가 있고 이들을 제외한 다른 값들은 모두 객체다 

객체란? 변형 가능한 속성들의 집합이라고 할 수 있다. 객체는 이름과 값이 있는 속성들을 포함하는 컨테이너라고 할 수 있음 

  • 속성: 이름은 문자열로 가능(빈 문자열 포함) 
  • 속성의 값 : undefined를 제외한 모든 값이 사용 가능함 
  • 클래스가 필요 없음 
  • 이름이나 값에 어떠한 제약 사항도 없음 

이 장도 매우 기본적인 내용이므로, 단어의 배열로 넘어가도록 한다, 이장에서 가장 핵심적인 내용은 객체 속성 값을 잘 걸러내는 방법을 알려주는 것이다. 추가나 삭제 등 기본적인 작업은 쉬운 편에 속한다. JSON에서 속성으로 걸러내서 데이터 클렌징하는 부분을 많이 사용하게 되므로 hasOwnProperty나 typeof를 이용하여 속성에 대해서 에러를 내지 않는 방법을 알아두는 게 유용한 것 같다 

객체 리터럴, 속성값 읽기, 속성 값 경신, 참조, 프로토타입, 리플렉션, 열거, 삭제, 최소한의 전역 변수 사용으로 나누어 설명하는데 

// 객체 리터럴 
var empty_object = {}; 
var stooge = { 
	"first-name" : "Jerome", 
    "last-name" : "Howard" 
    }; 
    

속성 값 읽기 

  • 대괄호([])로 둘러싼 형태로 읽을 수 있음
  • 객체에 존재하지 않는 속성을 읽으려고 하면 undefined를 반환함
    • || 연산자를 사용하여 다음과 같이 기본값을 지정할 수 있음 
var middle  = stooge["middle-name"] || "(none)"; 

// undefined 속성을 참조하려 할 때 TypeError 예외 발생 -> 방지하기 위해 &&를 사용하여 아래처럼 사용 가능 

flight.equipment // undefined 
flight.equipment.model // throw "TypeErorr" 
flight.equipment && flight.equipment.model // undefined 

프로토타입(Prototype) 

  • 모든 객체는 속성을 상속하는 프로토타입 객체에 연결되어 있음 
    • 객체 리터럴로 생성되는 모든 객체는 자바스크립트의 표준 객체인 Object인 속성인  prototype(Object.prototype) 객체에 연결됨 
    • 이제 Object객체에 create라는 메서드를 추가할 것임 

리플렉션(reflection) 

  • 객체에 어떤 속성들이 있는지는 특정 속성을 접근해서 반환하는 값을 보면 쉽게 알 수 있음 
    • typeof 연산자는 속성의 타입을 살펴보는데 매우 유용함 
typeof flight.number // 'number' 
typeof flight.status // 'string' 
typeof flight.arrival // 'object' 
typeof flight.manifest // 'undefined' 

// 프로토타입 체인 상에 있는 속성을 반환할 수 있기 때문에 주의 필요함 
typeof flight.toString // 'function' 
typeof flight.constructor //'function' 

원하지 않는 속성 배제하기 위한 방법 
1. 함수값 배제하는 방법 
2. 객체에 특정 속성이 있는지를 확인하여 true/false 값을 반환하는 hasOwnProperty 메소드를 사용하는 것임 
(hasOwnProperty는 체인을 바라보지 않음) 

flight.hasOwnProperty('number') // true 
flight.hasOwnproperty('constructor') // false 

열거(Enumeration) 

  • for in 구문을 사용하면 객체에 있는 모든 속성의 이름을 열거할 수 있음 
  • 일반적인 필터링 방법

삭제 

  • delete를 사용하여 제거할 수 있음 

최소한의 전역변수 사용 

  • 전역 변수 사용을 최소화하는 방법 -> 애플리케이션에서 전역 변수 사용을 위해 다음과 같이 전역 변수 하나를 만드는 것임 
var MYAPP = {};  // 전역변수를 위한 컨테이너로 사용함

MYAPP.stooge = {
	"first-name" : "Joe"; 
    "second-name" : "Howard"; 
    }; 
    

이런 방법으로 애플리케이션에 필요한 전역 변수를 이름 하나로 관리하면 다른 애플리케이션이나 위젯 또는 라이브러리들과 연동할 때 발생하는 문제점을 최소화할 수 있음 또, 프로그램 가독성도 높일 수 있다. 정보 은닉을 위해 클로저(closure) 사용 방법을 살펴볼 예정 → 전역 변수 사용을 줄이는 효과적인 방법 중 하나임 

댓글