● ES6부터 추가된 단축 속성명으로 객체를 정의하는 방법
ES6에 새로 추가된 JavaScript 기능인 단축 속성명을 활용하여, 객체의 속성을 좀 더 간단하게 정의할 수 있다.
객체 속성을 리터럴로 정의하기 위해서는 키 : 값으로 작성해야 했다. 단축 속성명은 변수가 미리 준비되어 있는 경우 활용 가능하며, 변수명으로 속성의 키와 값을 한번에 정의할 수 있다. 이는 객체 리터럴 선언 코드를 더 짧고 가독성 있게 만들어 준다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script type="text/javascript">
// {변수명}
var address = 'Seoul';
var member = {};
var addFamily = function (age, name, role){
this.member[role] = {age, name};
};
var getHeadcount = function(){
return Object.keys(this.member).length;
}
var family = {address, member, addFamily, getHeadcount};
family.addFamily(30, 'chloe', 'aunt');
family.addFamily(3, 'lyn', 'niece');
family.addFamily(10, 'dangdangi', 'dog');
console.log(family.getHeadcount());
</script>
<body>
</body>
</html>
|
cs |
기존 family 객체의 속성을 변수로 객체 속성을 변수로 작성한다. 각속성의 키 이름을 변수명으로 정의하고, 값을 해당 변수에 할당한다.
따라서 변수 address, members, addFamily, getheadcount에 해당하는 속성값이 할당된다.
family 객체 리터럴을 선언
정의한 변수들을 중괄호 안에 넣는다. 단축 속성명은 문자열, 객체, 함수 등 자료형에 상관없이 적용가능하다.
ES6의 향상된 객체 문법 알아보기 - 속성 계산명
- 속성 계산명(Computed property Name)은 속성 이름을 정의하는 다른 방법이다. 대괄호 []안에 식을 넣거나 변수를 대입하여 동적으로 객체 속성들을 생성할 수 있다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script type="text/javascript">
var obj = {};
for(var i=0; i < 4; i ++){
obj['key'+ i] = i;
}
console.log(obj);
var profile = 'chloe:30';
var person = {
[profile] : true,
[profile.split(':')[0]] : profile.split(':')[1]
};
console.log(person);
</script>
<body>
</body>
</html>
|
cs |
ES6의 향상된 객체 문법 알아보기 - 비구조화 할당
- 비구조화 할당(Destructuring Assignment)이란, 배열이나 객체의 값을 새로운 변수에 쉽게 할당한다.
ES6 이전에는 변수 하나에 값 하나를 일일히 할당해야 햇으나 ES6부터는 비구조화 할당을 통해 손쉽게 값을 할당할 수
있게 되었다.
- 객체 비구조화 할당 활용 => 중괄호 {} 안에 속성 이름을 넣어 객체의 여러 속성을 한꺼번에 가져올 수 있다.
-- > 다시 해봐야 겠다.
'IT 개발 > JavaScript' 카테고리의 다른 글
| 스코프 이해하기 (0) | 2021.09.12 |
|---|---|
| 함수 호이스팅 이해하기 (0) | 2021.09.12 |
| 반복문 배우기 - while (0) | 2021.04.18 |
| 반복문 - for in (0) | 2021.04.18 |
| [Node.js 다운로드] (0) | 2021.04.18 |
