[JavaScript] 모던 자바스크립트 입문 - 4장 객체와 배열, 함수의 기초

4. 객체와 배열, 함수의 기초

4.1 객체의 기초 ① 객체 리터럴

4.1.1 객체

• 이름과 값을 한 쌍으로 묶은 데이터를 여러 개 모은 것
• 이때 데이터 하나(이름과 값의 쌍)를 객체의 프로퍼티라고 함
• 데이터 여러 개를 하나로 모은 복합 데이터
• 연관 배열 또는 사전이라고 함

4.1.2 객체 리터럴로 객체 생성하기

• var card = { suit: "하트", rank: "A" };
• {...} 부분이 객체 리터럴
• 객체 리터럴을 변수 card 에 대입
• card.color    // undefined
• 객체에 없는 프로퍼티를 읽으려고 시도하면 undefined 반환
•  var obj = {}
• 객체 리터럴 안에 어떠한 프로퍼티도 작성하지 않으면 빈 객체가 생성됨

4.1.3 프로퍼티 추가와 삭제

• card.value = 14;
• 없는 프로퍼티 이름에 값을 대입하면 새로운 프로퍼티가 추가됨
• delete card.rank;
  
• delete 연산자로 프로퍼티 삭제 가능

4.1.4 in 연산자로 프로퍼티가 있는지 확인하기

• var card = { suit: "하트", rank: "A" };
  console.log("suit" in card);    // true
  console.log("color" in card);    // false
• 객체에 특정 프로퍼티가 있는지 확인
• 프로퍼티가 객체에 포함되어 있으면 true, 포함되지 않으면 false
• console.log("toString" in card);    // true
• 원래 toString 프로퍼티는 card 객체에 선언되지 않았지만 Object 객체를 상속받았기 때문에 true
• 따라서, in 연산자가 조사하는 대상이 그 객체가 가진 프로퍼티와 그 객체가 상속받은 모든 프로퍼티임을 알 수 있다

4.1.7 객체는 참조 타입

• 객체 타입의 값을 변수에 대입하면 그 변수에는 객체의 참조(메모리에서의 위치 정보)가 저장됨
• var a = card;
  console.log(a.suit);            // 하트
  a.suit = "스페이드";
  console.log(a.suit);        // 스페이드
  console.log(card.suit);    // 스페이드
• 변수 a가 card 객체를  참조하게 되므로 a 로 card 객체를 읽거나 수정 가능

4.2 함수의 기초

4.2.1 함수

• 입력을 받아 함수 안의 프로그램에서 특정 작업 수행 후, 함수 값을 반환
• 인수: 함수의 입력 값
• 반환값: 함수의 출력 값

4.2.2 함수 선언문으로 함수 정의하기

• function square(x) { return x * x; }
• function 키워드 사용해서 함수 정의

4.2.4 함수 호출

• square(3);
• 인수로 넘긴 값인 3이 함수 정의문의 인수 x로 전달되어 실행됨
• 함수 호출할 때 전달하는 값을 인수(argument)
• 함수 정의문의 인수를 인자(parameter)

4.2.5 인수

• 함수는 인수를 여러 개 받을 수 있음
• function dist(p, q) {
          var dx = q.x - p.x;
          var dy = q.y - p.y;
          return Math.sqrt(dx*dx+dy*dy);
  }
• 두 점 사이의 거리를 구하는 함수
  
• Math.sqrt는 제곱근 구하는 함수
• var p1 = {x:1, y:1}
  var p2 = {x:4, y:5}
  var d = dist(p1, p2);    // 5
• 함수 dist를 사용하여 두 점 사이의 거리를 구한다
• var bark = function() { console.log("Bow-wow"); };
  bark();    // Bow-wow
• 인수를 받지 않는 함수도 정의할 수 있음
• 위 bark() 함수처럼 return 문이 없는 함수는 반환값이 undefined 가 된다

4.2.7 함수 선언문의 끌어올림

• console.log(square(5));    // 25
  function square(x) { return x * x }
• 자바스크립트 엔진은 함수 선언문을 프로그램의 첫머리로 끌어올림

4.2.8 값으로서의 함수

• 자바스크립트에서는 함수가 객체
• function square(x) { return x * x }
• 'square' 라는 이름의 변수와 함수 객체가 생성됨
• 그 변수에 함수 객체의 참조가 저장됨
• var sq = square;
  console.log(sq(5));    // 25
•  이 변수 값을 다른 변수에 할당하면 그 변수 이름으로 함수 실행 가능

4.2.9 참조에 의한 호출과 값에 의한 호출

• function add1(x) { return x = x + 1; }
  var a = 3;
  var b = add1(a);
  console.log("a = " + a + "b = " + b);    // a = 3, b = 4
• 값의 전달
• add1 함수가 호출될 때 변수 a의 복사본이 인자 x에 할당됨
• 이때 변수 a와 변수 x는 다른 영역의 메모리에 위치한 별개의 변수
• function add1(p) { p.x = p.x + 1; p.y = p.y + 1; return p; }
  var a = { x: 3, y: 4 }
  var b = add1(a);
  console.log(a, b);    // Object {x=4, y=5}, Object {x=4, x=5}
• 참조 전달
• 변수 a에 객체 {x:3, y:4} 의 참조가 저장되어 있으며, 이 참조 값을 인자 p에 전달
• 이때 인자 p와 변수 a는 똑같은 객체를 참조하고 있어 함수의 인수로 객체를 넘기면 원래의 객체 값을 변경할 수 있음

4.2.10 변수의 유효 범위

• 유효 범위: 변수에 접근할 수 있는 범위
• 자바스크립트 변수는 변수의 유효 범위에 따라 두 가지로 구분
• 전역 변수: 함수 바깥에서 선언된 변수. 유효 범위가 전체 프로그램
• 지역 변수: 함수 안에서 선언된 변수와 함수 인자. 유효 범위는 변수가 선언된 함수 내부
• 변수에 유효 범위가 있는 이유는 프로그램의 다른 부분에서 선언된 이름이 같은 변수와 충돌하지 않도록 하기 위함
• function f() {
          a = "local";
          console.log(a);
          return a;
  }
  f();
  console.log(a);
• 변수 a는 선언 없이 값만 대입하고 있으므로 전역 변수
  

4.2.11 블록 유효 범위: let과 const

• let과 const는 '블록 유효 범위'를 갖는 변수. 즉, {} 안에서만 유효
• let은 변수 선언, const는 한 번만 할당할 수 있는 상수 선언
• 자바스크립트 엔진은 let 문으로 선언한 변수를 끌어올리지 않음
• const 문으로 선언한 상수 값은 수정할 수 없지만,
  상수 값이 객체이거나 배열일 경우에는 프로퍼티 또는 프로퍼티 값을 수정할 수 있음

4.2.12 함수 리터럴로 함수 정의하기

• var square = function(x) { return x * x; };
• function(x) {...} 부분이 함수 리터럴
• 함수 리터럴은 이름이 없는 함수이므로 익명 함수 또는 무명 함수라 불림
• var square = function sq(x) { return x * x };
• 익명 함수에도 이름 붙일 수 있음
• 그러나, sq라는 이름은 함수 안에서만 유효

4.2.13 객체의 메서드

• 메서드: 객체의 프로퍼티 중에서 함수 객체의 참조를 값으로 담고 있는 프로퍼티
• var circle = {
          center: { x:1.0, y:2.0 },
          radius: 2.5,
          area: function () {
              return Math.PI * this.radius * this.radius;
          }
  };
• 함수 객체 안의 this는 그 함수를 메서드로 가지고 있는 객체를 가리킴
• 메서드는 일반적으로 메서드가 속한 객체의 내부 데이터(프로퍼티 값) 상태를 바꾸는 용도로 사용