JavaScript기초 - 정리(4) 배열(array) , 객체(object)

 

이번 포스팅에서는 JavaScript의 배열과 객체 그리고 속성과 메소드에 대해 조금 더 자세히 정리해보도록 하자.

 

 

< 목차 >

1. 배열 (array)
2. 속성과 메소드
3. 객체 (object)

 

 

 

< 배열 (array) >

배열은 기본적으로 여러개의 데이터를 저장하는 데이터타입이다. 배열을 사용하면 변수 하나에 여러개의 데이터를 집어 넣을 수 있다. 배열에는 인덱스(index) 개념이 존재하는데, 배열 안의 특정 값을 호출하기 위해서는 인덱스가 필요하다.

 

배열에서 자주 사용하는 속성으로 length가 있고 메소드로는 push( )가 있다.

 

• length 속성  :  배열의 길이를 구하고 싶은 경우 사용  //  array.length
• push 메소드  :  배열에서 값을 추가하고 싶은 경우 사용  //  array.push( 추가하고 싶은 값 )

 

 

 

< 속성과 메소드 >

JavaScript 코드를 작성하다 보면 배열, 객체 등에서 자주 사용하게 되는 속성과 메소드에 대해 간략히 알아보도록 하자. 배열을 예로들어 설명해보면 배열의 길이를 구할 때 사용하는 array.length에서 length는 속성이고 배열에서 값을 추가하고 싶을 때 사용하는 array.push( )에서 push( )는 메소드이다.

 

표면적으로 보여지는 차이점을 살펴보면 다음과 같다.

• 메소드는 뒤에 ( )이 붙는다.
• 속성은 뒤에 ( )이 없다.

뒤에 ( )가 붙는 메소드는 쉽게 말해 동사 같은 느낌을 가지고 있다고 생각하면 된다. 메소드를 사용하게 되면 데이터의 값이 변하거나, 데이터들의 위치가 변하거나, 데이터의 값이 없어지거나 하는 것과 같이 데이터가 어떠한 액션을 취하게 된다. 반면 뒤에 ( )가 붙지 않는 속성은 명사 같은 느낌을 가지고 있다. 데이터가 가지고 있는 값들을 표현만 할 때 사용하게 되는 것이 속성이다. array.length를 살펴보면 array.length를 사용했을 때 array 데이터의 값이 변한 게 아니라 '데이터의 길이'라는 기존에 가지고 있었던 것을 보여주기만 할 뿐인 것을 알 수 있다. 데이터가 기존에 가지고 있는 것들 그대로를 보여주는 형태라고 생각하면 된다.

 

 

 

<예제코드>

// 배열
let arr = [];
console.log(arr)
arr = [10]
console.log(arr)  // 데이터 타입이 array
console.log(typeof arr)  // 데이터 타입을 알게 해주는 예약어 typeof
console.log(arr.length)  // 데이터 타입이 number , 배열의 길이를 알게해주는 속성
console.log(typeof arr.length)


let str = '글자형이다~'
console.log(typeof str)


arr = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
console.log(arr)

// push 배열 뒤에다가 값을 하나 추가하는 행위
arr.push(103)
console.log(arr);

// 메소드는 뒤에 ()이 붙는다.
// 속성은 뒤에 ()이 없다

console.log(arr[2])
console.log(arr[0])
let key = arr.length-1;
console.log(arr[key])


// 배열에 있는 모든 값을 출력하세요.
for(let i=0; i<arr.length; i++ ){
    console.log(arr[i])
}

for(let i=0; i<arr.length; i++){
    console.log((i+1)+"번째 배열값 : "+arr[i])
}


// 배열로 문자열 훑기
let arr_cat = [];
arr_cat = ["|\\_/|", "|q p|   /}", "( 0 )\"\"\"\\", "|\"^\"\`    |", "||_/=\\\\__|"]
for(let i=0; i<arr_cat.length; i++){
    console.log(arr_cat[i]+"\n")
}

 

 

 

< 객체 (object) >

객체는 JavaScript에서 가장 중요한 개념이라고 해도 과언이 아닐 정도로 무척이나 중요한 데이터타입이다. 배열과 마찬가지로 변수 하나에 여러개의 데이터를 집어 넣을 수 있는 군집형 데이터타입이다. 다만, 배열에서는 인덱스를 사용해서 배열 안에 있는 값들을 참조했다면 객체의 경우 key를 사용해 객체 안에 있는 데이터들을 참조하게 된다. 

 

객체(object)는 데이터를 key:value 형태로 저장한다. 생성된 객체 안에 데이터를 저장하는 공간이 있고 객체 안에 있는 여러개의 데이터들이 각각의 주소를 가지고 공간 안에 저장되어 있다고 생각하자. 이 때 특정 데이터를 저장하고 있는 주소의 이름을 key라고 하고 해당 주소에 있는 데이터의 내용을 value라고 생각하면 된다.

 

배열에서 인덱스를 사용하여 배열 안에 저장되어 있는 데이터를 참조하는 것과 마찬가지로 객체 역시 . 을 사용해서 객체 안에 저장되어 있는 데이터를 불러온다. 아래 코드에서 정의된 obj 객체를 살펴보자.

obj = {
    name: "ingoo",
    create: function(){  // 익명함수
        console.log('함수생성')
    },
    block: {
        index:1,
        nonce:1023
    },
    list: [
        10,20,30
    ]
}

생성된 obj 객체 안에 각각의 데이터들이 name, create, block, list라는 주소를 가지고 문자열("ingoo"), 함수(function()), 객체, 배열의 데이터를 저장하고 있다. obj 객체에 저장된 name이라는 데이터를 불러오기 위해서는 obj.name 형태로 불러오면 된다. JavaScript에서 . 은 안에 있는 요소들 중의 하나를 뜻하는 것이라고 생각하면 조금 이해가 쉬울 것이다. obj.name은 obj 객체 안에있는 요소들 중 name을 가리킨다. 

 

실제로 우리가 많이 사용하는 console.log( )를 살펴보면 이미 만들어져 있는 console이라는 객체 안에 log( )라는 메소드가 존재하고 있다는 사실을 알 수 있다. 지금까지 console.log( )를 이용해 브라우저의 콘솔창에서 원하는 값을 출력해서 볼 수 있었던 것은 이미 만들어져 있는 객체와 메소드를 우리가 사용했던 것이기 때문이다. 

 
이해를 돕기 위해 조금 더 설명을 보태면, obj 객체 안에 있는 create: function( )과 같이 객체를 생성할 때 value 값을 함수로 주게되면 해당 함수를 그 객체의 메소드로 사용할 수 있다. console.log( )에서 log( ) 메소드는 console이라는 객체 안에 log: function( ){ }이 존재하는 것이라고 생각하면 된다. 

obj 객체에서 볼 수 있다시피 객체 안에는 여러 데이터타입이 들어갈 수 있다. 객체 안에 함수가 들어갈 수도, 객체 안에 배열이 들어갈 수도, 심지어는 객체 안에 객체가 들어갈 수도 있다. 이러한 객체의 특징을 이용하면 수직형 데이터를 만들 수 있게 되는데 이렇게 만들어진 수직형 데이터 개념으로부터 나온 데이터베이스가 바로 NoSQL이다. 기본적으로 데이터는 옆으로 뻗어나가게끔 되어 있는데 수직형 데이터는 위, 아래로도 뻗어나갈 수 있도록 되어있다. 또한 데이터의 형태를 구현하지 않아도 강제적으로 데이터를 저장할 수 있는 형태로 구성되었기 때문에 비로소 우리가 말하는 빅데이터 세상이 열리게 된 것이다. 수직형 데이터가 가능했기에 빅데이터가 나올 수 있었던 것이다. 두서없이 내용을 전달한 것 같아 조금 요약하자면, 객체형태로 데이터를 저장하는 형태를 빅데이터라 표현하는 것이고 객체형태로 데이터베이스 구조를 만드는게 NoSQL이라고 생각하면 된다.

참고로 다른 프로그래밍 언어와 JavaScript를 비교해보면 다음과 같다.

 

• JAVA  :  객체지향 언어
• Python  :  함수형 언어
• JavaScript  :  prototype 언어  =>  prototype 형태이기 때문에 객체지향적 형태로도 만들 수 있고 함수형으로도 만들 수 있다. (prototype 형태에 대해서는 추후에 다시한번 정리해볼 예정이다.)

 

 

<예제코드>

// 데이터타입
// string
// number
// boolean
// array []
// object {}

let obj = {}
console.log(obj)

/*
    array 와 마찬가지로 군집형
    JSON == object -> JavaScript Object
    array => 변수 하나에 데이터를 여러개 집어넣습니다.
    array에는 index가 존재.
    배열 안의 특정한 값을 호출하기 위해서는 index가 필요하다
    object(객체)에는 key:value가 존재.
    데이터를 저장하는 주소의 이름을 key라고 생각하면 이해하기 쉽다
*/

obj = {name:"ingoo"}
console.log(obj)
console.log(obj.name)  // 객체에 저장된 데이터를 불러오는 방법
console.log(console
obj = {
    name: "ingoo",
    create: function(){  // 익명함수
        console.log('함수생성')
    },
    block: {
        index:1,
        nonce:1023
    },
    list: [
        10,20,30
    ]
}

console.log(obj)
obj.name // 속성
obj.create() // 메소드
console.log(obj.block.nonce)
console.log(obj.list[1])
console.log(obj.list.length)


let arr = [10, 20]
console.log(typeof arr) // JavaScript에서는 배열을 객체로 표현한다. 배열도 객체와 같다
let obj2 = {  // 이와 같은 형태로 배열이 표현되는 것이다.
    0:10,
    1:20,  
    2:30,
    length:3
}
console.log(obj2) 

// 정리
// Object는 데이터타입 중의 하나.
// 변수에 담아야 합니다.
// 객체라는 것은 단순하게 데이터를 저장하기 위한 용도로 사용하는 것이다.
// 데이터를 저장하고 난 후에 코드(조건문, 반복문, 함수 등등)를 사용해서 데이터를 조작하는 것.