DATA TYPE, Object(객체) + Array(배열) 이해하기

안녕하세요 Jlight입니다.

지난 포스팅에서는 기본형 데이터 타입에 대해 알아보았는데요,

이번 포스팅은 참조 타입인 Object(객체), Array(배열), Function(함수)에 대해 자세히 알아보겠습니다.

 

그럼 들어가볼까요⁉️

 

 

 

💥 참조 타입(Reference Type) : 값이 저장된 주소값를 할당

▪️           Object

                     |

                  Array

                Function

          RegExp(정규표현식)

+ES6 : map,set,weamap,weakset

 

 

📌 Object (객체)

다수의 property 혹은 method를 하나의 이름으로 묶어놓은 집합체를 객체(Object)라고 합니다.

 

✍️ 선언 방법

객체 선언 : 중괄호 {}
객체 형태 : 이름(key):값(value)
프로퍼티 : 위 데이터의 한 쌍을 뜻한다.

 

👉 예시

 

var obj = {
    a : "hello",  //obj라는 객체에 a(key):hello(value)값을 저장
    b : 3,  //obj라는 객체에 b(key):3(value)값을 저장
}

 

 

📌 Array (배열)

순서가 있는 데이터 집합을 Array(배열)이라고 합니다. 

Object(객체)와 달리 배열은 인덱스가 0으로 시작하는  숫자형 인덱스  를 사용하며 한개의 변수의 여러개의 값을 순차적으로 저장할 수 있습니다.

 

✍️ 배열 생성

배열의 생성 방법에는 두가지 방법이 있습니다.

 

방법 1 : 리터럴 방식

배열 생성시 주로 사용하는 방법입니다. 

var name = [배열요소1, 배열요소2, 배열요소3, ...];

 

방법 2 : 배열 객체 사용

var name = new Array(배열요소1, 배열요소2, 배열요소3, ...);

 

✍️ 배열의 특징

▪️ Object(객체)와 달리 배열은 인덱스가 0으로 시작하는 숫자형 인덱스  를 사용합니다.

var jlist = new Array("a","b","c"); // jlist라는 배열 생성  
console.log(jlist[1]);  // -> 배열은 인덱스가 0으로 시작하는 숫자. 따라서 인덱스 1에 위치한 b가 출력됨

 

▪️ 자바스크립트의 배열은 배열의 요소의 타입이 다를 수 있습니다. 즉, 비균질적입니다.

var jlist = ["hello", 3, null];  // 배열의 요소는 타입에 상관 없이 가질 수 있다.

 

▪️ 배열을 할당할 때 배열 길이보다 큰 인덱스를 사용하면 자동으로 그 인덱스에 맞게 커지며 "undefined"로 채워집니다.

var jlist = ["hello", 3, null]; //크기가 3인 배열 생성
console.log(jlist[300]); // 배열의 크기보다 높은 값이지만 undefined로 출력됨.

 

▪️ 따라서 배열의  인덱스가 연속적이지 않아도 됩니다. 

var jlist = ["hello", 3, null];  // 크기가 3인 배열 생성
jlist[30] = 4;  // 순서 상관 없이 인덱스30에 4 저장.
console.log(jlist[29]); // -> undefined
console.log(jlist[30]); // -> 4

 

 

✍️ 배열의 METHOD

✔️ 값 추가 / 삭제

1. Push는 배열 끝에 값을 추가합니다.

var jlight = ["a", "b", "c"];
jlight.push("d");  // 배열 끝에 d를 추가

console.log(jlight);  // -> a,b,c,d

 

2. Unshift는 배열 맨 앞에 값을 추가합니다.

var jlight = ["a", "b", "c"];
jlight.unshift("d");  // 배열 끝에 d를 추가

console.log(jlight);  // -> d,a,b,c

 

3. POP은 배열 끝에 값을 제거합니다.

var jlight = ["a", "b", "c"];
jlight.pop();  // 배열 끝의 데이터 제거

console.log(jlight);  // -> a,b

 

4. shift는 배열 맨 앞의 값(index = 0)을 제거합니다.

var jlight = ["a", "b", "c"];
jlight.shift();  // 배열의 맨 앞의 값 제거

console.log(jlight);  // -> b,c

 

 

✔️ 정렬

1. sort는 배열을 순차 정렬합니다.

var jlight = new Array(1,4,2,3,5);
jlight.sort();
console.log(jlight);  // -> 1,2,3,4,5

그러나 sort()의 경우 문자열 정렬이 됩니다.

var jlight = new Array(1,100,2,3,5);
jlight.sort();
console.log(jlight);  // -> 1,100,2,3,5

따라서 숫자 정렬을 하기 위해, 비교함수를 사용해야 합니다.

var jlight = [100,4,1,200];
jlight.sort(function(a,b){ return a-b; });
console.log(jlight);

 

 

2. reverse는 배열을 역순으로 정렬합니다. 그러나 sort와 마찬가지로 비교함수를 통해 역순으로 정렬합니다.

var jlight = [100,4,1,200];
jlight.sort(function(a,b){ return b-a; });
console.log(jlight);

 

 

✔️ ETC

1. length는 배열의 길이를 알려줍니다.

var jlight = ["a",2,1,200];
console.log(jlight.length);

 

2. concat은 두개의 배열을 합쳐줍니다.

var jlight = ["1", "2", "3"];
var glight = ["d","e","f"];

jlight = jlight.concat(glight);
console.log(jlight);

 

3. join을 사용하면 배열값 사이에 원하는 문자를 삽입합니다.

var jlight = ["1", "2", "3"];
jlight = jlight.join("+");
console.log(jlight);

 

4. slice는 배열의 일부분혹은 부분 배열을 반환합니다.

 

형태 : array.slice(start, end-1)

 

반환되는 배열은 첫 번째 지정하는 위치부터 두 번째 전달인자가 지정하는 위치를 제외, 그 사이의 모든 원소를 포함합니다.
* -1은 배열의 마지막 원소를 가리킵니다.

var jlight = [1, 2, 3, 4, 5];
console.log(jlight.slice(1,3));  // -> 2,3
console.log(jlight.slice(1,-1));  // -> 2,3,4

 

5. splice는 인덱스 위치에 있는 요소를 제거,추가할 수 있습니다.

 

형태 : array.splice( 인덱스, 인덱스로부터 제거할 요소의 수, 인덱스로부터 추가할 요소명 );

var jlight = ["a","b","c","d","e"];
jlight.splice(2,0,"z"); //제거하지 않고 2번째 인덱스에 "z" 추가
console.log(jlight); // -> 'a','b','z','c','d','e'

jlight.splice(2,1); // 2번째 인덱스 1개 제거
console.log(jlight); // -> 'a','b','c','d','e'

jlight.splice(2,2,"m"); // 2번째 인덱스에 "M"추가 및 2,3번째 인덱스 제거
console.log(jlight); // -> 'a', 'b', 'm', 'e'

 

 

지난주에 이어 데이터 타입중에서 Object(객체)와 Array(배열)에 대해 알아보았습니다.

다음 포스팅에서는 Function에 대해 자세히 알아보겠습니다 〰❗️