[Javascript 초급] 객체와 배열, 함수의 기초

자바스크립트는 원시 타입을 제외한 모든 값이 객체다.

 

객체는 객체 리터럴과 생성자로 생성할 수 있다.

 

객체에 포함된 데이터 하나(이름과 값의 쌍)을 가리켜 객체의 프로퍼티 라고 한다.

프로퍼티의 이름 부분은 프로퍼티 이름 또는 키 라고 한다.

 

1. 객체 - 객체 리터럴

객체 리터럴로 객체 생성은 다음과 같이 한다.

var card ={ suit:'하트' , rank='A'};

프로퍼티 추가와 삭제가 가능하다.

card.value=14;
delete card.rank;

in 연산자를 이용해 프로퍼티가 있는지 확인 가능하다. ( card 객체와, 그 객체가 상속받은 모든 프로퍼티를 검사한다.)

console.log("suit" in card); // -> true

객체 타입의 값을 변수에 대입하면, 그 변수에는 객체의 참조(메모리에서의 위치 정보)가 저장된다.

 

프로퍼티에 저장된 값의 타입이 함수면, 그 프로퍼티를 메서드 라고 부른다.

 

그러면 함수에 대해 살펴보자!

2. 함수

square 라는 함수를 정의하는 코드는 다음과 같다. 인수의 제곱을 계산해서 반환한다.

function square(x) { return x * x; }

함수의 명명은 캐멀표기법을 따르는 것이 좋다. 

 

함수의 호출은 다음과 같이 한다.

square(3);

인수의 갯수가 많아질 때, 인수 여러개를 우아하게 전달하는 방법이 있다.

functions setProperties(x, y, vx, vy, radius) { ... }

//함수의 인수를 객체의 프로퍼티에 담기
var parameters = {
	x:0,
    y:0,
    vx:10
    vy:15,
    radius:5
};

setBallProperties(parameters);

이름 없는 함수 리터럴을 익명함수 라고 부른다. 끝에 반드시 세미콜론을 붙여야 한다.

var square = function(x) { return x * x; };

 

4.3 객체 - 생성자

생성자를 사용하면 이름이 같은 메서드와 프로퍼티를 가진 객체 여러 개를 효율적으로 생성할 수 있다.

C++과 Java 의 클래스에 비유할 수 있다.

function Card(suit, rank) {
	this.suit = suit;
    this.rank = rank;
}

생성자로 객체를 생성할 때에는 new 연산자를 이용한다.

var card = new Card("하트", "A");

 생성자 이름은 관례적으로 그것이 생성자임을 알리기 위해 첫 글자를 대문자로 쓰는 파스칼 표기법을 사용한다.

 

 

4.4 객체 - 내장 객체

자바스크립트에는 처음부터 사용할 수 있는 내장객체가 마련되어 있다. 

 

이에 해당된 것들은 연습하면서 필요한 것들을 익혀야 할 것 같다.

 

내장객체란, 처음부터 사용할 수 있는 객체이다. 

 

전역객체는 프로그램 어디에서나 사용할 수 있는 객체로, 자바스크립트 인터프리터가 시작될 때 혹은 웹 브라우저가 새로운 페이지를 읽어들일 때마다 새로운 전역객체가 생성되며 다음과 같은 프로퍼티를 갖게된다.

 

분류	프로퍼티
전역 프로퍼티	undefined, NaN, Infinity
생성자	Object(), String(), Number() 등
전역 함수	parseInt(), parseFloate(), isNaN() 등
내장 객체	Math, JSON, Reflect

 

전역 객체의 프로퍼티는 다음과 같이 입력하여 확인할 수 있다. 

console.dir(window);

자바스크립트 객체는 크게 네이티브 객체, 호스트 객체, 사용자 정의 객체로 나눌 수 있다.

 

네이티브 객체

네이티브 객체는 ECMAScript 사양에 정의된 객체다. 내장생성자(String, Number, Boolean, Array, Function 등)로 생성된 객체와 JSON, Math, Reflect 등이 이에 속한다.

 

호스트 객체

호스트 객체는 ECMAScript 에는 정의되어있지 않지만 자바스크립트 실행 환경에 정의된 객체다. 브라우저 객체(Window, Navigator, History, Location 등), DOM 에 정의되어 있는 객체, Ajax 를 위한 XMLHttpRequest 객체 HTML5 의 각종 API 등이 클라이언트 측 자바스크립트에 정의된 호스트 객체다. 

 

 

4.5 배열의 기초

배열은 값의 목록으로, 값마다 번호가 매겨져 있다. 

 

배열 리터럴로 생성하는 코드는 다음과 같다.

var evens = [2,4,6,8];

배열 값 하나를 배열 요소 라고 한다. 

 

배열은 객체이다. 자바스크립트 배열은 메모리의 연속된 공간에 차례대로 배치되어 있지 않고, Array 객체인데, 배열의 기능을 가상으로 흉내낸 것이다. 

 

Array 생성자로도 배열을 생성할 수 있다. 

 

Array 생성자의 인수가 한개고 그 값이 양의 정수면 배열 길이를 뜻한다. 

var x = new Array(3);
console.log(x.length); // ->3

인수가 두개 이상이면,

var evens = new Array(2,4,6,8); // [2,4,6,8]을 생성
var empty = new Array(); // 빈 배열 []을 생성

Array 객체는 배열의 인덱스를 문자열로 변환해서 그것을 프로퍼티로 이용한다. 

예를 들어, 

var a = ["A","B","C","D"];
console.log(a["2"]) // -> C

언급한 객체에 없는 프로퍼티를 읽으려고 하면 undefined 가 반환된다. 

 

희소 배열이란, 배열의 요소를 추가하거나 제거하여 인덱스가 0부터 시작되지 않는 배열을 말한다.

 

희소 배열의 길이는 실제 배열 요소의 개수보다 크다.