티스토리 뷰
객체란?
자바스크립트는 '객체기반의 프로그래밍 언어'입니다.
한마디로 거의 모든것이 객체로 이루어져있다는 뜻이죠.
여기서 객체란 무엇일까요??
객체란, 다양한 타입의 값을 하나의 단위로 합쳐서 만든 자료구조입니다.
한마디로 여러 자료형을 합쳐서 한개로 만들어주는 것 이라고 생각하시면 좋을 것 같습니다.
아래의 예시를 보시면 더 이해하기 쉬우실겁니다.
const car = {
name: '모닝',
weight: 500,
start: function () {
console.log('부릉부릉');
}
};
자바스크립트에서 사용되는 모든 값은 객체의 프로퍼티가 될 수 있습니다.
함수 또한 일급객체이기 때문에 프로퍼티로 사용하실 수 있습니다.
이때 사용되는 함수는 일반 함수와 구분하기 위해 메서드라고 부릅니다.
우리가 많이 사용하는 Array.indexOf()등과 같은 녀석들을 메서드라고 호출하는 이유와 같은 이유입니다 ㅎ
일급객체란?
- 변수에 할당(assignment)할 수 있다.
- 다른 함수를 인자(argument)로 전달 받는다.
- 다른 함수의 결과로서 리턴될 수 있다.
객체 리터럴에 의한 객체 생성
C++이나 자바와 같은 클래스기반의 객체지향언어는 클래스를 미리 정의하고 new 연산자를 통해 생성자를 호출하여 인스턴스를 생성함으로써 객체를 생성합니다.
하지만, 자바스크립트는 객체를 객체 리터럴을 이용하여 선언하게 됩니다.
*리터럴이란 사람이 이해할 수 있는 문자나 기호를 이용하여 값을 생성하는 표기법을 말합니다
객체 리터럴로 객체를 생성하는 방법은 간단합니다!
아래와 같이 중괄호( ' {~~} ' )를 이용하여 안에 key: value 형식으로 각각의 프로퍼티를 입력하는 방식으로 객체를 생성합니다.
아무것도 입력하지 않은 단순 중괄호만을 선언하게 되면, 비어있는 객체타입으로 판단하게 됩니다.
const person = {
name: '도토리',
age: 20
};
const emptyObject={};
person= {
...person,
sayHi:()=>console.log('반가워요!'),
};
객체를 선언한 이후에 추가로 프로퍼티나 메서드를 동적으로 추가할 수 있기 때문에 초기값을 초기화하는 것에 중점을 두지 않아도 된다는 장점이 있습니다.
프로퍼티
객체는 프로퍼티의 집합으로 이루어져있습니다.
여기서, 프로퍼티란 정확히 무엇일까요?
프로퍼티는 한마디로 키와 값의 쌍으로 이루어진 데이터를 의미합니다.
프로퍼티 키는, 프로퍼티 값에 접근할 수 있는 식별자로써의 역할을 하고, 문자열 또는 심볼값으로 지정할 수 있습니다.
프로퍼티 값은 각 프로퍼티가 갖고있는 자바스크립트의 모든 값을 의미합니다.
프로퍼티를 선언할 때에는, ' ; ' 가 아닌 쉼표를 사용하여 프로퍼티들을 구분합니다.
const car={
firstName:'kim',
'last-name':'dotori'
// - 를 사용하는 경우에 따옴표를 사용하지 않으면, 표현식으로 해석해 구문 오류를 반환한다.
};
// 프로퍼티 동적 할당
const test={};
test['keyValue'] = '나는 동적 할당이라고해';
test['']='나는 빈 키값의 프로퍼티야';
const object = {
0: '숫자키',
한글키: '한글로도 키값 지정이 가능하답니다!',
function: '예약어로도 키값이 지정 가능하지만, 예기치 못한 오류가 생길 수 있답니다!'
중복키:'키값이 중복되면',
중복키:'나중에 선언된 값이 자동으로 덮어 씌워진답니다~'
}
'스터디 자료' 카테고리의 다른 글
| [딥다이브]함수 객체의 프로퍼티 (0) | 2024.04.11 |
|---|---|
| [스코프] 함수 레벨 스코프와 렉시컬 스코프 (1) | 2024.03.07 |
| 17주 기초 교육 학습자료(11주차~14주차) (0) | 2023.10.15 |
| 17주 기초 교육 학습자료(1주차~10주차) (0) | 2023.10.15 |
| [Javascript] REST API (0) | 2022.12.13 |
- Total
- Today
- Yesterday
- html #css #코딩 #공부
- 단축평가
- 타입변환
- Vite
- yarn berry
- forEach
- Front-End
- React
- 옵셔널체이닝연산자
- Get
- TypeScript
- 공부
- 심볼
- yarn 4
- async
- 렌더트리
- 1일차
- CSSOM
- MAP
- JavaScript
- http
- 호이스팅
- set
- 자바스크립트
- DOM
- node
- defer
- delete
- JS
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 |