항상 자바스크립트를 발등에 떨어진 불을 끄기 위해서 써오다 보니, 기초가 부족하다는 것을 뼈저리게 깨닫고 다시 기초부터 공부하는 중이다. 밑빠진 독에 물 붓는 식으로 공부하다보니 공부했던것도 콸콸 새나가는 중이라 작은 것도 기록하려 한다.
아이고 공부했던 것들 다 샌다
객체와 배열
자바스크립트 공부하면서 한 번쯤은 잡고 넘어가야 할 것 같아 기록해둔다.
자바스크립트를 처음 공부하다보면 한번쯤은 객체와 배열이 헷갈리는데 나만그랬나, 그때 도움이 되길 바라며...
1. 객체(Object)
한줄로 요약하자면, 자바스크립트에서 복잡한 자료를 표현할 수 있는 데이터 타입이다.
객체는 하나의 값이 아니라 정보를 지니고 있는 속성(property)의 집합으로 이루어져 있다.
자바스크립트에서 객체를 선언하기 위해서는 중괄호{}를 사용한다.
let empty_object = {};짠, 객체 하나를 생성했다.
이 상태에서 empty_object를 확인하면 undefined임을 확인할 수 있다.
아무런 내용이 없기 때문에 빈 객체는 undefined 값을 갖는다.
이제 속성을 가지는 객체를 만들어보자.
let jordy = { name: "jordy", kind: "dinosaur", job: "취업준비생"} jordy 라는 객체를 만들었다!
이 객체에는 3가지 속성이 있는데, name, kind, job 이다.
위와 같이 자바스크립트에서 객체를 생성할 때는 중괄호{} 를 사용하고, 속성의 값을 지정할 때는 콜론: 을 사용하며, 속성을 여러 개 정의할 때는 쉼표, 를 사용한다.
모든 데이터 타입은 객체의 속성 값이 될 수 있다.
객체도 객체의 속성 값이 될 수 있고, 함수 또한 객체의 속성 값이 될 수 있다.
let jordy = {
name: "jordy",
kind: "dinosaur",
job: "취업준비생",
friends: {friend01: "앙몬드", friend02: "스카피", friend03: "케로베로니"}
}이제 객체의 속성에 접근하는 방법을 알아보자.
객체의 속성에 접근하는 방법은 두 가지가 있는데, 하나는 마침표. 를 사용하는 것이고 다른 하나는 대괄호[] 를 사용하는 것이다.
위에서 만든 jordy 객체의 job 속성에 접근해보자.
- 마침표를 사용해서 접근하기
객체이름.속성이름으로 접근한다.
=>jordy.job - 대괄호를 사용해서 접근하기
객체이름["속성이름"]으로 접근한다.
=>jordy["job"]
두 가지 방법중에서 편한 방법으로 접근하면 되는데, 개인적으로는 마침표를 사용하는 것이 편하다.
2. 배열(Array)
배열은 여러 값이 연속으로 저장된 공간을 의미한다.
객체와 비교하자면,
- 객체: 속성 이름과 그에 대응하는 값의 집합
- 배열: 값의 나열
이라고 할 수 있겠다.
배열의 값들은 원소(element) 라고 불리는데, 이 원소들은 인덱스(index) 라고 불리는 숫자 주소를 통해 접근이 가능하다.
인덱스를 통한 접근을 알아보기 위해 새 배열을 하나 만들어보자.
배열은 대괄호[] 를 이용해 정의한다.
let empty_array = []짠. 비어있는 새 배열이 정의 됐다.
객체와 마찬가지로, 비어있는 배열은 undefined 의 값을 가진다.
undefined는 마음에 안 들기 때문에 값을 가지는 배열을 새로 만들어주겠다.
let niniz = ["jodry", "scappy", "angmond"]귀여운 배열이 만들어졌다.
위와 같이 자바스크립트에서 배열을 생성할 때는 대괄호[] 를 사용하고, 배열의 원소들을 여러 개 정의할 때는 쉼표, 를 사용한다.
이 귀여운 배열은 세 개의 원소를 가지는데, 지금은 모든 원소들이 동일한 타입(string)이지만 객체와 마찬가지로 배열의 원소들은 어떤 타입이든 상관없다. 모든 데이터 타입은 배열의 원소가 될 수 있다.
또한 배열의 원소들은 같은 타입일 필요가 없다. 정수형, 불형, 객체, 배열... 원하는걸 넣도록 하자.
객체는 속성에 접근하기 위해서 속성이름을 사용했다.
하지만 배열은 원소에 원소이름이 따로 존재하지 않는다. 따라서 배열의 원소에 접근하기 위해서는 이름이 아니라 다른 값을 사용한다.
배열은 인덱스(index)라고 불리는 숫자 주소를 통해 원소에 접근한다.
귀여운 배열 niniz 의 원소 중 하나인 scappy 에 접근해보자.
scappy 는 배열의 두 번째 원소이다. 따라서 이 원소의 숫자 주소, 즉 인덱스는 1이다.우리는 0부터 센다
인덱스는 배열과 마찬가지로 대괄호[] 를 사용해 표현한다.
인덱스를 알고 있다면, 우리는 배열이름[인덱스] 를 통해 배열의 원소에 접근할 수 있다.
따라서 원소 scappy는 niniz[1] 을 통해 접근 할 수 있다.
이제 우리는 객체와 배열을 구별할 수 있다!!
객체는 이름과 값 쌍들의 집합, 배열은 값만 있는 원소들의 집합.
객체는 주로 속성으로 구분해야 하는 복잡한 데이터 타입을 나타낼 때 사용되고, 배열은 비슷한 타입이나 값을 관리해야 할 때 사용된다. 객체를 사용해야 하는 데이터에 배열을 사용하면 관리하느라 머리 빠질 수 있으니 객체와 배열을 잘 사용하자.☺️
