[js 딥다이브] 10. 객체 리터럴 정리

미아·2022년 11월 2일
0

js 딥다이브

목록 보기
7/10

10.1 객체란?

  • 자바스크립트 : 객체기반 프로그래밍 언어 ! (구성하는 거의 모든 것이 객체)
  • 객체 타입의 값: 변경 가능한 값(mutable value)
  • 원시 타입의 값: 변경 불가능한 값(immutable value)
var person = {
	name : 'Lee', // 프로퍼티 
	age : 20  // 프로퍼티  ( 프로퍼티 키 : 프로퍼티 값)
};

(🙆‍♀️ 자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값이 될 수 있다)
-> 프로퍼티 값이 함수일 경우, 메서드라고 부른다

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

10.2 객체 리터럴에 의한 객체 생성

⭕c++이나 자바같은 클래스 기반 객체지향언어는 클래스 사전 정의 => 필요한 시점에 new연산자와 함께 생성사 호출 => 인스턴스 생성하는 방식으로 객체 생성

  • js => 다양한 객체 생성 방법 지원

    -객체 리터럴
    -object 생성자 함수
    -생성자 함수
    -Object.create 메서드
    -클래스

(리터럴: 사람이 이해할 수 있는 문자 또는 약속된 기호 사용해 값을 생성하는 표기법)

let person2 = { //변수로 할당되는 시점에 js엔진은 객체 리터럴을 해석해 객체 생성
    name : 'Lee',
    sayHello : function(){
        console.log(`Hello My name is ${this.name}.`);
    }
}; //객체의 마지막에는 ; 붙임

console.log(typeof person2); //object
console.log(person2.sayHello); //ƒ ()console.log(`Hello My name is ${this.name}.`);}

💥 객체 리터럴의 중괄호는 코드 블록 의미 x (객체 리터럴은 표현식 => ; 붙임)

  • 객체 생성 동시에 프로퍼티 만들수도 / 생성 이후에 프로퍼티 동적으로 추가할수도!

10.3 프로퍼티

  • 객체는 프로퍼티의 집합이며 프로퍼티는 키와 값으로 구성된다.
let person = {
  // 프로퍼티 키: name, 프로퍼티 값:'Lee'
  name: 'Lee',
  //프로퍼티 나열할때는 쉼표(,)로 구분
  // 프로퍼티 키:age, 프로퍼티 값:20
  age: 20
};

프로퍼티 키 : 빈 문자열을 포함하는 모든 문자열 또는 심벌 값
프로퍼티 값: 자바스크립트에서 사용할 수 있는 모든 값

💥주 의! 식별자 네이밍 규칙을 따르지 않는 이름에는 반드시 따옴표를 사용해야 한다.
(근데 가급적 식별자 네이밍 규칙 준수하기를 권장!)

  • 문자열 또는 문자열로 평가할 수 있는 표현식을 사용해 프로퍼티 키를 동적으로 생성할 수 도 있다.
let obj = {};
let key = 'hello';

// ES5: 프로퍼티 키 동적 생성
obj[key] = 'world';
console.log(obj); //hello: "world"
// ES6: 계산된 프로퍼티 이름
// let obj = { [key]: 'world' };

✔ 정적과 동적의 큰 차이(강사님) : 처음부터 써져있었냐 아니냐! 동적할당 이라는 말이 컴퓨터 프로그래밍에서 실행시간 동안 사용할 메모리 공간 할당하는것을 말한다!
<유의>

  • 빈 문자열도 프로퍼티 키로 사용 가능하나, 추천 안함
  • var, function 같은 예약어를 프로퍼티 키로 사용가능하나 에러 발생 가능성 있으므로 추천 안함
  • 프로퍼티 키를 중복선언하면 => 덮어쓴다
let foo = {
  name: 'Lee',
  name: 'Kim'
};

console.log(foo); // {name: "Kim"}

10.4 메서드

  • 함수(=>일급객체임)는 값으로 취급되므로! 프로퍼티 값으로 사용될수 있다!
    => 이런 경우 메소드라고 부른다.(일반 함수와 구분 위해)
let circle = {
  radius: 5, // ← 프로퍼티

  // 원의 지름
  getDiameter: function () { // ← 메서드 , 얘도 프로퍼티!
    return 2 * this.radius; // this는 circle을 가리킨다.
  }
};

console.log(circle.getDiameter()); // 10

10.5 프로퍼티 접근

<접근 방법>
1) .사용(=dot notation)
2) []사용(bracket notation) => 반!드!시! 따옴표로 감싼 문자열이어야함 , 아니면 식별자로 해석(식별자는 변수, 함수 등 구별할 수 있는 고유한 이름)

=> 객체에 존재하지 않는 프로퍼티에 접근 => undefined 반환 (ReferenceError 아님)

let person = {
  name: 'Lee'
};

// 마침표 표기법에 의한 프로퍼티 접근
console.log(person.name); // Lee

// 대괄호 표기법에 의한 프로퍼티 접근
console.log(person['name']); // Lee
let person = {
  'last-name': 'Lee', //따옴표로 감싼 프로퍼티 키들은 [] 쓴다고 생각하기!
  1: 10
};

person.'last-name';  // -> SyntaxError: Unexpected string
person.last-name;    // -> 브라우저 환경: NaN
                     // -> Node.js 환경: ReferenceError: name is not defined
person[last-name];   // -> ReferenceError: last is not defined
person['last-name']; // -> Lee

// 프로퍼티 키가 숫자로 이뤄진 문자열인 경우 따옴표를 생략할 수 있다.
person.1;     // -> SyntaxError: Unexpected number
person.'1';   // -> SyntaxError: Unexpected string
person[1];    // -> 10 : person[1] -> person['1']
person['1'];  // -> 10

🙋‍♀️ 위 예제에서 브라우저 환경 / Node.js 환경 결과가 다른 이유?

  • 브라우저 환경: html, css, 자바스크립트를 실행하여 웹 페이지를 화면에 띄워주는게 목적

  • Node.js: 서버 개발 환경을 제공하는 것이 목적
    (둘다 자바스크립트 엔진을 내장하고 있음!)

  • 자바스크립트 엔진은 'person.last'를 먼저 평가 => 브라우저 환경에서는 window객체에 name의 프로퍼티가 암묵적으로 있음(default값은 문자열)! => NaN
    Node.js환경에서는 전역변수 name이 존재 하지 않으므로 ReferenceError

10.6 프로퍼티 값 갱신

  • 이미 존재하는 프로퍼티에 값을 할당하면 갱신됨.
let person = {
  name: 'Lee'
};

// person 객체에 name 프로퍼티가 존재하므로 name 프로퍼티의 값이 갱신된다.
person.name = 'Kim';

console.log(person);  // {name: "Kim"}

10.7 프로퍼티 동적 생성

(동적 생성: 나중에 넣어주는거라고 생각하자!)

  • 존재하지 않는 프로퍼티에 값 할당시 ? 동적 생성 되어 추가되고 값 할당!
let person = {
  name: 'Lee'
};

// person 객체에는 age 프로퍼티가 존재하지 않는다.
// 따라서 person 객체에 age 프로퍼티가 동적으로 생성되고 값이 할당된다.
person.age = 20;

console.log(person); // {name: "Lee", age: 20}

10.8 프로퍼티 삭제

delete연산자를 활용해 객체의 프로퍼티 삭제!(다만 존재하지않는 프로퍼티에 접근하면 무시됨)

let person = {
  name: 'Lee'
};

// 프로퍼티 동적 생성
person.age = 20;

// person 객체에 age 프로퍼티가 존재한다.
// 따라서 delete 연산자로 age 프로퍼티를 삭제할 수 있다.
delete person.age;

// person 객체에 address 프로퍼티가 존재하지 않는다.
// 따라서 delete 연산자로 address 프로퍼티를 삭제할 수 없다. 이때 에러가 발생하지 않는다.
delete person.address;

console.log(person); // {name: "Lee"}

10.9 ES6에서 추가된 객체 리터럴의 확장 기능

<ES6에서 추가된 객체 리터럴 확장 기능>

  • 프로퍼티 축약 표현
  • 계산된 프로퍼티 이름
  • 메서드 축약 표현

10.9.1 프로퍼티 축약 표현

-변수 이름 = 프로퍼티 키 일경우, 프로퍼티 키를 생략 가넝!
(프로퍼티 키는 변수 이름으로 자동 생성됨)

// ES5
var x = 1, y = 2;

var obj = {
  x: x,
  y: y
};

console.log(obj); // {x: 1, y: 2}


// ES6
let x = 1, y = 2;

// 프로퍼티 축약 표현
const obj = { x, y };

console.log(obj); // {x: 1, y: 2}

10.9.2 계산된 프로퍼티 이름

// ES5
var prefix = 'prop';
var i = 0;

var obj = {};

// 계산된 프로퍼티 이름으로 프로퍼티 키 동적 생성
obj[prefix + '-' + ++i] = i;
obj[prefix + '-' + ++i] = i;
obj[prefix + '-' + ++i] = i;

console.log(obj); // {prop-1: 1, prop-2: 2, prop-3: 3}


// ES6
const prefix = 'prop';
let i = 0;

// 객체 리터럴 내부에서 계산된 프로퍼티 이름으로 프로퍼티 키 동적 생성
const obj = {
  [`${prefix}-${++i}`]: i,
  [`${prefix}-${++i}`]: i,
  [`${prefix}-${++i}`]: i
};

console.log(obj); // {prop-1: 1, prop-2: 2, prop-3: 3}
// ES5
let obj = {
  name: 'Lee',
  sayHi: function() {
    console.log('Hi! ' + this.name);
  }
};

obj.sayHi(); // Hi! Lee


// ES6
const obj = {
  name: 'Lee',
  // 메서드 축약 표현
  sayHi() {
    console.log('Hi! ' + this.name);
  }
};

obj.sayHi(); // Hi! Lee
profile
미아
새로운 것은 언제나 재밌어 🎶
이전 포스트

[js 딥다이브] 9. 타입 변환과 단축 평가 정리

다음 포스트

[js 딥다이브] 11. 원시 값과 객체의 비교

0개의 댓글