제니의 프로덕트 블로그

리터럴 이란 무엇일까요?  MDN 공식홈페이지를 살펴보면,

Literals represent values in JavaScript. These are fixed values—not variables—that you literally provide in your script.

리터럴이란 개발자가 스크립트에 입력한 value를 보이는 그대로 나타내 주는 표현방식이라 말하고 있습니다.

아래와 같은 data type들은 모두 자신만의 리터럴을 가지고 있습니다.

• Array literals
• Boolean literals
• Floating-point literals
• Numeric Literals
• Object literals 🌸
• RegExp literals
• String literals

그 중 객체 리터럴이란,

An object literal is a list of zero or more pairs of property names and associated values of an object, enclosed in curly braces- { }.

'property - value' 짝을 중괄호( { } )로 묶어 표현하는 리터럴을 가진다고 하네요.

객체 리터럴을 실제 코드에서 어떻게 활용할 수 있을 지 알아보겠습니다!

✨ 객체 리터럴로 이렇게 객체를 만듭니다.

  const objectName = {
    key : value, 
    camelCase : value,
    'kebab-case' : value,
    ['kebab-case-with-brackets'] : value
  };

1. 객체는 다른 data와 같이 변수로 할당될 수 있습니다. 할당 되는 변수명이자 객체명을 정해줍니다.
2. key - value pair은 중괄호 { } 로 감싸지며, 각 pair은 쉼표  ,  로 구분합니다.  
3. key naming은 다양한 형태로 할 수 있지만 camel case🐫로 쓰는게 가장 깔끔해보입니다!

✨ 객체외부에서 key-value 값에 접근하기 위해선 아래 두 가지 방법을 상황에 따라 선택하여 사용할 수 있습니다.

• dot notation(마침표 표기법)
• bracket notation(대괄호 표기법)

✨ 객체를 다뤄보겠습니다.

1️⃣ {key : value} 만들기

• objectName.key = 'value';
  ➡️ 객체의 특정 key에 value를 할당해요.

2️⃣ {key : value} 지우기

• delete objectName.key;
  ➡️ delete keyword를 사용해서 객체의 특정 key-value pair를 삭제할 수 있어요.

3️⃣ 객체들의 value 값 만 모두 뽑아내기

• Object.values() 
  ➡️ Object.values() method를 사용해서 객체의 value만 array로 추출할 수 있어요.

4️⃣ key-value pair를 모두 뽑아내기

• Object.entries()
  ➡️ Object.entries() method를 사용해서 객체의 key-value pair 묶음을 배열로 받을 수 있어요.

🎁 객체 리터럴을 이용해 크리스마스 선물 리스트를 뽑아보았습니다. 

// My Christmas Gift List for My Friends
let christmasGiftList = { 
	Harry : 'Umbridge Tea Pot Set',
	Ron : 'Bottled Butterbeer',
	Hermione : 'Crookshanks Soft Toys',
	Dobby : 'A pair of socks',
	'Draco-Voldmort' : "Bertie Bott's Every Flavour Beans"
};

console.log(`We need '${christmasGiftList.Harry}' for Harry, '${christmasGiftList.Ron}' for Ron, '${christmasGiftList.Hermione}' for Hermione, and '${christmasGiftList.Dobby}' for Dobby! 🎁 \nAnd for Draco and Voldmort... '${christmasGiftList['Draco-Voldmort']}' will be fair enough!`);


// Oh I forgot Neville!
christmasGiftList.Neville = 'Chocolate Frog';

console.log(`And for Neville, '${christmasGiftList.Neville}' would be fine...?`);


// Definitely, I don't wanna buy gifts for Draco and Voldmort
delete christmasGiftList['Draco-Voldmort'];

// Finally...!
console.log(`Finally, I need to buy ${Object.values(christmasGiftList)}!`);

// I need correct list.
console.log(`My Christmas Gift List: ${Object.entries(christmasGiftList)}`)

✨ 객체 외부에서 {key : value} 에 접근하기 위해선 dot notation 과 bracket notation을 사용할 수 있었는데요.

특히나 bracket notation을 사용해야만 하는 때가 있습니다.

1. 동적으로 값을 전달 받아 리턴할 때
2. 동적으로 값을 삭제할 때
3. 동적으로 값을 추가할 때

🍷 저녁식사를 정하며 bracket notation을 이용해 동적으로 값을 리턴 · 삭제 · 추가 해봅시다.

const dinner = {
	appetizer : 'dark chocolate',
	mainDish : 'chocolate fudge',
	dessert : 'chocolate pudding'
};

// bracket notation을 사용해 값을 리턴
function whatDoYouWantForMainDish(obj, key) {
	return obj[key];
};
console.log(`I wanna eat ${whatDoYouWantForMainDish(dinner, 'mainDish')} for main dish today :)`);

// bracket notation을 사용해 값을 추가
function iWantMoreDessert(obj, key, value) {
	obj[key] = value;
};
iWantMoreDessert(dinner, 'dessert2', 'Fondant au chocolat');
console.log(dinner);

// bracket notation을 사용해 값을 삭제
function noMoreDessert(obj, key, value) {
	delete obj[key];
};
noMoreDessert(dinner, 'dessert2', 'Fondant au chocolat')
console.log(dinner);

✨ 위에서 Object.values(), Object.entries() 두 가지 method를 알아 보았는데요.

이 ❓method❓ 라는 개념이 좀 헷갈리더라구요. 한 번 짚고 넘어 갈게요.

Method란, MDN 공식홈페이지에선, 아래와 같이 정의하고 있습니다.

A method is a function which is a property of an object. There are two kinds of methods: instance methods which are built-in tasks performed by an object instance, or static methods which are tasks that are called directly on an object constructor.

객체 안의 함수를 method라 하며, 객체의 동작을 정의하고 객체와 관련된 작업을 수행하는 역할을 하는 함수라 볼 수 있겠습니다.

1️⃣ instance method

• 개발자가 객체 안에서 정의한 함수를 instance method라 합니다.

class Car {
  start() {
    console.log("The car is started.");
  }
}

const myCar = new Car();
myCar.start(); // "The car is started."

✅ car 라는 객체로 하여금, console에 "The car is started." 라는 문구를 출력 하게끔 하는 start() 함수를 개발자가 정의했죠! 이 start() 함수를 Instance method 라 하는 것입니다.

위 코드는 Class 문법으로 객체를 만든 경우입니다. Class 문법으로 만든 객체는 object라고도 하지만, 특별히 instance라고 부릅니다. 

2️⃣ static method

• ECMAScript에서 정한 JS 내장객체 안의 함수를 static method라 합니다.

let randomNumber = Math.random(); 
// Math 클래스의 static 메서드 random을 호출합니다.

✅ 코드 내에서 Math라는 객체를 정의하지 않았음에도, random한 숫자가 randomNumber 변수에 할당되는데요. 사실 JS 내 Math 라는 객체가 이미 존재하기 때문에, 따로 정의할 필요없이 바로 사용할 수 있는 거랍니다. 편리하죠?

✅ 이런 내장객체를 빌트인 객체라고도 부르는데요. 이에 대해서도 곧 포스팅 할 예정이랍니다.

 ECMAScript란, JavaScript의 표준화를 담당하는 기구인데요.
JavaScript 코드가 여러 플랫폼에서 동일하게 작동하도록 보장하고, 개발자들이 효율적이고 표준화된 방식으로 작업할 수 있도록 도와주기 위해 여러 표준 코드를 정합니다. 이로써 호환성과 코드 품질을 향상시킬 수 있다네요.

객체 정도 만들어보니 이제 슬슬 프로그래밍 하는 느낌이 듭니다.

다음 편엔 생성자 함수로 객체를 만들어 보겠습니다 *^^*🖐️

JS는 객체지향 프로그래밍 언어입니다. MDN 공식홈페이지의 JS 참고서를 살펴보면:

In JavaScript, most things are objects, from core JavaScript features like arrays to the browser APIs built on top of JavaScript.

JS에서 아주 중요한 개념인 '배열'부터 '브라우저 API'까지 대부분의 것들이 '객체'라고 하니, 짚고 넘어가지 않을 수 없겠네요.

객체 문법을 본격적으로 공부하기 전, JS에서는 왜 모든 걸 객체로 만드는 건지, 왜 이 객체 문법을 공부해야 하는 건지 궁금해졌습니다!

✨ 객체지향 프로그래밍이란 무엇일까요?

객체지향 프로그래밍은, 자동차를 만드는 공장과 같습니다.

자동차 공장에서는 자동차 도면(class)을 만들어 둘 수 있는데요. 그 도면에 따라 자동차(object)를 여러 대 만들 수 있습니다.

이 자동차들은 같은 도면으로 만들었기에 도면에서 정의한 '자동차라면 갖춰야 할 필수 속성(property)과 기능(method)'을 모두 동일하게 가지고 있을 거예요.

✨ 그럼 왜 '객체'라는 개념으로 데이터를 묶어서 프로그래밍 하는 걸까요?

코드의 재사용성을 높이기 위해서요.

같은 코드를 여기저기 반복해서 작성하면 코드가 엄청 지저분해지고 길어지겠죠!

자주 쓰이는 코드를 미리 모듈화 해 두고 필요할 때 간단히 호출할 수 있도록 하면, 전체적으로 코드가 깔끔해 지고 결국 유지보수 하기 좋아집니다.

✨ 절차지향 프로그래밍과 객체지향 프로그래밍은 어떻게 다를까요?

절차지향 프로그래밍에서는 단계적인 명령문 실행을 중점으로 코드가 구성 됩니다.

// 파스타 레시피 
function makePasta() {
  console.log('물 끓이기');
  console.log('파스타 삶기');
  console.log('재료 섞기');
  console.log('접시에 담기');
}

// 샐러드 레시피 
function makeSalad() {
  console.log('야채 썰기');
  console.log('재료 섞기');
  console.log('접시에 담기');
}

// 파스타랑 샐러드 만들기
makePasta();
makeSalad();

❓ 만약, makeCreamPasta() 라는 함수를 만들고 싶다면, 다시 물끓이기 부터 새로 함수를 정의해야 할까요? 기존에 있었던 makePasta() 라는 함수와 레시피가 모두 겹치는데요?

객체지향 프로그래밍에서는 먼저 객체를 만들고 이 객체들이 서로 상호작용하며 문제를 해결 할 수 있도록 코드가 구성 됩니다.

// 파스타 레시피
class makePasta {
  boilWater() {
    console.log('물 끓이기');
  }

  boilPasta() {
    console.log('파스타 삶기');
  }
  
  mixIngredients() {
    console.log('재료 섞기');
  }
  
  serve() {
    console.log('접시에 담기');
  }
}

// 크림파스타 레시피
class makeCreamPasta extends makePasta {
  addCreamSauce() {
    console.log('크림소스 추가하기');
  }
}

const pasta = new makePasta();
const creamPasta = new makeCreamPasta();

// 기존에 있었던 파스타 레시피를 이용해 크림파스타 만들기
creamPasta.boilWater(); // 물 끓이기
creamPasta.boilPasta(); // 파스타 삶기
creamPasta.mixIngredients(); // 재료 섞기
creamPasta.addCreamSauce(); // 크림소스 추가하기
creamPasta.serve(); // 접시에 담기

✅ 기존에 있었던 makePasta()의 레시피를 모두 받아와 makeCreamPasta()를 간단하게 정의했고, 이제 다른 파스타 레시피도 makePasta()를 활용해서 쉽게 추가할 수 있을 거예요.

✨ 이제 객체를 만들어 봅시다. 4가지 방법이 있습니다.

1. 객체 리터럴(Object Literal)
   : 중괄호 {}를 사용하여 객체를 직접 만드는 방법입니다. 이 방법은 간단하고 빠르게 객체를 생성할 수 있어요.
2. 생성자 함수(Constructor Function)
   : new 키워드와 함께 함수를 사용하여 객체를 만드는 방법입니다. 함수 내부에서 this를 사용하여 속성을 정의하고 객체를 생성합니다.
3. Class
   : ES6부터 도입된 클래스 문법을 사용하여 객체를 만드는 방법입니다. 클래스는 생성자와 메서드를 포함하는 객체를 쉽게 만들 수 있도록 도와줘요.
4. Object.create() 메서드
   : 기존 객체를 프로토타입으로 활용하여 새로운 객체를 만드는 방법입니다.

다양한 상황과 개발자의 선호도에 따라 방법은 다를 수 있습니다. 하지만, 요즘엔 ES6(ECMAScript 2015)부터 도입된 class 문법을 가장 많이 사용합니다.

class 기반의 객체 생성 방법은 객체지향 프로그래밍 개념을 더 명확하게 표현하고, 코드를 구성하는 데 도움을 주기 때문에 많은 개발자들이 선호한다고 하지만,,

전 아직 이해 못했기 때문에 🤷🏼‍♀️ 앞으로 공부를 해 나가며 답을 알아 가보도록 하겠습니다,,^^;

답을 알게 되면 이 포스트에 추가 해 둘게요!