Javascript - Control Statement, Object Literal

 

 

제어문 개요

제어문은 조건에 따라 코드 블록을 실행하거나 반복 실행할 때 사용한다.

• 제어문은 코드의 실행 흐름을 인위적으로 제어할 수 있다. -> 순차적으로 진행하는 직관적인 코드의 흐름을 혼란스럽게 만든다.
• 제어문은 코드의 흐름을 이해하기 어렵게 만들어 가독성을 해치는 단점이 있다. -> 가독성이 좋지 않은 코드는 오류를 발생시키는 원인

cf) forEach(), map(), filter(), reduce() 와 같은 고차 함수를 사용한 함수형 프로그래밍 기법에서는 제어문 사용을 억제해 복잡성을 해결하려 한다.

 

 

객체 리터럴

자바스크립트는 객체 기반의 프로그래밍 언어

• 원시값을 제외한 나머지 값(함수, 배열, 정규 표현식 등)은 모두 객체
• 원시 타입은 하나의 값만 나타내지만 객체 타입은 다양한 타입의 값을 하나의 단위로 구성
• 원시값은 변경 불가(immutable)한 값이지만, 객체는 변경 가능(mutable)한 값
• 객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 key, value로 구성
• JS에서 함수도 프로퍼티의 값으로 설정 가능 -> 메서드라고 함

var myObj = {
  num: 0, // 프로퍼티
  increase: function () { ... } // 메서드
}

• 프로퍼티: 객체의 상태를 나타내는 값(data)
• 메서드: 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작(behavior)

 

자바스크립트는 프로토타입 기반 객체지향 언어

• 자바와 같은 클래스 기반 객체지향 언어와 달리, 다양한 객체 생성 방법을 지원
  • 객체 리터럴, object 생성자 함수, 생성자 함수, Object.create 메서드, 클래스(ES6)

 

 

객체 리터럴을 사용한 객체 생성

• 중괄호 { ... } 내에 0개 이상의 프로퍼티를 정의
• 변수에 할당되는 시점에 자바스크립트 엔진은 객체 리터럴을 해석해 객체를 생성

var person = {
  name: 'JIOH',
  sayHello: function() {
    console.log(`Hello My name is ${this.name}`);
  },
};

console.log(typeof person); // object
console.log(person); // { name: 'JIOH', sayHello: [Function: sayHello] };

 

 

프로퍼티

객체는 프로퍼티의 집합, 프로퍼티는 key, value로 구성

• key: 빈 문자열을 포함하는 모든 문자열 또는 심벌 값
• value: JS에서 사용할 수 있는 모든 값

 

프로퍼티 키는 프로퍼티 값에 접근할 수 있는 이름으로서 식별자 역할

• 하지만 반드시 식별자 네이밍 규칙을 따라야하는 것은 아니다.
• 자바스크립트에서 사용 가능한 유요한 이름인 경우, 따옴표( ''or") 를 생략할 수 있다.
• 반대로 말하면 식별자 네이밍 규칙을 따르지 않는 이름에는 반드시 따옴표를 사용해야 한다.

var person = {
  firstName: 'Young-min',  // 식별자 네이밍 규칙을 준수한 프로퍼티 키
  'last-name': 'WI',       // 식별자 네이밍 규칙을 준수하지 않은 프로퍼티 키 ( 따옴표를 사용해 문자열 형태 유지 )
  last-name: 'WI'          // SyntaxError: Unexpected token ( 식별자 네이밍 규칙을 준수하지 않은 프로퍼티 키 ( 따옴표를 사용하지 않을 경우 - 표현식으로 해석 ) )
};

• 프로퍼티에 문자열이나 심벌 값 외의 값을 사용하면 암묵적 타입 변환을 통해 문자열이 된다.
• 이미 존재하는 프로퍼티 키를 중복 선언하면 나중에 선언한 프로퍼티가 먼저 선언한 프로퍼티를 덮어쓴다. ( 에러 발생 X)

 

 

메서드

자바스크립트에서 함수는 값으로 취급 가능 -> 프로퍼티 값이 함수일 경우 일반 함수와 구분하기 위해 메서드라고 한다.

 

 

 

프로퍼티 접근 방법

• 마침표 표기법: 마침표(.) 프로퍼티 접근 연산자 사용
• 대괄호 표기법: 대괄호([...]) 프로퍼티 접근 연산자 사용

var person = {
  name: "WI",
};

console.log(person.name); // "WI" ( 마침표 표기법 )
console.log(person["name"]); // "WI" ( 대괄호 표기법 )

// 대괄호 프로퍼티 접근 연산자 내에 문자열 형태가 아닌 프로퍼티 키로 사용하면 자바스크립트 엔진은 "식별자"로 해석
console.log(person[name]); // ReferenceError: name is not defined

// 객체에 존재하지 않는 프로퍼티에 접근시 -> undefined
console.log(person.age); // undefined

 

 

 

프로퍼티 동적 생성, 삭제

var person = {
  name: "WI",
};

person.age = 100; // { age: 100 } 프로퍼티 동적 생성
console.log(person); // { name: 'WI', age: 100 }

delete person.age; // age 라는 프로퍼티 키가 있고 -> 해당 프로퍼티 삭제
delete person.job; // job 이라는 프로퍼티 키는 없음 -> 그럼에도 delete 연산시 에러 발생 X

console.log(person); // { name: 'WI' }