아래 예제 코드들을 크롬 브라우저의 Developer Tools의 Console 탭에서 직접 실행해 가면서 진행하면 좋습니다. 맥에서는 option+command+i 단축키로, 윈도우는 F12 혹은 Control + Shift + i 단축키로 Developer Tools를 실행 할 수 있습니다.

실제로 이론적인걸 완벽하게 이해하기 보다는, 직접 코드를 쳐보면서 어떻게 움직이는지 원리를 감각적으로 익히는 것이 도움이 더 많이 됩니다.

자바스크립트는 각 코드의 마지막에 끝을 의미하는 ';' 를 포함해줘야 합니다. 최근엔 세미콜론이 없어도 코드가 실행되는데에 문제가 없지만 그래도 세미콜론을 붙여주는 습관을 들이는 것이 좋습니다.

자바스크립트에서 코드에 대한 코멘트 (주석)을 적을 땐 앞에 '//' 를 붙여주면 됩니다. 코멘트들은 실행이 되지 않습니다. 어디까지나 개발자의 메모라고 생각하면 됩니다.

자바스크립트에서 변수를 생성 할 땐 'var <변수 이름>'을 이용합니다. 변수는 특정 값을 저장해두고 나중에 그 값을 참조하기 쉽게 하기 위해 만드는 일종의 데이터 저장소 역할을 합니다.

#오브젝트란 무엇인가

자바스크립트 오브젝트(Object)는 이름(name)과 값(value)의 쌍으로 이루어진 아이템들의 리스트. 오브젝트 안의 각 아이템들을 속성 (property) 라고 합니다.

// 오브젝트 생성
var car = {brand: "kia", year: 2016};

// car 오브젝트의 속성들이 뭔지 확인해보기
console.log(car);

car 라는 오브젝트에 두가지 아이템을 지정해주었습니다. 하나는 brand 라는 이름과 "kia" 라는 값을 가진 속성. 또 하나는 year 라는 이름과 2016 이라는 값을 가진 속성 입니다.

#오브젝트속성 값을 가져오기

그럼 각각의 특정 속성의 값을 가져오는건 두가지 방법이 있습니다.

첫번째는 "<오브젝트>.<속성이름>"을 이용하는 방법입니다.

console.log(car.brand);
// 결과 -> kia

두번째는 "<오브젝트>["<속성이름>"]"을 이용하는 방법입니다.

console.log(car["year"]);
// 결과 -> 2016

#속성 값을 바꿔주기

같은 원리로 속성의 값을 바꿔주고 싶을 땐 아래와 같이 해주면 됩니다.

car.brand = "Hyundai";
console.log(car.brand);
// 결과 -> Hyundai

마찬가지로 아래의 방법으로도 가능합니다.

car["year"] = 2001;
console.log(car["year"]);
// 결과 -> 2001

#오브젝트를 생성하는 다른 방법

초기에 오브젝트를 생성하는 방법은 3가지가 있습니다. 첫번째는 이미 이전 예제에서 본 방법입니다. 두번째는 우선 아무 속성이 없는 빈 오브젝트를 생성한 후, 속성 값을 나중에 지정해주는 방법입니다.

var car2 = {};

// car2 오브젝트에 뭐가 들었는지 확인
console.log(car2);

car2.brand = "BMW";
car2.year = 2002;
car2.owner = "Me";

// car2 오브젝트 속성들 확인
console.log(car2);

위의 코드를 실행해보면 첫번째 console.log(car2)를 실행했을 땐 단순히 "{}" 라는 결과가 나오지만 두번째 console.log(car2)를 실행했을 땐 "{brand: "BMW", year: 2002, owner: "Me"}" 라는 결과가 나오는 걸 확인 할 수 있습니다.

두번째 방법은 new Object () 를 이용하는 방법입니다.

var car3 = new Object();

//car3 오브젝트에 뭐가 들었는지 확인
console.log(car3);

car3.brand = "Audi";
car3.year = 1990;
car3.owner = "You";

//car3 오브젝트 속성들 다시 확인
console.log(car3);

결과는 이전과 비슷합니다. 어느 방법이 더 낫다거나 하는 건 딱히 없고, 상황에 따라 본인이 편한 방법을 사용하면 됩니다.

#Constructor를 이용하기

매번 새롭게 오브젝트를 수동으로 생성해주는 것도 좋지만, 그러면 실수가 나타날 수 있고, 나중에 코드를 변경해야할 때 고쳐야 할 부분이 많아져서 효율적이지 못할 수 있습니다.

그래서 오브젝트를 생성할 때 Constructor를 사용해주게 됩니다. Car 라는 오브젝트의 속성이 미리 정해져있다면, 그 후에 각 브랜드별로 변수를 만들 때 미리 정해진 속성 이름에 값만 다르게 해서 생성할 수 있으면 편하겠죠.

// Car 오브젝트의 Constructor 생성
function Car (carBrand, carYear) {
    this.brand = carBrand;
    this.year = carYear;
}

var kia = new Car("Kia", 2016);
var hyundai = new Car("Hyundai", 2011);

console.log(kia);
console.log(hyundai);

이렇게 해주면 Car 오브젝트 속성을 이용한 변수를 만들기가 쉬워집니다. 위 코드에서 this 는 Car 오브젝트를 뜻합니다.

#프로토타입 (Prototype)의 지정

자동차를 예로 들면 모든 자동차 오브젝트에 변함없이 공통적으로 지정되는 속성이 있을 수 있습니다. 예를 들어 모든 자동차는 검은색이라고 미리 지정을 해주고 싶을 수 있습니다.

Car.prototype.color = "black";

var bmw = new Car("BMW", 2000);

console.log(bmw);

결과치를 보면 "Car {brand: "BMW", year: 2000}" 라고 나와있고, color 속성이 보이지 않습니다. 하지만 맨 앞에 "▶︎" 를 눌러주면 좀 더 자세한 내용이 나옵니다. 거기에 "proto" 라는 걸 다시 펼쳐주면 안에 color: "black" 이라고 지정이 되어있는 것을 볼 수 있습니다.

#this와 prototype의 차이점

this는 "own property"이고 prototype은 "inherited property"라는 차이가 있습니다. 간단하게 무슨 차이냐면 "own property"는 속성 자체를 지울 수 있지만, "inherited property"는 지울 수 없는 속성입니다.

console.log(bmw.brand);
// 결과 -> BMW

// bmw 오브젝트의 brand 속성 지우기
delete bmw.brand;
// console창에 true 라고 나옴

// 다시 brand 속성 값 확인해보기
console.log(bmw.brand);
// 결과 -> undefined

위 코드 예제로 알 수 있듯이, "own property"인 "brand" 속성은 지우는게 가능하다는 걸 확인 할 수 있습니다. 그렇다면 "inherited property"인 "color" 속성은 어떨까요?

console.log(bmw.color);
// 결과 -> black

// bmw 오브젝트의 color 속성 지우기 시도
delete bmw.color;
// console창에 true 라고 나옴

// 다시 color 속성 값 확인해보기
console.log(bmw.color);
// 결과 -> black

delete 커맨드를 이용하여 속성을 지우려고 시도했을 때, 커맨드 실행 결과 자체는 true라고 나왔지만, 실제로 속성 값을 확인해보면 그대로 있는 걸 확인 할 수 있습니다.

#오브젝트의 속성들 확인하기

각 오브젝트에 어떤 속성들이 있는지 확인하는 방법입니다. 우선 해당 오브젝트에 있는 모든 속성들의 리스트를 알아내는 방법입니다. for loop를 사용합니다.

for (var eachCar in kia) {
    console.log(eachCar)
}

// 결과 -> brand, year, color

특정 속성이 해당 오브젝트에 존재하는지에 대해 알아보려면 다음과 같이 하면 됩니다.

// kia 오브젝트에 "brand"라는 이름의 속성이 존재하는지 확인
console.log("brand" in kia)
// 결과 -> true

// kia 오브젝트에 "color"라는 이름의 속성이 존재하는지 확인
console.log("color" in kia)
// 결과 -> true

// kia 오브젝트에 "price"라는 이름의 속성이 존재하는지 확인
console.log("price" in kia)
// 결과 -> false

"own property" 타입의 속성이 있는지 확인하는 방법은 다음과 같습니다.

// kia 오브젝트에 "own property" 타입의 "brand"라는 이름의 속성이 있는지 확인
console.log(kia.hasOwnProperty("brand"));
// 결과 -> true

// kia 오브젝트에 "inherited property" 타입의 "color"라는 속성을 대입해보면?
console.log(kia.hasOwnProperty("color"));
// 결과 -> false

#Serialize & Deserialize

자바스크립트 오브젝트를 http 통신을 통해 서버로 보내기 위해선 우선 오브젝트를 String 타입으로 변환해주어야 합니다. http 통신은 자바스크립트 오브젝트를 이해하지 못하기 때문이죠. String 타입으로 변환된 자바스크립트 오브젝트를 JSON 이라고 하며, 이 변환하는 과정을 시리얼라이즈(Serialize)라고 합니다.

자바스크립트를 JSON으로 변환해주기 위해서는 다음과 같이 하면 됩니다.

JSON.stringify(kia);
// 결과 -> "{"brand": "Kia", "year": "2016"}"

반대로 JSON을 자바스크립트 오브젝트로 변환해주는 과정을 Deserialize라고 하는데, 그 방법은 다음과 같습니다.

// 예제를 위해 우선 kia 오브젝트의 JSON 버전을 변수에 저장합니다
var kiaStr = JSON.stringify(kia);

// JSON에서 자바스크립트 오브젝트로 변환
JSON.parse(kiaStr);
// 결과 -> {brand: "Kia", year: 2016}

자바스크립트의 가장 중요한 개념인 Object에 대해 알아보았습니다. 앞으로 실제 개발을 하다보면 점점 모든 의미를 알 수 있게 되니, 지금 당장 모두 이해가 되지 않아도 괜찮습니다.

실제로 계속 반복해서 쓰다가 보면 감각적으로 뭐가 어떤식으로 구동하는지 익히게 됩니다. 지금은 이렇게 하면 이렇게 되는구나 정도로 알고, 익숙해진 다음에 이론적인걸 다시 나중에 공부하면 됩니다. 처음부터 너무 이론적인 걸 확실히 짚고 넘어가려고 하면 프로그래밍 자체의 흥미가 떨어질 수 있고 이해도 떨어지게 됩니다.