속성에서 firstName과 lastName같은 것들을 객체의 키(key)라고도 부르고 'hyungju'와 'Lee'를 값(value)이라고도 부릅니다.
즉, 속성은 키: 값의 관계로 이루어져있습니다.
키는 속성명이라고 생각하시면 됩니다.
참고로 키(속성명)는 문자열만 가능합니다.
그리고 키(속성명)는 따옴표가 없어도 됩니다.
있어도 상관은 없습니다.
위에 소스를 보시면 firstName과 lastName은 문자열인데도 따옴표로 감싸주지 않았죠?
그런데 반드시 따옴표로 감싸줘야 하는 경우도 있습니다.
바로 키(속성명)에 띄어쓰기가 들어간 경우입니다.
var wrap = { 'ex ample': 'wrap' };
위와 같은 경우, wrap 객체의 속성명은 'ex ample'입니다.
이렇게 속성명 안에 띄어쓰기가 있을 경우는 따옴표로 감싸줍니다.
속성값은 어떤 값이든지 상관없습니다.
문자열이어도 되고, 숫자여도 되고, 객체여도 되고, 함수여도 됩니다.
속성값이 함수인 것을 우리는 메소드라고 특별히 따로 부릅니다.
그렇다면 hyungju 객체 안에 firstName이나 lastName 속성의 값을 사용하고 싶을 땐 어떻게 할까요?
아까 키가 속성의 이름이라고 했죠?
객체한테 속성의 이름을 부르면 됩니다.
hyungju.firstName; // 'hyungju'
hyungju['firstName'] // 'hyungju' (이렇게 쓰는 것도 가능합니다.)
hyungju.lastName // 'Lee'
hyungju['hyungju'] // 'Lee'
이렇게 접근할 수 있습니다.
마침표를 사용해서 hyungju 객체 안의 속성들에 접근하는 것입니다.
아니면 [] 안에 속성명을 적어서 접근할 수도 있습니다.
하지만 [] 안에 적는 것보다는 주로 마침표를 사용합니다.
어쩔 수 없이 [] 안에 적어야하는 경우는 위에서처럼 속성명에 띄어쓰기가 들어가 있는 경우입니다.
아까 wrap 객체 안의 'ex ample' 속성에 접근하고 싶을 때는 wrap['ex ample'] 이렇게 접근해야 합니다.
그냥 wrap.ex ample 하면 오류가 납니다.
객체를 다양하게 활용하는 방법을 살펴봅시다.
hyungju.lastName = 'Kim';
hyungju; // { firstName: 'hyungju', lastName: 'Kim'}
위와 같이 객체 안의 속성을 바꿀 수도 있습니다.
var hyungju = {
body: {
height: 185
weight: 78
}
};
hyungju.body.height; // 185
아까도 말했듯이 객체 안에 속성값으로 객체가 들어갈 수도 있습니다.
hyuungju 객체의 속성으로 body가 있는데 그 값이 다시 객체인 것입니다.
객체의 속성에 접근하는 것이니까 마침표를 사용해서 점점 더 안으로 들어가면 됩니다.
객체를 사용해서 복잡한 데이터 구조를 짤 수 있겠죠?
객체의 속성을 삭제하는 방법도 있습니다. 앞에 delete 키워드를 붙이면 됩니다.
var hyungju = {
body: {
height: 185
weight: 78
}
};
delete hyungju.body.height;
hyungju.body; // { weight: 78 }
객체는 다음과 같이 만들 수도 있습니다.
var hyungju = new Object();
hyungju.firstName = 'hyungju';
hyungju.lastName = 'Lee';
hyungju.body = new Object();
hyunju.body.height = 185;
hyungju.body.weight = 78;
이렇게 new 라는 키워드를 사용해서 만드는 방법도 있습니다.
그러나 위와 같이 만드는 경우는 거의 없고 그냥 {} 안에 바로 만들어버립니다.
또한 {}를 사용하는 것을 권장합니다.
{}를 사용해서 만든 객체를 객체 리터럴(literal)이라고 부릅니다.
객체 선언에 Literal({}) 표현을 선호하는 이유
new를 사용하지 않고 만드는 것을 리터럴이라고 부릅니다.
문자열이나 숫자도 사실 new String(), new Number 이렇게 만들 수 있습니다.
하지만 그러지 않고 그냥 hyungju나 185처럼 그냥 값을 바로 썼죠?
이런 것이 다 문자열 리터럴, 숫자 리터럴입니다.
문자 그대로의 것들을 의미합니다.
객체 중에는 특수한 객체가 있습니다.
바로 함수(function)와 배열(Array)입니다.
var array = [];
var array2 = [1, "Hello", [1,2,3], { hi: 1 }];
배열은 []로 감싸서 나타내고, 객체 리터럴처럼 안에는 무엇이든지 다 들어갈 수 있습니다.
배열 안에 배열이 들어가도 되고, 배열 안에 객체가 들어가도 됩니다.
함수도 들어갈 수 있습니다.
배열 안에 들어간 것들을 우리는 요소(item)라고 부릅니다.
객체의 속성처럼 쉼표로 구분하면 됩니다.
다른 프로그래밍 언어를 배우셨던 분들을 위해 한 가지 알려드리자면, 자바스크립트는 배열의 길이를 미리 정할 필요가 없습니다.
안의 요소에 따라 자동으로 늘어나거나 줄어듭니다.
객체와의 차이점은 키(속성명)이 없다는 것입니다.
그냥 값들만 순서대로 나열되어 있습니다.
아까 hyungju 객체를 생각해보세요.
거기서 키(속성명)가 없으면,
var hyungju = ['hyungju', 'Lee'];
이런 모양이 되는 겁니다.
굳이 키가 필요하지 않고 값만 많이 나열하고 싶을 때 배열을 사용합니다.
배열 안의 요소를 선택하려면 뒤에 몇 번째 요소인지 숫자를 붙여주면 됩니다.
자바스크립트에서는 0이 첫번째입니다.
따라서 [0]을 붙이면 첫번째 요소 hyungju가 선택되고, [1]을 붙이면 두번째 요소 Lee가 선택됩니다.
var hyungju = ['hyungju', 'Lee'];
hyungju[0]; // 'hyungju'
hyungju[1]; // 'Lee'
사실 배열도 키(속성명)가 있습니다.
배열은 자동으로 키가 0, 1, 2, 3, .... 순서로 주어집니다.
즉 'hyungju' 값의 키는 0이고, 'Lee' 값의 키는 1입니다.
위에서 요소를 선택한 원리가 바로 이것이죠.
키(속성명)를 통해 배열의 요소를 선택한 겁니다.
var hyungju = {
firstName: 'hyungju',
lastName: 'Lee'
}
hyungju['firstName']; // hyungju
위에처럼 객체는 [] 안에 속성 이름을 넣어서 값을 불러오는 방법도 있었죠?
그와 비슷합니다. 어떻게보면
var array = ['hi', 'js', 123];
var object = {
0: 'hi',
1: 'js',
2: 123
};
위의 두 개가 비슷하다고 볼 수도 있습니다.
다만, 배열은 객체보다 몇 가지 추가적인 기능들을 제공합니다.
그 기능은 배열 강좌에서 알려드리겠습니다.
또한 배열이 아닌 일반 객체도 배열과는 다른 기능들이 몇 개 있습니다.
배열도 역시 다음과 같이 만들 수도 있습니다.
var array = new Array();
array[0] = 1;
array[1] = 'Hello';
하지만 위와 같은 방법보다는 그냥 [ ] 안에 넣는 것을 자주 사용합니다.
그리고 [ ]를 사용하는 게 권장사항이기도 합니다.
new를 사용하지 않고 [ ]만 사용해서 만든 배열을 배열 리터럴이라고 부릅니다.
객체 리터럴 같은 겁니다.
객체와 배열은 특성상 대부분의 프로그래밍 언어에 있습니다.
이들은 나중에 배울 자료구조와 알고리즘의 기본이기도 합니다.
마지막 객체로는 함수가 있습니다.
함수는 객체나 배열보다 더 중요하기 때문에 다음 글에서 살펴보도록 하겠습니다!
함수