[모던 자바스크립트 Deep Dive] 10 - 12 장

10. 객체 리터럴

객체

• 원시 값을 제외한 모든 값
• 0개 이상의 프로퍼티로 이루어짐
• 프로퍼티와 메서드로 구성됨
  • 프로퍼티 : 객체의 상태를 나타내는 값 (key : value)
    • 키 - 모든 문자열 or 심벌 값 (식별자 네이밍 규칙 준수하지 않을 경우 따옴표로 묶는다)
    • value - 모든 값
    • 키를 중복 선언하면 나중에 선언한게 덮어씀
    • 접근 : 마침표person.name or 대괄호person[ ’name’ ]
    • ES6 부터는 변수 사용할 경우 키 생략 가능
  • 메서드 : value자리에 들어가는 함수
    • 객체에 묶여있는 함수

객체 생성 방법

• 객체 리터럴
  • 중괄호 내에 0개 이상의 프로퍼티 정의
• object 생성자 함수
• 생성자 함수
• Object.create 메서드
• 클래스(ES6)

11. 원시 값과 객체의 비교

원시 값

• 변경 불가능한 값
• 원시 값을 변수에 할당하면 실제 값 저장
• 원시 값 변수를 다른 변수에 할당하면 원본 원시 값이 복사되어 전달
• 새로운 원시 값을 재할당하면 새로운 메모리 공간 확보 → 거기에 원시 값 저장 → 주소 이동
• 문자열이 변경 불가능한 이유 - 문자열은 길이에 따라 메모리 공간의 크기가 결정됨 (특정 인덱스도 변경 불가능)
• 값에 의한 전달 → 다른 주소 가짐 (깊은 복사 같은 느낌)

객체

• 프로퍼티 개수도 모르고 value 제약도 없음 —> 원시 값처럼 미리 메모리 공간을 정해 둘 수 없음
• 관리 방식 → 해시테이블과 유사
• 변수의 주소로 메모리 공간에 접근하면 참조 값(객체가 있는 주소 값)을 얻을 수 있음
• 크기도 몰라, 복사 생성 비용도 많이 들어 ,,, 즉, 메모리를 효율적으로 사용하기 힘들고 성능이 나빠져서 객체는 변경 가능한 값으로 설계된 것
• 단점 —> 여러 개의 식별자가 하나의 객체를 공유할 수 있음(얕은 복사 & 깊은 복사)
• 얕은 복사 : { … }
• 깊은 복사 : lodash의 cloneDeep 활용
• 참조에 의한 전달 → 객체가 있는 주소 값이 복사되어 전달 (얕은 복사 느낌)

12. 함수

함수

• 매개변수, 인수, 반환값
• 함수 호출 : 코드 블록에 담긴 문 일괄 실행, 반환값 반환
• 장점 : 코드의 재사용 —> 유지보수 편의성, 신뢰성

함수 리터럴

• 함수 이름 : 네이밍 규칙 준수
  • 익명 함수
  • 기명 함수
• 매개변수 등록 : 네이밍 규칙 준수
  • 순서 중요
• 함수 몸체
  • 코드 블록
  • 함수 호출에 의해 실행

함수 정의 방식

• 함수 선언문
  • 함수 이름 생략 불가능
  • 표현식이 아닌 문 —→ undefined 출력

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

// 함수 이름과 동일한 식별자를 암묵적으로 생성해 할당 ----> 함수 이름으로 호출하는 것이 아니라 식별자로 호출
add = function add(x, y) {
  return x + y;
};

• 함수 표현식
  • 함수 이름 생략 가능 (익명 함수)
  • 함수 이름은 함수 내부에서만 유효한 식별자 —→ 밖에서 함수 이름으로 호출할 경우 ReferenceError 발생

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

함수 선언문과 함수 표현식의 함수 생성 시점

console.dir(add); // f add(x, y)
console.dir(sub); // undefined

console.log(add(2, 5)); // 7
console.log(sub(2, 5)); // TypeError

function add(x, y) {
  // 함수 호이스팅에 의해 선언문 이전에 호출 됨
  return x + y;
}

var sub = function (x, y) {
  // 변수 호이스팅에 의해 undefined로 초기화 됨
  return x - y;
};

• Function 생성자 함수
  • 바람직하지 않음

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

• 화살표 함수
  • 생성자 함수로 사용 불가능
  • this 다름
  • prototype 프로퍼티 없음
  • arguments 객체 생성하지 않음

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

함수 호출

• 매개변수와 인수
  • 인수 → 매개변수로 받아서 함수 내부에서 사용
  • 매개변수는 함수가 호출될 때 생성된다.
  • 매개변수의 스코프는 함수 내부이다.
  • 초과된 인수는 arguments 객체 프로퍼티로 보관된다.
  • 매개변수는 적을수록 좋다.
• 반환문
  • return 키워드를 통해 함수 외부로 반환한다.
  • 반환문 이후 문은 무시된다.
  • 반환문 생략 시 undefined 반환
• 매개변수를 통해 전달받은 객체 타입 인수를 함수 내부에서 변경할 경우 외부에서도 변경됨
  • 객체는 변경 가능한 값으로 재할당없이 직접 할당된 객체를 변경했기 때문
  • 깊은 복사를 통해 객체를 재할당 하여 사용하면 이러한 문제 해결 가능

함수 형태

• 즉시 실행 함수
  • 한 번만 호출 가능
  • 익명 함수 사용 (기명 함수를 사용하더라도 다시 호출할 수 없음)
  • 반드시 ( ) 로 묶어야 함 —→ SyntaxError

const a = 7;

(function () {
  console.log(a * 2);
})();

• 재귀 함수
  • 자신을 호출
  • 반복문 없이 반복처리 구현
  • 기저조건 필히 구현
  • 한정적으로 필요할 때만 사용

function countdown(n) {
  // 반복문
  for (var i = n; i >= 0; i--) console.log(i);
}

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);
  }
  inner();
}

outer();

• 콜백 함수
  • 실행위치 보장
  • 함수의 인수로 사용되는 함수

document.getElementById("myButton").addEventListener("click", function () {
  consloe.log("button clicked!");
});

setTimeout(function () {
  consloe.log("1초 경과");
}, 1000);