[DeepDive]10~12장 객체 리터럴/원시 값과 객체의 비교/함수

✅10장 객체 리터럴

자바스크립트는 객체 기반의 언어이며, 자바스크립트를 이루고 있는 거의 모든것이 객체!

객체란🤔

키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합

모던딥다이브 자바스크립트

*메서드 : 프로퍼티를 참조하고 조작 할 수 있는 동작

객체생성➕

• 객체 리터럴
  중괄호를 사용하여 객체를 생성

let person = {
  name: 'Lee',
  gender: 'male',
  sayHello: function () {
    console.log('Hi! My name is ' + this.name);
  }
};

• Object 생성자 함수
  object 생성자를 사용하여 객체를 생성

// 빈 객체의 생성
let person = new Object();

// 프로퍼티 추가
person.name = 'Lee';
person.gender = 'male';
person.sayHello = function () {
  console.log('Hi! My name is ' + this.name);
};

• 생성자 함수
  사용자 정의 생성자 함수를 만들어 객체를 생성

// 생성자 함수
function Person(name, gender) {
  this.name = name;
  this.gender = gender;
  this.sayHello = function(){
    console.log('Hi! My name is ' + this.name);
  };
}

• 클래스
  es6부터 도입된 클래스 문법을 사용하여 객체를 생성

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    greet() {
        console.log('안녕하세요, ' + this.name + '입니다.');
    }
}

const person2 = new Person('홍길동', 30);

• Object.create()
  기존 객체를 기반으로 새로운 객체를 생성

const personPrototype = {
    greet: function() {
        console.log('안녕하세요, ' + this.name + '입니다.');
    }
};

const person3 = Object.create(personPrototype);
person3.name = '홍길동';
person3.age = 30;

객체 접근📌

• 마침표. 표기법

• 대괄호[] 표기법

let person = {
  'first-name': 'Ung-mo',
  'last-name': 'Lee',
  gender: 'male',
  1: 10
};

console.log(person.first-name);    // NaN: undefined-undefined
console.log(person[first-name]);   // ReferenceError: first is not defined
console.log(person['first-name']); // 'Ung-mo'

* 객체에 존재하지 않는 프로퍼티를 참조하면 undefined를 반환

객체 삭제✂️

delete 연산자 사용

let person = {
  'first-name': 'Ung-mo',
  'last-name': 'Lee',
  gender: 'male',
};

delete person.gender;
console.log(person.gender); // undefined

delete person;
console.log(person); // Object {first-name: 'Ung-mo', last-name: 'Lee'}

객체 리터럴 확장 기능(ES6+)💫

• 프로퍼티 축약

// 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 }

• 메서드 축약

// ES5
var 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

---

✅11장 원시 값과 객체의 비교

• 객체(mutable value) vs 원시 값(immutable value) 
• 원시타입은 Stack, 객체는 Heap에 저장됨!
• 원시 타입 값은 고정된 크기를 가지며, 크기가 작아 스택 메모리에서 빠르게 접근할 수 있음
• 힙은 크기가 가변적인 데이터를 저장하는데 적합하며, 객체는 크기가 가변적이기 때문에 힙 메모리에 저장
• 다만, 객체에 대한 "참조"는 스택에 저장됨
  =>즉, 스택에는 힙에 있는 객체의 주소를 가리키는 참조 값이 저장 

let num = 10;         
let obj = { name: "John" }; 
let obj2 = obj;

똥손,,,

---

✅12장 함수

함수란🤔

특정한 일을 수행하는 코드의 집합!(코드의 재사용성을 위해)

 

• 함수 내부로 입력을 전달받는 변수를 매개변수, 입력을 인수, 출력을 반환값이라 함
• 함수는 객체임!
  *일반 객체는 호출할 수 없지만, 함수는 호출할 수 있다는 점에서 일반 객체와 다름
  *다른 프로그래밍 언어와 구별되는 자바스크립트의 중요한 특징

모던딥다이브 자바스크립트

함수의 장점🌟

• 유지보수의 편의성
• 재사용 가능
• 높은 가독성

함수 정의🌟

• 함수를 호출하기 이전에 인수를 전달받을 매개변수와 실행할 문들, 그리고 반환할 값을 지정하는 것을 말함.
• 정의된 함수는 자바스크립트 엔진에 의해 평가되어 함수 객체가 됨
• 함수를 정의하는 방법은 함수 선언문, 함수 표현식, 생성자 함수, 화살표 함수 4가지가 있음

🔸함수 선언문

• 함수 선언문은 표현식이 아닌 문이다.
• 함수 이름 생략 불가

function square(number) { //함수명, 생략불가
  return number * number; // 반환값
}

🔸함수 표현식

• 함수 표현식은 표현식인 문이다.
• 함수는 일급객체이기 때문에 변수에 할당할 수 있는데 이 변수는 함수명이 아니라 할당된 함수를 가리키는 참조값을 저장
• 함수 호출시 함수명이 아니라 함수를 가리키는 변수명을 사용해야 함

// 기명 함수 표현식(named function expression)
const foo = function multiply(a, b) {
  return a * b;
};

// 익명 함수 표현식(anonymous function expression)
const bar = function(a, b) {
  return a * b;
};

console.log(foo(10, 5)); // 50
console.log(multiply(10, 5)); // Uncaught ReferenceError: multiply is not defined

 

---

함수 선언문으로 정의한 함수는 함수 선언문 이전에 호출⭕ (런타임 이전에 함수 객체가 먼저 생성)

함수 표현식으로 정의한 함수는 함수 표현식 이전에 호출❌

👉함수 선언문으로 정의한 함수와 함수 표현식으로 정의한 함수의 생성 시점이 다르기 때문

 

*함수 호이스팅

함수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 함수 호이스팅이라 한다

*함수 선언문 : 함수 호이스팅(객체 먼저 생성)

 함수 표현식 : 변수 호이스팅(undefined로 초기화)

모던딥다이브 자바스크립트

🔸생성자 함수

• Function 생성자 함수로 함수를 생성하는 방식은 일반적이지 않으며 바람직하지 않음
  👉클로저를 생성하지 않는등 함수 선언문이나 함수 표현식으로 생성한 함수와 다르게 동작

const square = new Function('number', 'return number * number');
console.log(square(10)); // 100

🔸화살표 함수 (ES6)

• function 키워드 대신 화살표를 사용해 좀 더 간략하게 함수 선언 가능
• 항상 익명 함수로 정의
• 생성자 함수로 사용불가
• ⭐기존 함수와 this 바인딩 방식이 다름
• prototype 프로퍼티가 없음
• arguments 객체를 생성하지 않음

// ES5
var pow = function (x) { return x * x; };
console.log(pow(10)); // 100

// ES6
const pow = x => x * x;
console.log(pow(10)); // 100