10장 객체 리터럴

// 객체 리터럴에 의한 객체 생성
var person = {
  name: 'Lee',
  sayHello: function () {
    console.log('Hello! ' + this.name);
  },
};
 
console.log(typeof person); // object
console.log(person); // { name: 'Lee', sayHello: [Function: sayHello] }

var person = {
  //프로퍼티 키는 문자열 또는 심벌이어야 한다.
  name: 'Lee', //프로퍼티 값은 자바스크립트에서 사용할 수 있는 모든 값이 될 수 있다.
  age: 20,
  isStudent: true,
  score: [90, 80, 85],
  address: {
    city: 'Seoul',
    street: 'Gangnam-daero',
  },
  sayHello: function () {
    console.log('Hello! ' + this.name);
  },
};

var person = {
  name: 'Lee', // 식별자 네이밍 규칙 준수 ✅
  'first-name': 'Ung-mo', // 식별자 네이밍 규칙 미준수 (하이픈 포함)
  age: 20,
  1: 'one', // 숫자로 시작 (자동으로 문자열 "1"로 변환)
};

console.log(person.name); // 'Lee' (점 표기법)
console.log(person['first-name']); // 'Ung-mo' (대괄호 표기법)
// console.log(person.first-name); // NaN (person.first - person.name으로 해석됨)
 
console.log(person[1]); // 'one' (숫자는 따옴표 없이 사용 가능)
console.log(person['1']); // 'one' (문자열로 자동 변환)

var propKey = 'age';
var person = {
  name: 'Lee',
  [propKey]: 20, //프로퍼티 키 동적 생성
};
console.log(person.age); //20

var person = {
  name: 'Lee',
  name: 'Kim', // 중복 선언 - 에러 없이 덮어씀
};
console.log(person.name); // 'Kim' (마지막 값으로 덮어씀)
 
// 프로퍼티 개수 확인
console.log(Object.keys(person)); // ['name'] (중복이 아닌 하나만 존재)

var person = {
  name: 'Lee',
  // 메서드: 객체의 프로퍼티 값으로 함수를 할당
  sayHello: function () {
    console.log('Hello! ' + this.name);
  },
  sayGoodbye: function () {
    console.log('Goodbye! ' + this.name);
  },
};
 
person.sayHello(); // 'Hello! Lee'
person.sayGoodbye(); // 'Goodbye! Lee'

// 일반 함수
function sayHello() {
  console.log('Hello!');
}
sayHello(); // 'Hello!'
 
// 메서드는 객체의 상태(프로퍼티)를 참조하고 변경할 수 있음
var counter = {
  count: 0,
  increase: function () {
    this.count++;
  },
  getCount: function () {
    return this.count;
  },
};
 
counter.increase();
console.log(counter.getCount()); // 1

var person = {
  name: 'Lee',
  age: 20,
};
 
//점 표기법
console.log(person.name); // 'Lee'
console.log(person.age); // 20
 
//대괄호 표기법
console.log(person['name']); // 'Lee'
console.log(person['age']); // 20

var person = {
  name: 'Lee',
  age: 20,
};
 
// ❌ 따옴표 없이 사용 - 식별자로 해석됨
console.log(person[name]); // ReferenceError: name is not defined
 
// ✅ 따옴표로 감싸서 사용 - 프로퍼티 키로 해석됨
console.log(person['name']); // 'Lee'
 
// 변수에 저장된 문자열을 프로퍼티 키로 사용
var propKey = 'name';
console.log(person[propKey]); // 'Lee' (propKey 변수의 값인 'name'을 키로 사용)

var person = {
  name: 'Lee',
  age: 20,
};
 
console.log(person.address); // undefined

var person = {
  name: 'Lee',
  age: 20,
};
 
person.name = 'Kim'; // 점 표기법
person['age'] = 30; // 대괄호 표기법
 
console.log(person); // { name: 'Kim', age: 30 }

var person = {
  name: 'Lee',
  age: 20,
};
 
person.address = 'Seoul'; // 점 표기법
person['phone'] = '010-1234-5678'; // 대괄호 표기법
 
console.log(person); // { name: 'Lee', age: 20, address: 'Seoul', phone: '010-1234-5678' }

var person = {
  name: 'Lee',
  age: 20,
};
 
delete person.age; // age 프로퍼티 삭제
console.log(person); // { name: 'Lee' }
 
// 존재하지 않는 프로퍼티 삭제 시도 - 에러 없이 무시됨
delete person.address;
console.log(person); // { name: 'Lee' }
 
// 삭제된 프로퍼티 접근
console.log(person.age); // undefined

var obj1 = { a: 1, b: 2 };
var obj2 = { a: 1, b: 2 };
 
// 방법 1: delete 연산자 (프로퍼티 자체를 삭제)
delete obj1.b;
console.log('b' in obj1); // false (프로퍼티가 존재하지 않음)
console.log(obj1.b); // undefined
 
// 방법 2: undefined 할당 (프로퍼티는 유지, 값만 변경)
obj2.b = undefined;
console.log('b' in obj2); // true (프로퍼티는 존재함)
console.log(obj2.b); // undefined

// ES5: 프로퍼티 키와 값을 모두 작성
var name = 'Lee';
var age = 20;
 
var person = {
  name: name,
  age: age,
};
 
// ES6: 프로퍼티 축약 표현
const name2 = 'Kim';
const age2 = 30;
 
const person2 = {
  name2, // name2: name2와 동일
  age2, // age2: age2와 동일
};
 
console.log(person); // { name: 'Lee', age: 20 }
console.log(person2); // { name2: 'Kim', age2: 30 }

// 함수의 파라미터를 객체로 반환할 때 유용
function createUser(name, age, email) {
  return {
    name, // name: name
    age, // age: age
    email, // email: email
  };
}
 
const user = createUser('Alice', 25, 'alice@example.com');
console.log(user); // { name: 'Alice', age: 25, email: 'alice@example.com' }

// ES5: function 키워드 사용
var person = {
  name: 'Lee',
  sayHello: function () {
    console.log('Hello! ' + this.name);
  },
};
 
// ES6: 메서드 축약 표현
const person2 = {
  name: 'Kim',
  sayHello() {
    // function 키워드 생략
    console.log('Hello! ' + this.name);
  },
  sayGoodbye() {
    console.log('Goodbye! ' + this.name);
  },
};
 
person.sayHello(); // 'Hello! Lee'
person2.sayHello(); // 'Hello! Kim'
person2.sayGoodbye(); // 'Goodbye! Kim'

// ES5: 객체 생성 후 프로퍼티 추가
var prefix = 'prop';
var i = 1;
var obj = {};
 
obj[prefix + i] = i; // prop1: 1
obj[prefix + ++i] = i; // prop2: 2
obj[prefix + ++i] = i; // prop3: 3
 
console.log(obj); // { prop1: 1, prop2: 2, prop3: 3 }

// ES6: 객체 리터럴 내부에서 계산된 프로퍼티 이름 사용
const prefix = 'prop';
let i = 0;
const obj = {
  [`${prefix}${++i}`]: i, // prop1: 1
  [`${prefix}${++i}`]: i, // prop2: 2
  [`${prefix}-${++i}`]: i, // prop-3: 3
};
 
console.log(obj); // { prop1: 1, prop2: 2, 'prop-3': 3 }

// 동적으로 키를 생성하는 경우
const status = 'active';
const count = 5;
 
const stats = {
  [`${status}Count`]: count, // activeCount: 5
  [`${status}Percent`]: count * 100, // activePercent: 500
};
 
console.log(stats); // { activeCount: 5, activePercent: 500 }
 
// 배열을 순회하며 객체 생성
const keys = ['name', 'age', 'email'];
const values = ['Alice', 25, 'alice@example.com'];
 
const user = keys.reduce((obj, key, index) => {
  obj[key] = values[index];
  return obj;
}, {});
 
console.log(user); // { name: 'Alice', age: 25, email: 'alice@example.com' }