javaScript. (2) 객체(Object)와 배열(Array)

1. 객체 (Object)

 

- 현실의 사물을 프로그래밍에 반영한 것.

 

예> 현실에 존재하는 유저를 객체를 통해 프로그래밍에 반영할 수 있다.

let user = {
    Name: 'yjin', 
    Age: 23,
    Tel: '010-0000-0000', 
    Gender: 'Female'
};

위와 같이 user라는 변수에 { } 로 감싼 덩어리를 대입한 것을 알수 있다.

{ }로 감싼 덩어리가 바로 객체(object)에 해당한다.

 

객체의 부분별 이름을 살펴보자.

 

 

 

 

📌 속성 (Property)

 

    Name: 'yjin' , 
    Age: 23

 

과 같이 콤마(,)로 구분되는 것을 객체의 속성(Property)이라고 한다.

- 위 예시에는 총 4개의 속성이 존재하는 것.

 

속성끼리는 쉼표로 구분해준다.

꼭 줄바꿈을 해야하는  것은 아니므로, 아래와 같이 표현할 수도 있다.

let user = {Name: 'yjin', Age: 23, Tel: '010-0000-0000', Gender: 'Female'};

 

 

📌 키(Key)와 값(Value)

 

속성은 키 : 값의 관계로 이루어져있다.

 

키(Key)는 속성명이라고 보면 되고, 값(Value)은 말 그대로 속성의 값을 의미한다.

 

- 키는 문자열만 가능하다. (따옴표가 없어도 된다. 변수명과는 달리 띄어쓰기 가능)

- 속성값은 어떤 값이든 상관없다. (객체의 속성값으로 객체가 와도 된다.)

- 속성값이 함수인 것을 메소드(Method)라고 부른다

 

 

 

 

 

❗ 객체의 속성값을 사용하려면?

 

 user.name;  // 'yjin'
 user['name'];   // 'yjin'

[ ] 안에 속성명(key값)을 적어서 접근할 수도 있다. (단, 반드시 ' ' 안에 작성해야함)

그러나 보통 마침표(.)를 이용한다.

 

어쩔 수 없이 [ ] 안에 적어야 하는 경우

- 속성명(key 값)에 띄어쓰기가 존재하는 경우.

 

 

 

❗ 객체 안에 속성값으로 객체가 들어가는 경우

 

let user = {
	name: 'yjin',
    age: 23,
	body: {
    	height: 180,
        weight: 65
    }
};

user.body.height;    // 180

user이란 변수 = 객체

user 객체의 속성으로 body가 있는데, 그 값이 객체인 것이므로

객체의 속성에 접근할 때 처럼 마침표(.)로 점점 더 안으로 들어가면 된다.

 

 

 

❗ 객체의 속성을 삭제하는 방법 - delete

delete user.body.height;

user.body;  // {weight: 65}

삭제할 속성에 접근하고, 앞에 delete 키워드를 붙여주면 된다.

 

 

 

 

___

 

 

💡 new 키워드를 사용하는 방법

 

const user = new Object();
user.name = 'yjin';
user.age = 23;
user.body = new Object();
user.body.height = 180;
user.body.weight = 65;

 

위와 같이 new 라는 키워드로 객체를 만들 수도 있다.

보통은 new를 사용하기보다는 { } 안에 바로 만드는 것이 권장사항이다.

 

 

new String()이나 new Number()과 같이 new 키워드로 문자열이나 숫자도 만들 수 있다. 그러나, 우리는 'yjin'이나 180과 같이 직접 값을 작성했었다. >> 리터럴(Literal)

 

 

📌 객체 리터럴 (Object Literal)

 

new를 사용하지 않고 { } 를 사용해서 만든 객체.

** 리터럴(literal) = new를 사용하지 않고 만드는 것.

 

 

 

객체 중에서는 특수 객체가 존재하는데,

함수(Function)과 배열(Array)이다.

 

 

---

 

2. 배열 (Array)

 

- 배열은 [ ] 로 감싸서 나타내고, 안에는 무엇이든 들어갈 수 있다. (배열 안에 배열이 들어가도, 객체가 들어가도 OK)

- 배열 안에 들어간 것들을 요소(item)라고 부른다.

- 배열의 각 요소들을 콤마(,)로 구분하면 된다.

 

- 자바스크립트는 배열의 길이를 미리 정할 필요가 없다.

 

etc. 배열(Array)과 리스트(List)

위 글에서는 배열(array)는 선언시 지정한 크기를 변경하는 것이 불가하다고 나와있지만

자바스크립트에서는 미리 정할 필요 없고, 안에 요소에 따라 자동으로 조정 가능하다.

 

 

 

 

 

❗ 객체와 배열의 차이점

 

객체에서는 속성이 key-value 값으로 구성되어있지만,배열의 요소는 key값이 존재하지 않는다.

그냥 값(value)들만 순서대로 나열되어있다.

 

>> 키가 필요 없고 값만 많이 나열하고 싶을 때 배열을 이용함.

 

 

 

___

 

💡 new 키워드를 사용하는 방법

 

배열은 자동으로 키가 0, 1, 2, 3, ... 순으로 주어진다.

이 키를 index라고 한다.

 

const animal = ['panda', 'elephant', 'duck', 'rabbit', 'hamster'];


animal[0];  // 'panda'
animal[3];  // 'rabbit'

animal[animal.length-1]; // 'hamster'

 

객체에서도 속성값을 불러올 때 [ ] 안에 키값을 적듯이,

배열에서는 [ ] 안에 인덱스 숫자를 적어주면 된다.

 

 

 

** 자바스크립트에서는 0이 첫번째이다.

 

 

 

 

 

📌 배열 리터럴 (Array Literal)

 

배열도 new 키워드로 만드는 방법도 존재한다.

그러나, new를 사용하는 것 보다는  [ ] 안에 넣는 것을 자주 사용하고, 권장사항이다.

 

new를 사용하지 않고, [ ] 만으로 만든 배열을 배열 리터럴 이라고 한다.

 

 

---

REFERENCE

https://www.zerocho.com/category/JavaScript/post/572c6f759a5f1c4db2481ee3

(JavaScript) 객체(Object)와 배열(Array)

이 포스팅은 zerocho님의 javascript 강의와 책을 보고 작성한 글입니다.

공부+기록 용으로 작성한 것이며, 자세한 것은 위 포스팅을 참고하세요!