객체의 기초 - 객체 리터럴
자바스크립트에서는 원시 타입을 제외한 모든 값이 객체이다. 객체는 객체 리터럴과 생성자로 생성가능하다.
객체 리터럴로 생성
var card = { suit: "하트", rank: "A" };
var card = { "suit": "하트", "rank": "A" }; // 둘 다 가능하다.
card.suit // -> 하트
card["rank"] // -> A프로퍼티 추가와 삭제
객체에 포함된 데이터 하나(이름과 값의 쌍)를 가리켜 객체의 프로퍼티라고 부른다.
없는 프로퍼티 이름에 값을 대입하면 새로운 프로퍼티가 추가된다.
card.value = 14;
console.log(card); // -> Object {suit: "하트", rank: "A", value: 14}delete 연산자를 사용하면 프로퍼티를 삭제할 수 있다.
delete card.rank;
console.log(card); // -> Object {suit: "하트", value: 14}in 연산자
in 연산자를 사용하여 객체에 특정 프로퍼티가 존재하는지 확인할 수 있다. 조사 대상은 해당 객체 뿐만이 아니라 상속받은 모든 프로퍼티이다.
var card = { suit: "하트", rank: "A" };
console.log("suit" in card); // -> true
console.log("color" in card); // -> false
console.log("toString" in card); // -> true메서드
프로퍼티에 저장된 값의 타입이 함수면 그 프로퍼티를 메서드라고 부른다.
함수의 기초
함수
자바스크립트에서는 함수의 입력 값을 인수, 함수의 출력 값을 반환값이라고 한다.
함수명은 일반적으로 동사 또는 동사로 시작되는 어휘로 만든다.
함수를 호출할 때 전달하는 값을 인수(argument), 함수 정의문의 인수를 인자(parameter)라고 한다.
함수 선언문
자바스크립트 엔진은 변수 선언문과 마찬가지로 함수 선언문을 프로그램의 첫머리로 끌어올린다. 자바스크립트에서는 함수가 객체로 함수 선언문으로 함수를 선언하면 내부적으로는 변수에 함수 객체의 참조가 저장되어 변수 이름으로 함수를 사용할 수 있다.
console.log(square(5)); // -> 25
function square(x) { return x * x; }
var sq = square;
console.log(sq(5)); // 값으로서의 함수 -> 25참조에 의한 호출과 값에 의한 호출
// 값에 의한 호출
function add1(x) { return x = x + 1; }
var a = 3;
var b = add1(a);
console.log("a = " + a + ", b = " + b); // -> a = 3, b = 4
// 참조에 의한 호출
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, y=5}값에 의한 호출에서는 변수 a와 변수 x는 다른 영역의 메모리에 위치한 별개의 변수이다. 따라서 x 값을 바꾸더라도 a 값은 바뀌지 않는다.
참조에 의한 호출에서는 인수로 객체를 넘겼을 때 전달되는 값이 참조 값으로 이를 가리켜 '참조 전달'이라고 한다. 이때 인자 p와 변수 a는 똑같은 객체를 참조하고 있으므로 원래의 객체가 바뀌게 된다.
인수 여러 개를 우아하게 전달하는 방법(elegant way)
함수에 넘겨야 하는 인수 개수가 많아지면 다음과 같은 문제점이 생긴다.
- 인수의 순서를 착각하기 쉽다.
- 함수가 받는 인수 개수를 바꾸면 함수의 호출 방법이 바뀌므로 프로그램 전체를 수정해야 한다.
function setBallProperties(x, y, vx, vy, radius) { ... }
...
setBallProperties(0, 0, 10, 15, 5);다음과 같이 객체의 프로퍼티에 담아서 넘겨보자.
var parameters = {
x: 0,
y: 0,
vx: 10,
vy: 15,
radius: 5
};
function setBallProperties(params) { ... }
...
setBallProperties(parameters);단, 객체를 인수로 넘기면 함수에는 객체의 참조가 전달되기 때문에 함수 안에서 객체의 프로퍼티를 수정할 때 조심해야한다.
변수의 유효 범위
자바스크립트 변수는 변수의 유효 범위에 따라 전역 변수와 지역 변수로 나뉜다.
함수 안에서의 변수 선언 생략
function f() {
a = "local";
console.log(a); // -> local
return a;
}
f();
console.log(a); // -> local언뜻 보기에 변수 a는 함수 f의 지역 변수처럼 보이지만 var로 선언하지 않았으므로 실제로는 전역 변수이다.
블록 유효 볌위 : let과 const
let 선언자
let 문은 블록 유효 범위를 갖는 지역 변수를 선언한다.
console.log(x); // -> ReferenceError: x is not defined
let x = 5;var 문으로 선언한 변수를 읽으려고 시도할 때와는 다르게 오류가 발생하는데, 자바스크립트 엔진은 let과 const문으로 선언한 변수는 undefined로 초기화하지 않아서 발생하는 문제이다. 이를 가리켜 Temporal Dead Zone(TDZ)라고 한다.
let x;
let x; // -> Uncaught SyntaxErrorlet 문으로 똑같은 이름을 가진 변수를 선언하면 오류가 발생한다.
const 선언자
const 문은 let 문으로 선언한 변수처럼 동작하지만, 반드시 초기화를 해야한다.
const c = 2;
c = 5; // -> Uncaught TypeError
const origin = {x:1, y:2};
orgin.x = 3;
console.log(origin); // -> Object {x:3, y:2};const 문으로 선언한 상수 값은 수정할 수 없지만, 객체나 배열일 경우 수정할 수 있다.
함수 선언문과 함수 표현식(리터럴)
- 함수 선언문 : 함수 선언문은 함수 이름을 생략할 수 없으며, 호이스팅이 발생한다.
function add(x, y) {
return x + y;
};- 함수 표현식(리터럴) : 함수 표현식은 이름을 생략할 수 있으며, 호이스팅이 발생하지 않는다.
var add = function(x, y) {
return x + y;
};객체의 메서드
객체의 프로퍼티 중에서 함수 객체의 참조를 값으로 담고 있는 프로퍼티를 가리켜 메서드라고 한다. 메서드를 정의할 때는 프로퍼티 값으로 함수 리터럴을 대입한다.
var circle = {
center: { x:1.0, y:2.0 },
radius: 2.5,
area: function() {
return Math.PI * this.radius * this.radius;
}
};
circle.area() // -> 19.63495...객체의 기초 - 생성자
function Card(suit, rank) {
this.suit = suit;
this.rank = rank;
}
var card = new Card("하트", "A);
console.log(card); // -> Card {suit: "하트", rank: "A"}new 연산자로 객체를 생성할 것이라 기대하고 만든 함수를 생성자라고 부른다.
생성자와 new 연산자로 생성한 객체를 그 생성장의 인스턴스라고 한다.
배열의 기초
배열 생성
var evens = [3.14, "pi", true, {x:1, y:2}, [2, 4, 6, 8]];
var various = new Array(3.14, "pi", true, {x:1, y:2}, [2, 4, 6, 8]);배열은 객체
자바스크립트의 배열은 C나 Java와 같은 프로그래밍 언어의 배열 요소와는 달리 Array 객체이며, 객체로 배열의 기능을 흉내 낸 것이다. Array 객체는 배열의 인덱스를 문자열로 변환해서 그것을 프로퍼티로 이용하므로, 배열의 요소 번호로 숫자 값 대신 문자열을 사용할 수 있다.
var a = ["A", "B", "C"];
console.log(a["2"]); // -> C