JavaScript의 기초 #3 - 배열, 객체 (군집형 데이터)

오늘은 JavaScript의 데이터 타입 중에서도 하나의 변수가 복수의 데이터를 저장하는

 

군집형 데이터 array(배열)와 object(객체)에 대해 조금 더 자세히 알아보자.

1. 배열 (array)

배열도 다른 변수들과 동일하게 선언한다.

let array1 = [1,2,3,4,5,6,7];  // array 변수 선언

console.log(array1);   // array1을 출력

원하는 array의 요소 갯수를 알고 싶다면 .length 메소드를 활용하면 된다.

console.log(array1.length);  // 요소의 갯수를 구하는 method. 여기서는 7이 나온다.

1.1 배열에 요소 추가

배열에 요소를 추가하고 싶다면 .push 메소드를 황용한다.

array1.push(8);  // array1에 8을 추가
console.log(array1);

이렇게 한 줄 추가하면 array1의 마지막 자리에 8이 추가된다.

array에 array을 요소로 추가하는 것도 가능하다.

let array2 = [9,10,11];
array1.push(array2);
console.log(array1);

콘솔을 확인하면 array2가 array 형태로 array1에 추가되었음을 알 수 있다.

1.2 array의 요소 출력

array의 요소들을 하나씩 출력하고 싶다면 반복문을 활용하면 된다.

for(i=0; i < array.length; i++) {
  console.log(array1[i]);
}

array.length 메소드를 이용해 배열의 요소 갯수에 관계없이 모든 요소를 출력할 수 있다.

 

2. 객체 (object)

객체도 배열과 마찬가지로 군집형 데이터인데, 요소의 이름을 함께 저장할 수 있다.

 

key: "value" 형식으로 써주면 되는데. 이는 css와 크게 다르지 않다.

 

object는 그 요소로 함수와 다른 object를 가지는 것도 가능하다.

let obj1 = {
	    name: "sila",
            create: function () {
                    console.log('객체 내 함수')
        	    },
            obj2: {index:1, nonce:1023},
            array3: [10,20,30]
           };

참고로 여기서 함수는 이름이 없이 선언되는데, 이런 함수를 익명 함수라고 한다.

2.1 객체, 객체의 구성요소 출력

객체 전체를 출력하려면 지금까지와 같은 방식으로 console.log를 사용하면 된다.

console.log(obj1);

객체의 요소를 출력하려면 요소의 이름까지 지정해주면 된다.

console.log(obj.name);

dot(.)은 보통 하위 항목을 지정할 때 사용한다. 여기서 obj.name의 경우,

 

obj 내부의 name을 지정한다는 것을 의미한다.

console.log(obj["name"]);

 

과 같이 써주는 방법도 있다.

obj1에서 obj2에 존재하는 index를 불러오고 싶다면 다음과 같이 dot(.)을 두 번 써주면 된다.

console.log(obj1.obj2.index);    //   obj1 내부의, obj2 내부의, index를 출력