.png)
자바스크립트를 공부하면서 객체에 대한 개념을 잡는데 꽤 힘든 고비가 몇 번 있었다.😂
그래도, 객체에 대해서 공부하면서 느낀점은 양파같은 매력이 있다는 점이다. 까면깔수록 배울 것이 많은 객체에 대해서 정리해보려한다.✍️
1. 객체 지향 프로그래밍이란?
객체 지향 프로그래밍은 컴퓨터 프로그램을 명령어의 목록으로 보는 시각에서 벗어나 여러 개의 독립된 단위, 즉 "객체"들의 모임으로 파악하고자 하는 것이다. - wiki pedia
프로그래밍에서 필요한 데이터를 추상화시켜 상태와 행위를 가진 객체를 만들고 그 객체들 간의 유기적인 상호작용을 통해 로직을 구성하는 프로그래밍 방법이다. https://jeong-pro.tistory.com/95 (개념에 대해서는 잘 정리하신 분이 계셔서 인용하였다~)
2. 객체란?
자바스크립트는 객체 기반의 스크립트 언어이다. 자바스크립트의 객체는 키(key)와 값(value)로 구성된 프로퍼티들의 집합이다. 배열과 비교하자면 배열은 인덱스로 순서대로 식별하지만 객체는 순서가 아닌 key로 값에 접근한다.
자바스크립트를 제대로 공부하기 전에 자바를 공부하면서 객체에 접근하는 방법에 대해 .(dot)노테이션 방법으로만 접근하는 방법만 머리 속에 남아 있었는데, 자바스크립트에서 객체에 접근 할 수 있는 방법은 두가지 이다.
1) 객체 접근 방법 두 가지
1) 마침표(.) 연산자를 사용하며, 접근하려는 객체명은 왼쪽에, 프로퍼티 명은 오른쪽
2) 대괄호([])를 사용하여, 접근하려는 객체명은 왼쪽에, 프로퍼티 명은 쌍따옴표("")와 함께 대괄호 안에 작성
대괄호 안에는 변수가 들어갈 수 있다! 오호!
예를 들어 plan1 객체의 name 이라는 프로퍼티에 접근하고 싶을 때,
아래와 같이도 할 수 있습니다.
let obj = { name: "Basic" }; console.log(obj[propertyName]); => Basic이 출력
키 이름이 숫자이거나 스페이스가 포함되었을 때 접근하는 방법
스페이스가 포함된 키는 대괄호로 접근
console.log(difficult['my name']);
숫자로 된 키도도 대괄호로 접근해야 합니다.
console.log(difficult['33']);
2) 객체의 키를 변수로 접근하는 방법
변수를 []로 넣어주고, 객체의 값에 또 다른 변수를 할당 할수 있다.
const verb = 'developes'; const project = 'facebook'; information[verb] = project
3) 객체를 순회하는 방법
3-1) Object.keys() / Object.value() / Object.entries()
Object.keys 메소드는 어떤 객체가 가지고 있는 키들의 목록을 배열로 리턴하는 메소드
const obj = { name: 'sammy', height: 170, age: 20 }
Object.keys(obj) // ['name', 'weight', 'age']
Object.value는 객체가 가지고 있는 값들의 목록을 배열로 리턴하는 메소드
const values = Object.values(obj) // ['sammy', 170, 20]
const entries = Object.entries(obj)
entries === [
['name', 'sammy'],
['height', 170],
['age', 20]
]
3-2) for-in /
for in 문은 Object의 key를 순회하기 위해 사용되는 반복문. 배열을 순회 하는 것도 가능하다.
for (let key in obj) { const value = obj[key]
console.log(key) => 'name', 'weight', 'age' console.log(value) => 'sammy', 170, 20 }
for (let i in arr) { console.log(i) console.log(arr[i]) }
기본적인데 몰랐던 것들과 헷갈렸던 부분들을 다시 한번 기억하고 나중에 헷갈릴때 찾아보고자 정리하고자 써보았다.😀
그리고 여러가지 객체 예제를 풀면서 스스로 로직을 짜보는 것은 어렵지만 정말 재미있었다.😇 꾸준함을 잃지 말고 내 앞의 문제들을 하나씩 풀어가야겠다.![]
