10장 객체 리터럴

10-1 객체란?

자바스크립트는 객체 기반의 프로그래밍 언어
자바스크립트를 구성하는 거의 "모든 것"이 객체

10-2 객체 리터럴에 의한 객체 생성

자바스크립트 객체 생성 방법 지원

• 객체 리터럴
• Object 생성자 함수
• 생성자 함수
• Object.create 메서드
• 클래스(ES6)

10-3 프로퍼티

객체는 프로퍼티의 집합이며, 프로퍼티는 키와 값으로 구성
식별자 네이밍 규칙을 따를 것

var person = {
	name: 'Lee', // 프로퍼티 키는 name, 프로퍼티 값은 'Lee'
    age: 20 // 프로퍼티 키는 age, 프로퍼티 값은 20
}

10-4 메서드

객체에 묶여있는 함수

const circle = {
  radius: 5,
  getDiameter: function() {
    return 2 * this.radius;
  }
};

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

10-5 프로퍼티 접근

프로퍼티 접근하는 방법

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

var person = {
  name: 'Lee'
}

console.log(person.name);
console.log(person['name']);

10-6 프로퍼티 갱신

var person = {
  name: 'Lee'
}

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

10-7 프로퍼티 동적 생성

존재하지 않는 프로퍼티에 값을 할당하먼 프로퍼티가 동적으로 생성되어 추가되고 프로퍼티 값이 할당

var person = {
  name: 'Lee'
}

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

10-8 프로퍼티 삭제

var person = {
  name: 'Lee'
}

person.age = 20;

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

10-9 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 = { x,y };

console.log(obj); // {x:1, y: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

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

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

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

- 메서드 축약 표현

ES5

var obj = {
  name: 'Lee',
  sayHi: function(){
  	console.log('Hi! ' + this.name);
  }
}

obj.sayHi(); // Hi! Lee

ES6

var obj = {
  name: 'Lee',
  sayHi() {
    console.log('Hi! ' + this.name);
  }
}

obj.sayHi(); // Hi! Lee

11장 원시 값과 객체의 비교

11-1 원시 값

- 변경 불가능한 값

한 번 생성된 원시 값은 읽기 전용 값으로서 변경 불가능
불변성을 갖는 원시 값을 할당한 변수는 재할당 이외에 변수 값을 변경할 수 있는 방법 없음

- 문자열과 불변성

새로운 문자열을 재할당하는 것은 가능
이미 생성된 문자열의 일부 문자는 읽기 전용 값으로서 변경할 수 없음

- 값에 의한 전달

var score = 80;
var copy = score;

console.log(score, copy); // 80, 80
console.log(scroe === copy); // true

score = 100;
console.log(score, copy) // 100 80
console.log(score === copy) // false

score변수와 copy 변수의 값 80은 다른 메모리 공간에 저장된 별개의 값

11-2 객체

변경 가능한 값
프로퍼티의 개수가 정해져 있지 않으며, 동적으로 추가되고 삭제 가능

- 변경 가능한 값

• 객체를 할당한 변수가 기억하는 메모리 주소를 통해 메모리 공간에 접근하면 참조 값에 접근

  참조 값
  생성된 객체가 저장된 메모리 공간의 주소

• 변수는 이 참조 값을 통해 객체에 접근

• 여러 개의 식별자가 하나의 객체 공유 가능

- 참조에 의한 전달

var person = {
  name: 'Lee'
}

var copy = person;

copy.name = 'Kim';
person.address = 'Seoul';

console.log(person); // {name: "Kim", address: "Seoul"}
console.log(copy); // {name: "Kim", address: "Seoul"}

12장 함수

12-1 함수란?

일련 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것

12-2 함수를 사용하는 이유

미리 정의된 함수를 재사용하는 것이 효율적
유지보수 편의성, 코드의 신뢰성 높힘

12-3 함수 리터럴

function 키워드, 함수 이름, 매개 변수 목록, 함수 몸체로 구성

// 변수에 함수 리터럴을 할당
var f = function add(x,y){
	return x + y;
}

12-4 함수 정의

함수를 호출하기 전에 인수를 전달 받을 매개변수와 실행할 문들 그리고 반환 값을 지정하는 것

- 함수 선언문

function add(x,y) {
	return x + y;
}

함수는 함수 이름으로 호출하는 것이 아니라 함수 객체를 가리키는 식별자로 호출
즉, 함수 선언문으로 생성한 함수를 호출하는 것은 함수 이름 add가 아니라 자바스크립트 엔진이 암묵적으로 생성한 식별자 add인 것

- 함수 표현식

var add = function (x,y) {
	return x + y;
}

함수 이름은 함수 몸체 내부에서만 유효한 식별자이므로 함수 이름으로 함수 호출 불가능

var add = function foo (x,y) {
	return x + y;
}

console.log(add(2,5)); // 7
console.log(foo(2,5)); // error

- 함수 생성 시점과 함수 호이스팅

함수 선언문으로 정의한 함수는 함수 선언문 이전에 호출 가능
함수 표현식으로 정의한 함수는 함수 표현식 이전에 호출 불가능
둘의 생성 시점이 다르기 때문

함수 선언문은 런타임 이전에 자바스크립트 엔진에 의해 먼저 실행됨

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

JSON 창안한 더글라스 크락포드는 함수 선언문 대신 함수 표현식 사용할 것을 권장함

- function 생성자 함수

var add = new Function('x','y','return x+y');

function 생성자 함수로 함수를 생성하는 방식은 일반적이지 않고 바람직하지 않음

- 화살표 함수

var add = (x+y) => x + y;

es6 도입, 내부 동작 또한 간략화

12-5 함수 호출

- 매개변수와 인수

매개변수
함수 정의할 때 선언, 함수 몸체 내부에서 변수와 동일하게 취급
함수 몸체 외부에서 참조 불가능

function add(x,y){
	return x + y;
}

console.log(add(2,5,10));
// 초과된 인수는 암묵적으로 arguments 객체의 프로퍼티로 보관 

- 매개변수의 최대 개수

이상적인 매개변수 개수는 0개
적을수록 좋음

- 반환문

return으로 함수 외부로 반환

function multiply (x,y){
	return x * y;
    // 반환문 이후 다른 문이 존재하면 실행되지 않고 무시됨 
    console.log('실행되지 않는다.');
}

var result = multiply(3,5);
console.log(result); // 15

12-6 참조에 의한 전달과 외부 상태의 변경

function changeValue (primitive, obj){
    primitive += 100;
    obj.name = "Kim";
}

var num = 100;
var person = {name : "Lee"};

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

changeValue(num,person);

console.log(num); // 100 원시 값은 원본이 훼손 되지 않음
console.log(person); // {name : "Kim"} 객체는 원본이 훼손 됨 

12-7 다양한 함수의 형태

- 즉시 실행 함수

// 익명 즉시 실행 함수
(function () {
  var a = 3;
  var b = 5;
  return a * b;
}());

단 한 번만 호출되며 다시 호출 할 수 없음
반드시 그룹 연산자 (...)로 감싸야 함

var res = (function () {
  var a = 3;
  var b = 5;
  return a * b;
}());

console.log(res); // 15

즉시 실행 함수도 일반 함수처럼 값을 반환할 수 있음

- 재귀 함수

함수가 자기 자신을 호출하는 것

function countdown(n){
	if(n < 0) return;
    console.log(n);
    countdown(n - 1); //재귀 호출
}

countdown(10);

- 중첩 함수

함수 내부에 정의된 함수

function outer(){
  var x = 1;
  
  function inner(){
    var y = 2;
    console.log(x + y);	// 3
  }
  
  inner();
}

outer();

- 콜백 함수

매개변수를 통해 전달받은 숫자만큼 반복하며 i 호출

function repeat(n){
	for(var i=0; i < n; i++) console.log(i);
}

repeat(5); // 0 1 2 3 4

- 순수 함수와 비순수 함수

순수 함수 / 부수 효과가 없는 함수

var count = 0;

// 순수함수 increase는 동일한 인수가 전달되면 언제나 동일한 값 반환
function increase(n){
	return ++n;
}

count = increase(count);
console.log(count) // 1;

count = increase(count);
console.log(count) // 2;

비순수 함수 / 부수 효과가 있는 함수

var count = 0;

//비순수 함수
function increase(){
	return ++count;
}

increase();
console.log(count); // 1
increase();
console.log(count); // 2

순수 함수 사용하는 것이 좋음