자바스크립트 10 - 객체 (배열과 객체 생성비교)

 

1. 배열선언방법

• 자바스크립트의 기본 자료형 : 숫자, 문자, 불, 함수, object, undefined
• var array1 = [123, '고구마', function(){}, {}];
• var array2 = [{},{},{},{},{}];        
• 인덱스와 요소로 구성됨
• array1[0]=>123, array1[1]=>'고구마'
• 배열은 객체를 기반으로 한다.

 

2. 배열 객체 선언방법

• 크기를 지정하지 않고 선언

• var array1 = new Array();
• 값을 넣는 법
• array1[0] = "지수";

• 크기를 지정하고 선언

• var array1 = new Array(5);
• 5개만 값이 들어올 수 있음
• var array1 = new Array('지수', 183, 67);

 

기타 배열 메서드 활용법 (이 외에 다양한 메서드를 w3schools.com이나 mdn에서 확인한다. )

• 배열 뒤에 요소를 추가 : array1.push(456);
• 배열 뒤에 요소를 제거 : array1.pop();
• 배열 앞에 요소를 추가 : array1.unshift(789);
• 배열 앞에 요소를 제거 : array1.shift();

3. 배열객체를 생성하는 방법

• var students =[];
• students.push({key1 : value1, key2 : value2,...});
• students.push({key1 : value1a, key2 : value2a,...});
• students.push({key1 : value1b, key2 : value2b,...});

---

4. 객체생성, 가져오기, 수정 방법 

 

var 리모콘 = {

  색상 : 흰색,//property

  가로 : 3cm,

  세로 : 7cm,

  redBtn : 기능(전원을 켬/끔),//method

  pauseBtn : 기능(화면멈춤/해제)

}

console.log(리모콘.색상);

console.log(리모콘.redBtn());

리모콘.색상 = 빨강;

 

---

1-1. 기본적으로 {..}안에 key : value, key:value 로 생성한다. 

const maker1 = {name : '현정', contents : '도전'}
const maker2 = {name : '지혜', contents : '요리'}
const maker3 = {name : '지혜', contents : '영상제작'}

---

2. 함수에 매개변수를 지정해 불러온다. 

const maker4 = makePerson('예찬', '노래');
function makePerson(name, contents){
    return{
        name : name,
        contents : contents
    }
}

---

3. new키워드로 생성하고 아래처럼 함수를 만든다.     

const maker5 =  new Person('예림','웹툰보기');
console.log(maker5);         
function Person(name, contents){            
    this.name = name;
    this.content : content;
}

---

4. 생성자 함수(Constructor funtion)를 만듦

const maker6 =  new Person('지수','유투버');
console.log(maker6);         
function Person(name, contents){
    //this={}; 이내용은 생략되어 있음
    this.name = name;
    this.content : content;
    //return this; 이내용은 생략되어 있음
}

---

5. in키워드를 사용해서 객체 안의 key를 체크하여 boolean으로 반환한다. 

console.log('name' in maker1);
console.log('contents' in maker1);

---

6. for...in | for...of | fir(key in obj)를 활용하여 값을 반환한다. 

for(key in maker1){
    console.log(key);
}

for(value of array)
const array = [1,2,3,4];
for(value of array){
    console.log(value);
}

---

 

7. 복제(clone)하는 방법도 있다. 

[ 부연설명 ]

주소명은 달라도 같은 자료를 담고 있는 것. 
같은 집인데 지번주소와 도로명으로 표시한것에 비유할 수 있다.
태극로8 000-0000호 에 사는 사람은 '이쁜사람'
장항동 000-0000호 에 사는 사람도 '이쁜사람'
같은 값을 갖고 있는것과 같다고 볼 수 있는것 같아...뭔가부족하지만...
메모리에 참조주소 maker1에 값을 감고
메모리에 참조주소 maker2를 만드는데, 이 maker2는 maker1의 값을 가리키고 있는것.
주소와는 약간 차이가 있는것 같다. 

const maker1 = {name : '예진', contents : '요리'};
const maker2 = maker1;//maker2는 maker1을 가리키고 있으므로, 그 안의 값을 가져온다. 
maker2.name = '지수'; //값을 변경하게 된다. 
console.log(maker1);//maker1도 동시에 값이 변경된다.


//위의  코드는 아래처럼도 표현 가능(old version)
const maker3 ={};
for(key in maker3){
    maker3[key] = maker1[key];
}
console.log(maker3);

---

8. assign() 메서드 활용

const maker4 = Object.assing({}, maker1);
console.log(maker4);

---

 

5. 객체를 동적으로 생성하는 방법

   

 var students = {}

students.name = "지영";

students.hobby = "음주가무";

students.hope ="돈많은 커리어우먼";

students.toList = function(){

  var print3 ='';

  for(var key in this){

  	print3 += "- " + key + " : " + students[key] + "<br>";

  }

  }

 

---

6. 객체 생성하고 활용 연습

1. maker객체를 만들어서 반환

var print ='';
    var maker = {
    name : '현정',
    contents : '도전',
    contributes : '지수, 예림',
    youtubeStart : '3월',
    plan : function(week){
        //현정이가 3월부터 week주에 한번씩 유툽으로 재밌게 해준대요
        alert(this.name+'이가 ' + this.youtubeStart +'부터'
            + week + '주에 한번씩 유툽으로 재밌게 해준대요, 오와~! 기대되네!!');
    }
}
maker.contributes ='성민';
print += maker.name + '이가 ' +maker.contributes + '와 함께 ' + maker.contents + '를 시작한대요 <br>';
print += maker['name'] + '이가 ' +maker['contributes'] + '와 함께 ' + maker['contents'] + '를 시작한대요 <br>';


var howMany = prompt("몇주에 한번 하면 되나요?", "");
maker.plan(howMany);

console.log(print);

---

2. course객체를 만들어서 반환

var course = {
    name : '웹디자인(웹퍼블리셔)프론트앤드실무자양성과정',
    period : '2020.12.21~2021.5.11',
    subject : '자바스크립트', 
    students : 15,
    character : 'positive'
}
var print1='';
for(var key in course){
    print1 += "- " + key + " : " + course[key] + "<br>";
}
document.write(print1);

---

3. students객체를 만들어서 반환

var students = {}
    students.name = "지영";
    students.hobby = "음주가무";
    students.hope ="돈많은 커리어우먼";
    students.toList = function(){
        var print3 ='';
        for(var key in this){
            if(key != 'toList'){
            print3 += "<h2>- " + key + " : " + students[key] + "</h2>";
            }
        }
        return print3;
    };
    document.write(students.toList());

 

---

 

4. students 배열객체[] 를 만들어서 push()메서드로 배열값을 추가

주석처럼 하나씩 넣을 수 있지만, for문 활용하여 코드정리

// let student0 = {이름 : '지혜', 그래픽 : 90, H5C3 : 95};
// let student1 = {이름 : '유리', 그래픽 : 80, H5C3 : 65};
// let student2 = {이름 : '준환', 그래픽 : 70, H5C3 : 75};
// let student3 = {이름 : '은주', 그래픽 : 100, H5C3 : 35};
// let student4 = {이름 : '재이', 그래픽 : 85, H5C3 : 100};

let students =[];
students.push({이름 : '지혜', 그래픽 : 90, H5C3 : 95});
students.push({이름 : '유리', 그래픽 : 80, H5C3 : 65});
students.push({이름 : '준환', 그래픽 : 70, H5C3 : 75});
students.push({이름 : '은주', 그래픽 : 100, H5C3 : 35});
students.push({이름 : '재이', 그래픽 : 85, H5C3 : 100});
students.push({이름 : '서희', 그래픽 : 85, H5C3 : 100});
students.push({이름 : '성민', 그래픽 : 85, H5C3 : 100});
students.push({이름 : '예림', 그래픽 : 85, H5C3 : 100});

for(let i in students){
    students[i].getSum = function(){                
        return this.그래픽 + this.H5C3;
    }        
    students[i].getAvg = function(){
        return (this.그래픽 + this.H5C3)/2;
    }
}
let print4='';

for(let i in students){
    print4 += '<h3>'+ students[i].이름 + '의 합계는 총 '+ students[i].getSum() + 
            '점 이고, 평균은 ' +  students[i].getSum() + '입니다. </h3>';
}

// print4 += '<h3>'+ students[0].이름 + '의 합계는 총 '+ students[0].getSum() + 
//             '점 이고, 평균은 ' +  students[0].getSum() + '입니다. </h3>';
// print4 += '<h3>'+ students[1].이름 + '의 합계는 총 '+ students[1].getSum() + 
//             '점 이고, 평균은 ' +  students[0].getSum() + '입니다. </h3>';
// print4 += '<h3>'+ students[2].이름 + '의 합계는 총 '+ students[2].getSum() + 
//             '점 이고, 평균은 ' +  students[0].getSum() + '입니다. </h3>';
// print4 += '<h3>'+ students[3].이름 + '의 합계는 총 '+ students[3].getSum() + 
//             '점 이고, 평균은 ' +  students[0].getSum() + '입니다. </h3>';
// print4 += '<h3>'+ students[4].이름 + '의 합계는 총 '+ students[4].getSum() + 
//             '점 이고, 평균은 ' +  students[0].getSum() + '입니다. </h3>';
// print4 += '<h3>'+ students[5].이름 + '의 합계는 총 '+ students[5].getSum() + 
//             '점 이고, 평균은 ' +  students[0].getSum() + '입니다. </h3>';
// print4 += '<h3>'+ students[6].이름 + '의 합계는 총 '+ students[6].getSum() + 
//             '점 이고, 평균은 ' +  students[0].getSum() + '입니다. </h3>';
// print4 += '<h3>'+ students[7].이름 + '의 합계는 총 '+ students[7].getSum() + 
//             '점 이고, 평균은 ' +  students[0].getSum() + '입니다. </h3>';


//document.write(print4);

 

---

5. 배열객체를 for문으로 받는 연습

var array =['a','b','c','d'];
console.log(array[0]);
console.log(array[1]);
console.log(array[2]);
console.log(array[3]);

for(let i=0; i<4; i++){
    console.log(array[i]);
}

for(let i=0; i<array.length; i++){
    console.log(array[i]);
}

for(i in array){
    console.log(array[i]);
}

 

 

[ Tip ] 문자열과 변수값 연결할 때 표기법 

(backtick 기호를 사용(``)하며, 연결연산자(+)를 생략, 변수값은 ${..}안에 표기하여 받아온다.)

//es6 추가표현방법 : maker['name'] => 이 방법은 value값을 사용자가 넣는 값으로 받을때 주로 사용
document.write('<h1>'+print+'</h1>');
document.write(`<h1> ${print} </h1>`);