배열, 객체

Joy·2022년 9월 21일
0

JavaScript

목록 보기
4/15

배열 (Array)

배열이란 연관된 데이터를 모아서 통으로 관리하기 위해서 사용하는 데이터 타입이다.
변수가 하나의 데이터를 저장할 수 있었다면, 배열은 여러 개의 데이터를 하나의 그릇에 담는 것이 가능하다.

1) 배열의 생성

	var 배열명 = [데이터1, 데이터2, 데이터3, ...]
	var a = [1,2,3]; //대괄호[]를 사용하여 배열 생성
    var b = new Array(1,2,3); //생성자 함수를 사용하여 배열 생성
    var c = new Array(); // 빈 배열을 생성 후 배열 값 추가
    c.push(1);
    c.push(2);
    c.push(3);

배열의 생성은 대괄호[]를 통해 가능하다.
안에 들어가는 데이터 값은 쉼표(,)를 통해 구분해준다.

이렇게 생성한 배열의 데이터 값들을 원소(element)라고 하며, 배열에 저장되는 데이터는 순서에 따라 번호가 배정된다.
이 번호값을 index(색인) 라고 하며, 번호는 0부터 부여된다.

2) 배열의 사용

	var member = ['데이터1', '데이터2', '데이터3']
    	console.log(member[0]); // 데이터1
        console.log(member[1]); // 데이터2
        console.log(member[2]); // 데이터3

배열명에 대괄호를 붙인 뒤 부르고자 하는 index번호를 넣어 해당 데이터를 호출 할 수 있다.

3) 배열의 효용성

회원 아이디를 제공해야 할 때 함수 사용 예시

	function get_member1(){
    	return '데이터1';
    }
    console.log(get_member1()); // 데이터1
    
    	function get_member2(){
    	return '데이터2';
    }
    console.log(get_member2()); // 데이터2
    
    	function get_member3(){
    	return '데이터3';
    }
    console.log(get_member3()); // 데이터3

함수는 여러 개의 입력값을 받을 수 있지만 출력값은 하나의 값만을 가질 수 있기 때문에
각각의 회원정보를 출력하는 함수를 만들어야 한다.

이런 한계를 극복하고 간단한 코드 표현이 가능하도록 배열을 이용할 수 있다.

	function get_members(){
    	return ['데이터1', '데이터2', '데이터3'];
    }
    var members = get_members();
    console.log(members[0]); // '데이터1'
    console.log(members[1]); // '데이터2'
    console.log(members[2]); // '데이터3'

배열은 구현이 쉬우며 연관되어 있는 정보를 한번에 다룰 수 있도록 해준다

4) 배열의 활용

배열을 순회 할 때 '배열 + 반복문' 의 조합으로 배열에 담겨 있는 값들을 하나씩 꺼내서 처리 할 수 있다.

	function get_members(){
    	return ['데이터1', '데이터2', '데이터3', '데이터4'];
    }
    var members = get_members();
    // .length; 배열에 담겨있는 값(원소)이 몇개 인지 알려주는 함수
    for( var i = 0; i < members.length; i++){
    	console.log(members[i]);
    }
    for( var i in members ){
    	console.log(members[i]);
    }
    // 해당 배열의 인덱스에 직접 접근한다. => 반복 횟수는 해당 배열의 길이가 된다.

직접 숫자를 통해 조건을 걸었다면 배열에 데이터가 추가 되었을 때 추가된 값이 출력되지 않았을 것이지만 .length;함수를 통해 길이값을 통해 자동적으로 추가된 배열만큼 가변적으로 늘어나게 할 수 있다.

5) 배열의 조작

배열에 담겨 있는 데이터를 추가/ 수정/ 삽입/ 변경 / 정렬 과 같은 일을 할 수 있도록 돕는 내장함수가 있다.

5-1) 추가 (.push(); / .unshift(); / .concat();)

원소를 배열의 끝에 밀어 넣는 것
전달된 값을 배열에 추가하는 명령으로 .push(); 사용

	var li = ['a', 'b', 'c'];
    	li.push('d');
        console.log(li);
    결과 => a,b,c,d

원소를 배열의 시작 지점에 밀어 넣는 것
전달된 값을 배열의 첫번째 원소로 추가하는 명령으로 .unshift(); 사용

	var li = ['a', 'b', 'c'];
    	li.unshift('z');
        console.log(li);
    결과 => z,a,b,c

복수의 원소를 배열에 한번에 추가하는 명령으로 .concat(); 사용

	var li = ['a', 'b', 'c'];
    	var li = li.concat(['d', 'e']);
        console.log(li);
    // 기존의 배열과 추가하는 배열을 연결하여 하나의 배열로 만든 다음 return

5-2) 변경 (.splice();)

특정 위치의 원소를 변경(제거 + 추가) 할 수 있는 명령으로 .splice(); 사용

	// .splice(index, howmany, element)
    // 1. index : 추가할 배열의 위치
    // 2. howmany : index에서부터 삭제할 원소의 수, 0이면 삭제하지 않는다.
    // 3. element : 추가하고자 하는 원소( 복수 가능 )
	var li = ['a', 'b', 'c', 'd'];
    	li.splice(1, 2, 'O');
        console.log(li);
    결과 => a,O,d

5-3) 제거 (.shift(); / .pop();)

배열의 첫번째 원소를 제거하는 명령으로 .shift(); 사용
배열의 맨 끝 원소를 제거하는 명령으로 .pop(); 사용

	var li = ['a', 'b', 'c', 'd', 'e'];
    	li.shift();
        console.log(li);
    결과 => b,c,d,e
    
    var li = ['a', 'b', 'c', 'd', 'e'];
    	li.pop();
        console.log(li);
    결과 => a,b,c,d

5-4) 정렬 (.sort(); / .reverse();)

순서대로 오름차순 정렬하는 명령으로 .sort(); 사용
역순서로 내림차순 정렬하는 명령으로 .reverse(); 사용

	var li = ['d', 'e', 'b', 'c', 'a'];
    	li.sort();
        console.log(li);
    결과 => a,b,c,d,e
    
    var li = ['d', 'e', 'b', 'c', 'a'];
    	li.reverse();
        console.log(li);
    결과 => e,d,c,b,a

배열 메소드

객체 (Object)

배열은 index에 순서가 담긴 값을 자동으로 부여 받는다.
즉, 배열은 저장된 데이터들이 순서를 가진다.

객체는 순서 없이 key와 value가 저장된다.
index로 문자를 사용할 수 있다.

1) 객체의 생성

	var 변수명 = {'데이터1' :1, '데이터2' :2, '데이터3' :3};
    // key,value
    
    var 변수명 = {}; // 비어있는 객체 활용
    	변수명['데이터1'] =1; // []를 사용해 접근
        변수명['데이터2'] =2;
        변수명['데이터3'] =3;
    
    var 변수명 = new Object();
    	변수명['데이터1'] =1;
        변수명['데이터2'] =2;
        변수명['데이터3'] =3;  

'데이터2'이름으로 저장된 값 가져오기

	var 변수명 = {'데이터1' :1, '데이터2' :2, '데이터3' :3};
    	console.log(변수명['데이터2']);
        

2) 객체의 반복

객체에 저장된 데이터를 기준으로 반복작업을 하는 방법

	 var grades = {'데이터1' :1, '데이터2' :2, '데이터3' :3};
     for(var name in grades){
     	console.log('key : '+name+'value :'+grades[name]);
     결과 => key : 데이터1 value :1
     		key : 데이터2 value :2
     		key : 데이터3 value :3
            
    // in 뒤에 따라오는 배열의 key값을 in 앞의 변수에 담아서 반복문을 실행한다.

반복문이 실행될 때 변수 name값으로 데이터1, 데이터2, 데이터3 이 순차적으로 할당되기 때문에
grades[name]를 통해서 객체의 값을 알아 낼 수 있게 되는 것이다.

객체 안에는 문자, 숫자 뿐 아니라 객체도 담을 수 있고, 함수도 담을 수 있다.

	var grades = {
    	'list' : { 데이터1' : 값1, '데이터2' : 값2, '데이터3' :3 },
        'show' : function(){
        	console.log('show 실행됨');
        }
    };
    
    console.log(grades['list']['데이터1']);
    console.log(grades['show']());
    결과 => 10 , show 실행됨

this는 함수가 속해 있는 객체를 가리키는 변수이다.

	var grades = {
    	'list' : { 데이터1' : 값1, '데이터2' : 값2, '데이터3' :3 },
        'show' : function(){
        	console.log(this.list);
        }
    };
    grades['show']();

console.log 안에 있는 this는 grades를 의미하고
그것은 console.log(grades.list)와 같은 코드이다.

profile
🐣

0개의 댓글