[220104] 배열과 객체 / create:function(), 객체 안에 객체or배열

목차

1.   배열과 객체

2.   객체 안에 추가하기

3.   배열과 객체의 데이터타입

---

 

배열 (array) 과 객체 (object)

 

배열이랑 객체가 뭐더라

//배열 array
// 배열명 = {값, 값, 값}
let arr = [1, 2, 3];


//객체 object
//key = 값 이름
//value = 값
//객체명 = {key:value, key:value}
let obj = {name:'Joo', age:29}

가장 큰 차이점은 값을 저장하는 방식. 쉽게 생각해보자면,

• 배열은 arr이란 아파트에 "100호에 1이 살고, 101호에 2가 살고, 103호에 3이 산다."
• 객체는 obj란 아파트에 "name이란 방에 'Joo'가 살고, age란 방에 29가 산다."

방호수로 기억하느냐, 유치원반처럼 개나리반, 진달래반처럼 이름을 붙인 방으로 기억하느냐로 생각하면 쉽다.

이걸 으른의 단어로 바꾸자면, 방호수와 이름을 붙인 방을 index라고 바꿀 수 있다. (key도 결국 index다.)

결론으로는 value만 저장하는 배열 & key:value 형식으로 기억하는 객체 라고 정리를 할 수 있다.

 

 

그렇다면, 배열은 어떻게 저장이 되는걸까?

아무 저장공간에나 띡띡 밀어넣어서 너는 오늘부터 방번호 100번임! 이러는걸까? 나중에 찾는건 안 복잡할까? 컴퓨터라 괜찮나?

컴퓨터 사정은 컴퓨터에게 맡기자. 0이랑 1만으로 이루어진 컴퓨터 말을 못 알아들으니까 이렇게 프로그래밍 할 수 있는 언어가 생긴거다!

• 배열을 저장하는 공간의 주소 = 2진수로 이루어진 컴퓨터만 알아듣는 주소
• 최초로 저장하는 공간의 주소 00ffff1 -> 거기에 저장하는 값 1 -> 주소에 저장하면서 생기는 인덱스배열값 0
• 00ffff10 옆의 방 00ffff14 -> 거기에 저장하는 값 2 -> 주소에 저장하면서 생기는 인덱스배열값 1

 

 

어떻게 호출하더라

//위 코드 블럭을 이어서 보자
//배열을 호출하는 법
//배열명[index값]
console.log( arr[0] )


//객체를 호출하는 법
//객체명.key이름
console.log( obj.name )

index값을 처음 배울때 계속 헷갈렸던것! 0번부터 늘 시작한다! 그러니 arr[0]일때는 가장 첫번째 배열값인 1을 불러와야한다.

 

 

객체 다시 보기

// 객체 작성법
// obj라는 변수에 대입연산자를 통해서 무엇을 만들었나요? 객체를 만듭니다. 쨔잔

let obj={};
console.log(obj);
// 타입은 object
// 콘솔로 열어보면 length가 주어지지 않아서 길이는 구할 수 없음

let test = {name:"ingoo"}
console.log(test.name);
//name이라는 속성 안에 "ingoo"라는 텍스트를 넣은 객체를 부를 수 있는 방법

//응용!
console.log()
// console : 브라우저가 만든 console이라는 객체
// . : 안에 있는 
// log : log라는 메소드

// 브라우저가 만들어놓은 기본 함수기때문에 따로 console이라는 함수를 만들지 않아도 된다.
// 그래서 예약어는 사용하지 못하는것! 왜? 브라우저가 이미 만들어놨으니까.
// 함수명은 중복될 수 없다

 

군집형 : 변수 하나에 데이터를 여러개 넣는 형태

배열은 데이터를 순서대로 집어넣음. 주소가 넘버링이 되어있음.

객체 안에 있는 주소를 문자열로 처리가 가능.

 

공간이름 test

이 공간을 확대하면 아래 표처럼 또 나뉜다.

 

데이터 : ingoo

그 안에 저장되어 있는 데이터.

 

데이터 : ingoo

주소 : name

그 데이터가 있는 공간의 주소, name

 

 

---

 

객체를 추가하기

let block = {
	name: "ingoo",

	create : function() {},
    //create(예약어)라는 공간을 만들고,
    //function() --> 익명함수. 이름 없이 함수 생성가능
    
    //이름을 붙여서 만듬
    create:function apple(){}
}

주소 : name / 데이터 : ingoo

주소 : create / 데이터 : 함수(function)

 

 

객체를 실행하기

• 자, html처럼 생각하면 쉽다.
• body > #wrap > #container > #contents > div : 가장 큰것부터 차례대로 안쪽으로 들어와서 결론적으로 호출하려는 div를 호출.
• block > create > function : 최종적으로 fucntion(함수)를 부르고 싶으니까,
• block.create() 이렇게 된다.
• block(객체이름) + .(안에 있는 걸 부르겠다) + create() (메서드)
• 헷갈리지 말아야할것 ---> .name(속성) / .create() (메서드)

 

function에 이름을 쓰면 뭐가 다르지?

(왼쪽) function() / (오른쪽) function apple()

 

 

---

 

객체 안에 객체를 넣기

let block = {
	
    ...
    
    //객체 안에 객체를 넣는다! 마트료시카!
    //블록체인이 이런식으로 굴러감
    
	apple : {				
    //apple이라는 메서드를 만듬
    
    	index : 1,		
        //index 속성값 1
        
        nonce : 1023	
        //nonce 속성값 1023
    }
}

 

• block
  
  • name : ingoo
  • create : function()
  • apple
    • index : 1
    • nonce : 1023

 

이렇게 구조가 짜져있다고 볼 수 있음.

이렇게 객체형태로 데이터를 저장하는 형태를 빅데이터라고 하고, 객체형태로 데이터베이스를 만드는게 NOSQL 기술

 

출력할때는 block.apple.nonce --> nonce는 속성이므로 () 붙지 않음. 왜? 함수가 아니니까.

 

 

---

 

객체 안에 배열 넣기

let block = {
	
    ...
 	
    //배열 넣기
    list : [			//list라는 속성을 만듬 : 데이터 타입은 배열
    	10, 20, 30		//배열값
    ]
 }
 
 
 //출력할때는 console.list[1] 이렇게 가능
 //바깥부터 차근차근이 포인트

 

(왼쪽) 여태 작성한 코드 / (오른쪽) 개발자도구>콘솔에서 본 코드

 

 

---

 

 배열은 왜 객체와 같이 데이터 타입이 object로 나오지?

배열에 관한 기본 설명은 아래 링크로 : https://hancoco.tistory.com/21

[220204] 배열 array, length, typeof, push

 

//배열 arr은
let arr = [10,20,30]

//객체 obj와 같은 구조
let obj={
	0:10,
    1:20,
    2:30,
    length:3
}

 

object는 어쨌든 데이터를 담아서 써야하는 저장수단이라서 그렇다. 목적이 데이터 저장임.

그래서 데이터 저장 공간을 만들고 거기에 저장하는 기능을 가지고 있는 것.

 

그러면 자바스크립트는 왜 배열을 객체로 만들었는가?

자바 : 객체지향 언어

파이썬 : 함수형 프로그래밍

자바스크립트 : 프로토타입 형태의 언어 -> 객체지향적, 함수형