기발자의 한놈만 패는 Javascript 2,3교시 -

Array (배열) 과 객체 (Object)

배열의 구조

literal 방식

let arr=["apple", "banana", "tomato"]; 

• 대괄호를 사용해서 배열을 만듬
• apple, banana, tomato를 data 혹은 element라고 함.
• apple,banana,tomato의 위치정보를 담고 있는 것을 index라고 표현 함

배열을 통해 생성자 함수를 만들 수 있다!

생성자 함수란?
=> array,string,number,object가 다 될 수 있다.

let arr2 =new Array(5, 4, 3, 2, 1, "apple"); //new를 사용함 

console.log(arr2);// 하면 [5, 4, 3, 2, 1, 'apple'] 가 출력됨 

let arr=["apple", "banana", "tomato"]; 

console.log(arr[0]); //하면 apple이 출력됨
console.log(arr.length); //하면 3이 출력됨 

*생성자에서 properties와 method로 나뉘는데 뒤에()가 붙으면 method, 안붙으면 proprties라고 생각하면 됨

배열의 for 문

• for 문과 for in 문

let arr=["apple", "banana", "tomato"]; //이렇게 했을때 아래는 같이 출력된다 

for (var i=0; i<arr.length; i++) {
  console.log("index : "+i+"Element : " +arr[i]);
              }

for (var index in arr) {
  console.log("Index: " + index + "Element : " + arr[index]);
} 
/*
index : 0 Element : apple  위에 두 for 문 과 for ....in 문 둘다 이렇게 출력 됨 
index : 1 Element : banana
index : 2 Element : tomato
/*

• for each 문
  - 콜백함수 형태로 됨, 인자 형태로 함수를 받음
  • 최대 세개 인수를 받을 수 있음

var result = '';

arr.forEach(function (data,index,arr) {
  result += index+ ' : '+ data + "=" + arr+ '/n';});

console.log(result);

arr.forEach(function (data,index ) {
  result += index + ' : ' + data + '/n';
});

console.log(result);

Method로 배열의 기능 파악하기

• push의 반대 unshift 효과

var fruit = ["apple", "banana", "tomato"];
fruit.unshift('orange', 'melon');

console.log(fruit); //이렇게 하면 ['orange', 'melon', 'apple', 'banana', 'tomato] 출력됨! 

• pop 과 shift

var fruit = ["apple", "banana", "tomato"];
fruit.pop();
console.log(fruit); // 하면 ['apple','banana'] 출력됨 

var fruit = ["apple", "banana", "tomato"];
fruit.shift();
console.log(fruit); // 하면 ['banana','tomato'] 출력됨 

• join : array 가 string으로 변함

var arr=['a','b','c','d'];
var arrJoin = arr.join('-');

console.log(arrJoin); //이렇게 출력하면 string형태가 되어서 a-b-c-d-e가 이렇게 출력이 됨 

• sort

var fruit = ['cherry','apple','banana'];
fruit.sort();
console.log(fruit); // 이렇게 하면 alphabet순으로 배치작업을 해줌 
//['apple', 'banana', cherry'] 로 정리된 형태로 sorting 됨 

var number = [4,2,3,1,5]
number.sort(function (a,b) {
  return a-b; // 이렇게 하면 작은 순서대로 정렬이 됨 
});

console.log(numbers);

//[1,2,3,4,5] 

  return b-a; // 이렇게 하면 큰 순서대로 정렬이 됨 

• 다차원 배열

var scores = [
  [100,20,30,40]
  [20,3,4,5,6]
  [10,20,40,50]
  ]

console.log(scores[0][2]); //30 출력
console.log(scores[1][2]); //4 출력 

객체의 구조

• Built-in objects: object, string, number, boolean, array 등등(core javascript)
• Native Object : DOM
• Host Object : 사용자가 정의하는 객체

//객체 리터럴 방식

var student = {
  name : 'jojo',  //name은 key or properties , 'jojo'는 value 
  age : 28,
  skills : ['javascript', 'html', 'css'],
  data : {year : 2020, month : '5월'} ,
	intro : function () { // 겍체안의 함수는 method 
      console.log(student.name + "은 " +student.country + "에 살고 있습니다.");
};

console.log(student.name);
student.name = "kim";
console.log(student.name); //이렇게 하면 객체의 value값을 바꿀수 있음
student.gender = "female";
console.log(student); //이렇게 하면 새로우 key와 value값을 더할수 있음 

• for in 문

for(var prop in student) {
console.log(prop + " : " + student[prop]);
} // 이렇게 하면 name :"jojo" 이렇게 쭉 다 출력 됨 

var obj = {}; //빈 객체 생성 
obj.age = 10; //이렇게 값을 줌 

var sum = obj.age+10;
console.log(sum) ; //이렇게 하면 20이 출력 됨 

• prototype

var obj1= new Object();
var obj2= new Object();

Object.prototype.name ="joanne";
console.log(obj.name); //출력하면 joanne이 나옴 

Object.prototype.greeting = function() {
  return "Nice to meet you "; 
}
console.log(obj2.greeting()); //출력하면 nice to meet you 나옴 

// 즉 프로토 타입이라는 parent 에서 적용된 부분이 obj1,obj2에도 다 적용 됨 

obj1.age = 29;

console.log(obj1.hasOwnProperty('age')); //true 출력, 뒤에 값을 주었기 때문에
console.log(obj1.hasOwnProperty('name')); //false 출력 됨.Object라는 부모종족에 주었기 때문에 

DRY(Don't Repeat Yourself) : 코드 반복하지마라! 생성자패턴은 결국 반복하지 않는 코드를 만들기 위해 생겨난 것

function People(firstName, lastName) {
  this.firstName = firstName;
  this.lastName= lastName;
  
  this.intro=function() {
    var msg= this.firstName + " " + this.lastName + "은" + "한국출신입니다.";
    console.log(msg);
  }
}

• 생성자 패턴

var jojo = new People("joanne", "kim");
jojo.intro();