본문 바로가기
코딩도전기/Java script

CODO DAY6_Java Script(배열&차원&객체)

by 코도꼬마 2023. 2. 8.

배열

 

Shallow copy

  • var a = [1,2,3,4,5];
    var b = a;
  • 두 개의 배열 관계는 복사라기 보다는 링크되어 연결된 상태임
  • (값이 한개가 아니라 여러개로 각각 저장하면 메모리를 많이 차지하여 따로 저장하지 않고 링크시킴)
  • 각 배열의 값을 개별적으로 변경하여도 같은 배열을 사용하기 때문에 변경한 값이 모든 배열에 반영됨
var a = [1,2,3,4,5];
var b = a;
console.log('a : ' + a.valueOf());    //a : 1,2,3,4,5
console.log('b : ' + b.valueOf());    //b : 1,2,3,4,5

a[0] = 50;
b[4] = 100;

console.log('a : ' + a.valueOf());    //a : 50,2,3,4,100
console.log('b : ' + b.valueOf());    //b : 50,2,3,4,100

 

  • 그럼 배열복사는 어떻게 해야하나?
//하나하나 복사해야 함
var src = [1,2,3,4,5];
var dst = [];

//src.length를 이용해서 반복문으로
for(var i=0; i<src.length; i++){
    dst.push(src[i]);
}
       
console.log('src : ' + src.valueOf());  //src : 1,2,3,4,5                    
console.log('dst : ' + dst.valueOf());  //dst : 1,2,3,4,5

 

 

차원

  • 1차원 배열([]), 2차원 배열([][]), 3차원 배열([][][]) 등 다차원 배열을 활용 할 수 있다.
  • 다차원 배열의 개념을 아파트와 방의 개념으로 생각   ex) [1층][2호][방0]

 

TEST

  • 아파트(2차원 배열) 만들기
//5층 5호
var royal = [
[0,1,2,3,4],
[10,11,12,13,14],
[20,21,22,23,24],
[30,31,32,33,34],
[40,41,42,43,44]
];
console.log(royal);

//3층 2호 값
console.log(royal[3][2]);    /32
//2층 2호 값
console.log(royal[2][2]);    /22
//4층 4호 값
console.log(royal[4][4]);    /44

 

  • 아파트(3차원 배열) 만들기
//방, 호, 층
var ho = [0,1,2];
var floor = [];
var apart = [];

//apart = [[],[],[],[],[]];
//apart[0][0] = [0,1,2];

for(var f=0; f<5; f++){
    apart.push([]);
    for(var h=0; h<5; h++){
        console.log(f + 'F ' + h + 'H')
        apart[f][h] = [0,1,2];
    }
    
//0층 2호
//js는 3차원 배열을 기본적으로 지원하지 않음(실행되지 않을 수 있음)
// apart[0][2][0]='철수';
// apart[0][2][1]='영희';
// apart[0][2][2]='영수';   
// console.log('0층 2호', apart[0][2]);     

//그래서 이런 방법으로 넣어주는 것이 좋음
apart[0][2] = ['철수','영희','영수'];
console.log('0층 2호', apart[0][2]);
//1층 3호
apart[1][3] = ['수연','명아','지연'];
console.log('1층 3호', apart[1][3]);

console.log(apart);
}

/* 아래 방식을 사용하면 shallow copy로 인해서 수정 시 다른 데이터도 영향을 받음
//5개 호를 하나의 층으로 넣는다
floor.push(ho);
floor.push(ho);
floor.push(ho);
floor.push(ho);
floor.push(ho);
console.log(floor);

//이렇게 만들어진 층을 apart에 넣는다(한 층 완성)
apart.push(floor);
apart.push(floor);
apart.push(floor);
apart.push(floor);
apart.push(floor);
*/

 

 

 

객체(Object)

  • 여러 데이터를 담을 수 있는 것은 array([])와 Object가 있다.
  • Object는 어떤 값이든 담을 수 있다.
  • Object 안에 담긴 값을 우리는 속성(attribute)라고 부른다.
  • 인덱스가 문자열인 배열(순서X)

 

Object 만드는 법

//object 만드는 법 1
var car = {'type' : 'Fiat', 'model' : 500, 'color' : 'white'};
console.log(car);

//object 만드는 법 2
var person = {};

//object 만드는 법 3
var computer = new Object();

 

Object에 데이터 넣는 법

//object에 데이터 넣기 1
person.name = 'lee';
person.gender = 'male';
person.age = 26;
person.married = false;
console.log(person);

//object에 데이터 넣기 2 - object는 인덱스가 문자열인 배열 //['']안에 숫자대신 문자열을 삽입 
computer['cpu'] = 'octa core';
computer['ram'] = '16GB';
computer['hdd'] = '2TB';
computer['game'] = 'false';
computer['price'] = '1400000';
console.log(computer);

 

object 안에 함수 넣는 법

//객체.함수이름 = function(){}으로 선언되기 때문에 function 다음에 함수이름 작성하지 않아도 됨
person.work = function(){
    console.log('일을 한다');
};

//test(); //변수 안에 함수를 선언하면 호이스팅이 안됨
var test = function(){
    console.log('변수 안에 함수');
};
test(); //변수 안에 함수가 들어갈 수 있다

console.log(person.name);
person.work(); //함수 실행(안에 있는 콘솔이 실행됨)
console.log(computer.cpu); //배열 형식으로 넣으면 자동완성 지원 안 됨
console.log(computer['ram']); //당연히 이런 형태로도 불러 올 수 있음 *중요*

 

 

하나씩 꺼내기

var nums = [1,2,3,4,5,6,7,8,9];
//for : 인덱스와 값을 알 수 있다. / 시작과 끝을 정할 수 있다.
for(var i=0; i<5; i++){
    console.log(i + ':' + nums[i]);
}

console.log(nums);

console.log('___________________________________________________');

//forEach : 인덱스와 값을 알 수 있다. / 처음부터 끝까지 전부 실행  *많이 사용*
nums.forEach(function(item,idx){
    console.log(idx + ' : ' + item);
});

//for of : 값은 알 수 있지만 인덱스는 알 수 없음
for(item of nums) {
    console.log(item);
}

console.log('___________________________________________________');

//object 꺼내기
var computer = {};
computer['cpu'] = 'octa core';
computer['ram'] = '16GB';
computer['hdd'] = '2TB';
computer['game'] = false;
computer['price'] = 1400000;

//object의 키 꺼내기 
//key : 객체의 속성 이름
//Object.keys() : 주어진 객체의 속성 이름들을 배열로 반환
var keys = Object.keys(computer);  
console.log(keys);  //object의 키를 배열로 가져옴

//키를 이용해서 값 꺼내오기
for(key of keys) {
    console.log(key);

    //변수 안에 값을 키로 사용할 수 있음
    console.log(computer[key]);
}