헝그리코더

자바스크립트에서 한 쌍의 중괄호 {} 로 묶어 리터럴 표기법을 사용하여 단일 객체를 생성 할 수 있다.

아래 코드는 객체 color 생성과 동시에  red, black 속성과 해당 값을 추가

//color 객체 생성
var color = { 
   red : "#ff0000"
  ,black : "#000000"
};
console.log(color.red); // >> #ff0000
console.log(color.red); // >> #000000

생성과 동시에 할당된 color 객체의 속성의 값을 [수정,추가,삭제] 작업을 수행할 수 있다.

즉 이미 할당된 객체의 값을  이동중에도 원하는대로  작업이 가능하다.

아래 코드는 생성된 color 단일 객체의 red, blue, print  속성 값을 제어 한다.

//color 객체 생성
var color = { 
   red : "#ff0000"
  ,black : "#000000"
};

//객체 속성  수정
color.red = "#8b0000";

//객체 속성  추가
color.blue = "#0000ff";

//객체 메서드 추가
color.print = function(){
  for (var prop in this){
	console.log( prop +":" + this[prop] );
  }
}

console.log(color.print());
// red:#8b0000
// black:#000000
// blue:#0000ff

자바스크립트에서 단일 객체의 속성 값은 기본 유형으로 제한되지 하지 않고 있기 때문에

다른 객체인 속성을 추가 하거나 함수(function) 또한 작성 할 수 있다.

단일 객체 리터럴 표기법은 필요한 모든 것이 단일 객체이고 여러 인스턴스가 필요하지 않은 경우 선호 되겠지만

인스턴스가 생성하고 미리 정의 된 값을 기반으로 작업이 필요한 경우 생성자 함수를 사용하는 작성 하는 것이 좋을 것이다.

함수 선언식과 표현식의 차이점

함수 선언식은 호이스팅에 영향을 받지만, 함수 표현식은 호이스팅에 영향을 받지 않는다.

함수 선언식은 코드를 구현한 위치와 관계없이 자바스크립트의 특징인 호이스팅에 따라 브라우저가 자바스크립트를 해석할 때 맨 위로 끌어 올려진다.

예를 들어, 아래의 코드를 실행할 때

//[실행 전]
funcDeclaration();
funcExpression();
 
function funcDeclaration() {
    return console.log('함수 선언식 [ Function Declarations ]');
 }
var funcExpression = function () {
    return console.log('함수 표현식 [ Function Expressions ]');
}

호이스팅에 의해 자바스크립트 해석기는 코드를 아래와 같이 인식한다.

위 코드 결과

함수 표현식 funcExpression 는 호이스팅이 적용되며 위치가 상단으로 변경되었다.

   var funcExpression;

   funcDeclaration();
   funcExpression();

함수 표현식 funcExpression 에  할당될 함수 로직은 호출된 이후에 선언되므로, funcExpression 는 함수로 인식하지 않고 변수로 인식하게된다.