객체(object)는 JavaScript에서 매우 중요하다고 볼 수 있는 타입이다.
자바스크립트를 이루고 있는 거의 모든 것이 객체이다.
변수에 기억할 수 있는 데이터 타입은 기본(원시)타입, 객체 타입 두 가지뿐이다.
1. 원시, 기본타입?
원시 타입(primitive type) : 변경 불가능한 값(immutable value)
객체 타입(object / reference type) : 변경 가능한 값(mutable value)
원시 값을 변수에 할당하면 변수에는 실제 값이 저장된다.
객체를 변수에 할당하면 변수에는 참조 값이 저장된다.
여기서 변수는, 확보된 메모리 공간이다.
원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 원본 값이 복사되어 전달된다.
이를 값에 의한 전달(pass of value)라고 한다.
객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달된다.
이를 참조에 의한 전달(reference of value)라고 한다.
2. 객체는 무엇인가?
키(Key)와 값(Value)의 쌍을 포함하는 데이터라고 부른다.
중괄호( { } )안에 키-값을 쌍으로 작성하여 객체 생성할 수 있다.
중괄호 안에는 '키key'와 '값(value)'를 쌍으로 구성된,
프로퍼티(property)를 여러 개 넣을 수 있는데,
여러 키-값 쌍을 넣고 싶다면 각 쌍을 쉼표(,)로 구분해야 한다.
키(Key) = 문자형,
값(Value) = 모든 자료형 허용
let user = { // 객체
name: "John", // 키: "name", 값: "John"
age: 30 // 키: "age", 값: 30
};객체 user에는 프로퍼티가 두 개 있다..
- 첫 번째 프로퍼티 – "name"(이름)과 "John"(값)
- 두 번째 프로퍼티 – "age"(이름)과 30(값)
프로퍼티 키는 '프로퍼티 이름'이라고도 불린다.
쉽게 말하면 객체의 키(Key) = 속성(property)라고 불린다.
서랍장을 생각하면 편하다.
서랍장 안에 파일은 프로퍼티, 파일 각각 붙어있는
이름표는 객체의 키 라고 생각하면 된다.
복잡한 서랍장 안에서, 이름표를 보고 원하는 파일을
쉽게 찾아서 볼 수 있듯이, 객체에서는 키를 이용하여
프로퍼티를 쉽게 찾을 수가 있다.
빈 객체(빈 서랍장)를 만드는 방법은 두 가지가 있다.
1. let user = new Object(); // '객체 생성자' 문법
2. let user = {}; // '객체 리터럴' 문법3. 객체 속성 값 읽기
객체의 키(Key)는 '속성(property)'이라 불린다고 위에 알려준 바 있다.
| JavaScript 속성(Property) | HTML 속성(attribute) |
|---|---|
| JavaScript 객체로 존재 | HTML 태그 안에 정의 |
| 브라우저에서 실시간으로 변화 가능 | HTML 코드에 선언된 고정된 값 |
| 화면과 작동에 영향을 미침 | HTML 자체 변경에 영향을 미침 |
| 동기화 이후 개별적으로 작동됌 | 초기에만 JS 속성과 동기화됌 |
속성 값을 가져오는 방법은 두 가지 메서드를 사용해볼 수 있다.
3-1 점 표기법(dot notation)
점(.) 표기법을 이용하여 사용한다.
const 속성_값 = 객체.속성_이름점 표기법(dot notation)을 이용하면 프로퍼티 값을 읽는 것도 가능하다.
// 프로퍼티 값 얻기
1. alert( user.name ); // John
2. alert( user.age ); // 30일반적으로는 점 표기법을 사용한다.
점 표기법이 적합하지 않은 특별한 경우에만 대괄호 표기법을 사용한다.
아래는 특별한 경우를 작성한 내용이다.
1. 속성 이름이 따옴표로 묶인 경우
2. 변수로 속성을 읽어야 할 경우
객체의 study 속성 값을 가져오려면 아래와 같이 작성해야 한다.
const study = user.study
console.log(study) // '자바스크립트 공부'3-2 대괄호 표기법( [ ] )
객체의 속성 이름을 문자열로 쓰고 대괄호 ( [ ] )로 묶어서 사용한다.
const study = user['study']
console.log(study) // '자바스크립트 공부'마지막 프로퍼티 끝은 쉼표로 끝날 수 있다.
let user = {
name: "John",
age: 30,
}위와 같은 쉼표를 'trailing(길게 늘어지는)' 또는 'hanging(매달리는)' 쉼표라 불린다.
이렇게 끝에 쉼표를 붙이면 모든 프로퍼티가 유사한 형태를 보이기 때문에,
프로퍼티를 추가, 삭제, 이동하는게 쉬워진다.
4. 객체 속성 삭제
'delete' 키워드를 사용하여 키-값 쌍을 삭제할 수 있다.
삭제하려면 'delete'를 쓰고, 그 뒤에 점이나 대괄호로 속성을 지정한다.
delete 객체.속성_이름
delete 객체['속성 이름']const(상수) 객체는 수정될 수 있다?
const user = {
name : "John"
};
user.name = "Shawn"; ✅
console.log(user.name) // Shawn
위와 같이 작성된다고 하면 ✅로 표시한 줄에서 오류가 발생할 것
이라고 생각하겠지만, 그렇지 않다.
const는 user=...를 전체적으로 설정하려고 할 때만 오류를 발생한다.
5. 객체의 메서드
객체의 JavaScript의 모든 데이터 타입을 속성으로 포함할 수 있다.
함수 또한 포함이 가능하다.
전에 설명하였듯이, 함수를 값으로 쓰일 수 있으므로
포함하는 속성을 "메서드(Method)"라고 불린다.
const user = {
getStudy: function() {
// user의 메서드(함수)
}
}객체의 속성인 메서드는 함수 타입이므로 함수처럼 사용(호출)이 가능하다.
// 1. 점 표기법
user.getStudy()
// 2. 대괄호 표기법
user['getStudy']()6. 함수의 타입
앞서 배운 함수(Function) 또한 객체 타입(Object type)이다.
JavaScript 함수는 객체 타입이므로, 객체처럼 속성을 가질 수 있다.
// 함수 선언
function cache() {}
// 함수 객체의 속성 설정
cache.data = '캐싱 데이터'
console.log(cache.data) // '캐싱 데이터'🚨 함수는 값으로 취급!
전에 일급 함수에 대해 간단하게 설명했는데,
여기서 자세하게 다뤄보도록 하겠다.
간혹 일급 객체 또는 고차 함수라는 표현을 들어본 적이 있을 수 있다.
어려운 용어를 사용하는 심리?
사람은 실제보다 더 놀랍게 보이도록 만들고, 어렵고 이해하기
쉽지 않은 용어를 사용하는 걸 좋아한다.
- 어려운 용어를 사용하면 전문적으로 보인다.
- "여기에 나는 분야가 뛰어나" 라는 무의식적 메시지를 전달하는 경우가 있다.
- 특정 집단(ex: 개발자, 디자인 등)에서 전문 용어로 쓰는 것은
소속감을 보여주는 방법이다.
하지만 이러한 두 표현(일급, 고차)가 'JavaScript 함수는 값으로 취급'
된다는 의미를 말하는 용어들이다.
6-1 인수로 함수 전달 가능
함수는 값으로 취급되므로,
다른 함수에 인수(argument)로 전달될 수 있다.
greeting(sayHello, '🌈 자바스크립트') // '안녕! 자바스크립트'
function sayHello() {
return '안녕! '
}
function greeting(helloMessage, name) {
console.log(helloMessage() + name)
}6-2 함수에서 함수를 반환
JavaScript에서 함수는 값으로 취급되므로,
함수에서 함수를 반환할 수도 있다.
const greeting = sayHello()
greenting('🌈 자바스크립트') // '안녕! 🌈 자바스크립트'
function sayHello() {
return (name) => {
console.log('안녕! ' + name)
}
}일급 객체(함수), 고차함수
프로그래밍 언어에서 함수가 다른 값처럼 취급될 때 "일급 함수"를 가진다 말한다.
일급 함수를 가진 언어에서 함수는 다른 함수에 인수로 전달될 수 있고,
값으로 반환도 가능하다. 뿐만 아니라, 변수에 값으로 할당될 수도 있다.
이처럼 함수를 반환하거나, 함수를 인수로 사용하는 함수를 "고차 함수"라고 한다.
