목차
1. 개요
2. 생성
3. 조회
4. 수정
5. 삭제
1. 개요
Javascript의 가장 기본이 되는 개념인 객체의 생성, 조회, 수정, 삭제 방법에 대해 알아본다.
2. 생성
|
1
|
var foo = { name : 'ssk' };
|
중괄호 '{ }' 안에 key : value 형식으로 프로퍼티를 저장한다.
프로퍼티란 객체에 속한 데이터를 뜻한다.
※ key point
foo라는 변수가 {name : 'ssk'} 라는 객체 자체에 대한 데이터를 가지고 있는 것이 아닌 객체의 주소를 가지고 있다.
예를 들어, var foo2 = foo 라고 초기화시키면 foo2 또한 foo와 동일한 객체를 가리키게 된다.
3. 조회
객체를 조회하는 방법은 크게 두 가지이다.
1) 참조 연산자 (.) 사용
2) 대괄호 ([]) 사용
|
1
2
3
|
console.log(foo.name); // 'ssk'
console.log(foo['name']); // 'ssk'
console.log(foo[name]); //undefined
|
foo.name은 foo객체의 주소를 참조하고 그 안에 있는 name 값을 조회한다라는 의미이다. 'ssk'가 출련된다.
foo['name']도 직관적으로 해석하면 foo객체의 key가 name인 value값을 조회한다인데, foo['name']과 foo[name]이 자꾸 헷갈려서 메커니즘을 찾아 이해해보았다.
먼저 대괄호란 녀석은 배열에서 값을 참조할 때 쓰는 형식이다.
javascript에서는 number, boolean, undefined, string, null이라는 기본 타입을 제외하고 모두 객체 타입이다. foo['name']은 객체 타입인 배열과 형식이 같은 것을 알 수 있다. (물론! 차이는 존재한다.)
쉽게 생각하면 foo['name']은 처럼 'name'이라는 key값(index)를 참조한다고 생각하면 이해가 쉽다. 객체의 key값은 String 값이기 때문에 작은 따옴표(')와 함께 입력해 준 것이다. 작은 따옴표가 없으면 name이라는 값은 String이 아닌 하나의 변수로 인식되고, name 변수 안에 있는 값을 참조하게 된다. name 변수는 호출이 된 최상위 객체인 window에 존재하지 않기 때문에 당연히 undefined가 출력된다.
추가적으로 javascript는 대괄호 안에 데이터가 문자열이 아닐 경우 자동적으로 toString() 메소드를 적용시킨다. toString() 메소드는 어떠한 데이터를 문자열로 변환해주며, 변수.toString() 형식으로 사용할 경우 해당 변수에 들어있는 데이터를 문자열로 변환해주는 역할을 한다.
즉, 대괄호 안에 있는 name이라는 데이터를 문자열이 아닌 변수로 인식하게 되면 name이라는 변수는 호출된 객체 영역 내에서 정의되지 않았기 때문에 문자열로 변환한들 당연히 값은 존재하지 않는다.
|
1
2
3
4
5
|
var name = 'name';
console.log(foo.name); // 'ssk'
console.log(foo['name']); // 'ssk'
console.log(foo[name]); // 'ssk'
|
때문에 변수에 객체의 key값을 넣어 조회할때 위의 방식을 사용한다.
간단히 name이라는 변수에 'name'이라는 key값을 넣었지만 key값이 많을 경우 반복문과 결합하여 사용할 수 있다.
foo['name']과 foo[name]의 차이를 정확히 알았으니 더이상 헷갈리는 일은 없겠지.
4. 수정, 추가
|
1
2
|
foo['name'] = 'hky';
console.log(foo['name']) //hky
|
foo.name = 'hky' 라고 해도 동일하다.
|
1
2
|
foo['age'] = 25;
console.log(foo['age']) //25
|
추가도 수정과 동일한 방식이다.
5. 삭제
|
1
2
|
delete foo['age'];
console.log(foo['age']); //undefined
|
삭제하고자 하는 객체의 키 값을 입력하며, 객체의 프로퍼티를 삭제할 때 사용한다.
객체 자체를 삭제할 순 없다.
'프론트엔드 > Javascript' 카테고리의 다른 글
| [Javascript] 정규 표현식(Regular expression), 정규식 패턴, 사용법, 날짜 차이 구하기 예제 (0) | 2019.08.09 |
|---|---|
| [JavaScript] 상속, Prototype, 함수 및 생성자 (3) (0) | 2019.07.24 |
| [JavaScript] 상속, Prototype, 함수 및 생성자 (2) (0) | 2019.07.19 |
| [JavaScript] 상속, Prototype, 함수 및 생성자 (1) (0) | 2019.07.18 |
| [Javascript] 모듈의 정의, 장점 및 예제 (0) | 2019.07.01 |
