pre-training JavaScript (6) 배열 , 객체 (오브젝트)

💻 국비 6일차

---

 

📚 배열

• 배열 생성하기 

// 배열생성해보자

// 배열 객체를 생성하고 참조변수에 배열객체의 참조값을 대입
// 참조변수는 배열객체를 참조하고있으며 , 배열객체에 속성과 기능을 
// 사용할 때는 참조변수를 사용해야한다

let arr1 = [];
let arr2 = ["김유신","홍길동","이순신","김시민"];
let arr3 = [100 , 100 , 70 ,50 ,70 ,80];

console.log(arr1.length);
console.log(arr2.length);
console.log(arr3.length);

---

📌 참조변수 , 참조값 ?

JavaScript에서 데이터 타입 2가지

• 원시 타입 :  string, number, boolean, null, undefined, symbol
• 객체 타입 :  Array, Object, Function

 

• 참조변수

let arr1 = [];

• arr1은 배열객체를 참조하는 변수 즉  '참조 변수' , 메모리에 저장된 배열객체의 위치를 갖고 있다.
• 배열 같은 참조 데이터는 실제 데이터를 메모리의 어딘가에 저장하고 나서 그 위치인 '주소' 를 변수에 저장한다

let arr = [1, 2, 3];

• 변수 arr은 실제로 배열의 값을 저장하지 않고 저장된 메모리의 위치를 가리키고 있으며
  arr을 통해 배열의 접근하거나 추가하는 작업을 할수 있다.
• 반대로 원시데이터 는 변수에 실제 값이 저장되어있다  

let number = 1;

let arr =[1,2];

❗  '변수' number는  1이라는 값을 직접 저장하고 있고 arr은 '참조변수'로 배열이 저장된 메모리의 주소를 저장하고 있다

 

•  참조값

• 참조 값은 변경 가능한 값이다.
• 참조 값을 변수에 할당하면 변수에는 참조 값이 저장된다.

let a = { name: "gidor" };
console.log("초기 a의 값:",a.name);

let b = a;
b.name = "Han";

console.log("이후 a의값 :",a.name);
console.log("바뀐 b의 값:",b.name);

a와 b 변수에는 객체의 주소가 저장되어있다
재할당 없이 하나의 변수를 통해 직접적으로 수정하면 다른 변수에서도 그 변경사항이 반영된다.

❗ 참조 타입은 실제 값이 아닌 참조값이 전달된다. 즉 참조 값이 저장된 메모리 주소가 전달된다.

 

 

---

• 비어있는 배열을 만들어서 값을 추가하기.

// 배열 객체를 생성하고 , 배열에 값을 저장하기


// 배열을 생성할 때 , 배열의 각 요소에 값을 미리 저장하기
let arr1 = [100 , 80 ,60 , 70, 100];
let arr2 = ["김시민","김유신","곽재우","이순신","권율"];

// 비어있는 빈 배열을 생성하고 값을 추가하기
let arr3 = []; // 길이가 0 인 비어있는 배열을 만들었다.
arr3[0] = "서울";  // 인덱스가 0 인 곳에 값을 저장했고
console.log("arr3이 참조하는 배열 -> "+arr3);
arr3[1] = "인천";  // 1번 방에 저장 했다고 생각하면 편함.
console.log("arr3이 참조하는 배열 -> "+arr3);
arr3[2] = "대구";  // arr3가 참조하는 배열객체 2번방에  값을 대입
console.log("arr3이 참조하는 배열 -> "+arr3);
arr3[3] = "부산";
console.log("arr3이 참조하는 배열 -> "+arr3);
arr3[4] = "광주";
console.log("arr3이 참조하는 배열 -> ",arr3);

 

 

✔ 신기한 부분 

console.log("arr3이 참조하는 배열 -> "+arr3);
console.log("arr3이 참조하는 배열 -> ",arr3);

// " " ,  와  " " + 
// 두 개의 값이 서로 다르게 나옴
// 첫번째는 문자열로 서울 , 인천 , 대구 , 부산
// 두번째는 배열 [ '서울', '인천', '대구', '부산', '광주' ]

 arr3 배열이 문자열 결합으로 형변환이 되어서 문자열  출력이 되었다
간단한 배열인 경우 아무 문제 없는데 복잡한 객체나 다차원 배열의 경우  출력 결과를 얻기 힘들다한다.

두번째는 arr3 배열이 문자열로 형변환되지 않고  그 자체의 형태로 출력되어서 좀더 명확하게 알수 있다

---

• 배열에 저장된 값을 사용하기

/*
- 배열객체에 값을 대입하기
let arr = [];
arr[0] = 100;  참조변수[인덱스] = 값
arr[1] = 80;
arr[2] = 70;
arr[3] = 40;

- 배열객체에 저장된 값을 사용하기
let arr = [100,80,70,40]
console.log(arr[0]); // 참조변수[인덱스]

let total = arr[0] + arr[1] + arr[2] + arr[3];
*/ 


let scores = [100,80,70];
console.log("국어점수 : "+scores[0]);
console.log("영어점수 : "+scores[1]);
console.log("수학점수 : "+scores[2]);

let total = scores[0] + scores[1] + scores[2];
let average = total / scores.length;

console.log("총점 : " +total);
console.log("평균 : " + average);

 

---

• 배열에 반복문 사용해보기

let korScroes = [100 , 80 , 70 ,70 , 90 , 100 , 40 , 50 ,60 , 30];

// 배열에 저장된 모든 국어 점수를 출력하기

console.log(korScroes[0]);
console.log(korScroes[1]);
console.log(korScroes[2]);
console.log(korScroes[3]);
console.log(korScroes[4]);
console.log(korScroes[5]);
console.log(korScroes[6]);
console.log(korScroes[7]);
console.log(korScroes[8]);
console.log(korScroes[9]);

( 효율 완전 구림~~~~)

 

✔ 만약 배열 길이를 모르거나 배열의 길이가 너~~~무 길어서 알수가 없다면,   length를 사용하자

let korScroes = [100 , 80 , 70 ,70 , 90 , 100 , 40 , 50 ,60 , 30];

// 반복문으로 배열에 저장된 모든값 출력하기

for(let index = 0 ; index < korScroes.length; index++){
    console.log("index : ",index ,"korScores : ", korScroes[index]);
}


// 국어 점수 합계 구하기
let total = 0;
for(let index = 0; index < korScroes.length; index++){
    total += korScroes[index];
}
console.log("총점 : ",total);

 

 

---

• 배열의 최대값 , 최소값 구하기

let arr = [27 , 23, 32, 645, 152 ,65 ,12 , 4];

 

1. 최대값을 저장하는 변수 max 생성하고 배열의 0번째 값을 저장한다

2. 반복문  배열에서 index 번째의 값을 조회해서 변수 num에 대입한다 
비교 연산자를 이용해 num > max를 수행해서 true 로 판정되면  num의 값을 max에 대입하기 

3. 반복문 종료 이후 최대값 출력하기

// 배열의 값 탐색하기
// 최대값 , 최소값 구하기

let arr = [27 , 23, 32, 645, 152 ,65 ,12 , 4];

// 배열의 저장된 값 중에 최대값

/* 
1. 최대값을 저장하는 변수 max 생성하고 배열의 0번째 값을 저장한다
2. 반복문
  배열에서 index 번째의 값을 조회해서 변수 num에 대입한다
  비교 연산자를 이용해 num > max를 수행해서 true 로 판정되면
  num의 값을 max에 대입하기
  
3. 반복문 종료 이후 최대값 출력하기   
 */

let max = arr[0]; // 첫번째 값이 제일 크다가 일단 가정하자
// max에 값은 arr[0] 인 27 인상태

for(let index = 1; index < arr.length; index++){
    let num = arr[index];   
    if(num > max){
        max = num;
    }
}
console.log("최대값 max :",max);



// 배열의 저장된 값 중에 최소값
/*
1. 최소값을 저장할 변수 min 생성 그 값은 배열의 0 번째 값 arr[0]으로 설정
2. 반복문 사용
    배열에서 index 번쨰 값을 조회해서 변수 num에 대입하는데
    비교 연산자를 사용해 num < min 이라면
    그 값을 min에 대입한다
    (num < min 이라면 최소값 min 저장된 값보다 
        이번에 찾은 배열의 값이 더 작다는 
        소리이니 min 에다가  num 값을 대입)
3. 반복문 종료후 최소값 출력하기
*/


// 1번방법
let min = arr[0];
for(let index = 1; index < arr.length; index++){
    let num = arr[index];
    if(num < min){
        min = num;
    }
}
console.log("최소값 min :",min);

// 2번방법
let min = arr[0];
for(let index = 1; index < arr.length; index++){
    if(arr[index] < min){
        min = arr[index];
    }
}
console.log("최소값 min :",min);

 

 

---

• 배열에 값이 존재하는지 확인하기

1. 존재 여부를 저장하는 변수 exist를 생성 ㅡ 초기값으로 false주기 
2. 궁극적으로 true인 값을 찾기 위해서 false를 초기값으로 준다고한다.
3. 반복시작
  - 배열의 0 번째부터 값을 조회 
  - names의 값과 value 의 값이 일치하면 exist에 true를 대입한다
  - 반복종료
4. exist 값 출력

 

let names = ["김유신","김시민","곽재우","한명회","권율"];


let value = "한명회";
let exist = false;

for(let index = 0; index < names.length; index++){
    let name = names[index];
    if(value == name){
        exist = true;
        break;  // 일치 하는 값을 반견한다면 더이상 배열의 값 조사할 필요 없다,
    }
}
console.log("주어진 값이 존재 하는가 ? : ", exist);

 

---

자바스크립트에서 값 저장하기

변수 ◀ 값 하나 ( 변수 하나를 만들면 값을 하나 담을수 있다)

let a =10;

배열 ◀ 값 여러개 ( 배열 하나를 만들면 값을 여러개 담을수 있다 , 순서 있는 값의 목록 + 같은 종류)

let a = [ 10 , 20 , 30]

오브젝트 ◀ 여러 종류에 값 (이름 있는 값의 집합)

---

📚 오브젝트

• 오브젝트 생성

// 책정보를 저장하는 오브젝트 생성하기

let book  = { 
title : '자바의정석',
author : '남궁성',
price : 32000,  // 가격
soldout : false ,  // 품절상태
stock : 5  // 재고량
};

//    title  - > key
//    '자바의정석' -> value

// 오브젝트에 저장된 값을 출력하기
/* 오브젝트에 저장된 값 조회 / 사용하기
참조변수.프로퍼티
참조변수["프로퍼티명"]
*/

console.log("제목 : "+ book.title);
console.log("저자 : " , book.author);
console.log("가격 : ",book.price);
console.log("품절 상태 : ", book["soldout"]);
console.log("재고량 : " , book.stock);

---

• 다양한 타입의 값( 문자 , 숫자 , boolean , 배열 , 다른 오브젝트) 을 가지고 있는 오브젝트 만들기

// 다양한 타입의 값( 문자 , 숫자 , boolean , 배열 , 다른 오브젝트)를
// 가지고 있는 오브젝트 생성하기


/*
자동차 판매점에서 관리하는 고객정보
고객이름
나이 
전화번호 
보유차량 - 제조사
*/
let customer = {
    name : "기선",
    age : 30 ,
    tel : "010 - 0000 - 1234",
    car :{
        company : "혼다",
        model : "슈퍼커브",
        year : 2022 ,
        price : 2550000
    } 
}

console.log("고객명 : ",customer.name);
console.log("나이 :",customer.age);
console.log("전화번호 : ",customer.tel);
console.log("보유 차량 제조사:",customer.car.company)
console.log("보유차량 모델 :",customer.car.model);
console.log("보유차량 연식 :",customer.car.year);

---

• 빈 오브젝트를 생성해 정보를 저장하기

// 빈 오브젝트를 생성 하고 정보를 저장하기
// 정보는 이름과 값의 조합


// 성적 정보를 담을 빈오브 젝트 생성
// 학생이름 , 국어 , 영어 , 수학 , 점수 저장하기

let score = {};

score.name = "기선";

score["kor"] = 100;
console.log("성적객체: ", score);

score.eng = 98;
console.log("성적객체: ", score);

score["math"] = 32;
console.log("성적객체: ", score);
console.log("값이 늘어나는 것을 확인할수 있다.");

score.total = score.kor + score.eng + score.math;
score.average = score.total / 3;

console.log("학생 이름 :",score.name);
console.log("총점 : ", score.total);
console.log("평균 : ", score.average);

 

---

 

• 베스트 셀러 정보를 표현하는 배열 생성하기

// 베스트 셀러 정보를 표현하는 배열 생성하기

let books = [
    {
        title : "트렌드 코리아 2024",
        author : "김난도",
        price : 18000,
        discountRate : 0.1
    },
    {
        title : "퓨처 셀프",
        author : " 벤자민 하디 ",
        price : 19000,
        discountRate : 0.15
    },
    {
        title : "세이노의 가르침",
        author : " 세이노 ",
        price : 7000 ,
        discountRate : 0.1
    }

];

// 배열에 저장된 베스트 셀러 정보 출력하기
for(let index = 0; index < books.length; index++){
   let x = books[index];
//    console.log(x);  // 모든 정보 출력
console.log(x.title);
}