[새싹(SeSAC) 프론트엔드] day16 221107

 

객체 

: property와 method로 구성

var account = {
  owner : "john",
  id : "123",
  balance : 23000, 
  deposit : function(){...},
  withdraw : function(){...} //마지막엔 콤마, 생략
};

 

	배열	객체
원소 접근	숫자 (index)	문자열 { key(property) :  value}
사용방법	동일한 카테고리의 여러 개체를 표현	다양한 특성이나 속성이 있는 하나의 개체
예시	var animal = ["cat", "dog", "snake"]	var cat = {    color : "white",    name : "kitty",    brith : "october" }	var dog = {    color : "black",    name : "mango",    birth : "june" }	var snake = {    color : "browan",    name : "sunny",    birth : "febraury" }

 

객체 리터럴 (object literal) 

리터럴 : 중괄호를 이용하여 프로퍼티와 메서드를 한 번에 작성 

 

 

 

키	값
'문자열'만 가능 무조건 문자열만 올 수 있으므로 " " 생략해도 됨  ➡️ 숫자를 입력하더라도 "3" 처럼 숫자처럼 생긴 문자열로 취급  (일반적으로 공백을 넣지 않지만 만약 넣는다면 이때는 " " 넣어줘야함)	모든 타입의 자료형 사용 가능  (int, sring, boolean, array.. etc)

키 - 쌍을 구분하기 위해 콤마, 사용

(마지막 객체에는 생략가능) 

 

 

 

객체 안의 값 접근 

object["key"]

object.key;

 

(*) 실습

[코드]

let cat = {
  leg: 2,
  name: "kitty",
  color: "white",
};

console.log(cat);
console.log(cat["leg"]); // " "를 붙여주지 않으면 leg라는 변수로 인식하여 값을 못 찾음 
console.log(cat.leg);
console.log(cat.name);
console.log(cat.color);

let leg = ""; // 객체안의 leg 이므로, leg이라는 변수는 별도로 생성할 수 있음

 

[결과]

 

 

Object.keys() : 객체 내의 모든 키 목록

console.log(Object.keys(cat));

 

 

 

 

객체에 값 추가 

 

1. 배열 느낌으로 추가하기 

 

(*) 실습

[코드]

let dog = {};

console.log("추가 전 : ");
console.log(dog);

dog["leg"] = 4;
dog["name"] = "mango";
dog["color"] = "yellow";

console.log("추가 후 : ");
console.log(dog);

 

[결과]

 

 

2. 점 표기법을 이용하기 

 

let tiger = {};

console.log("객체 넣기 전 : ");
console.log(tiger);

tiger.leg = 2;
tiger.name = "tiba";
tiger.color = "yellow and black";

console.log("객체 넣기 후 : ");
console.log(tiger);
document.write(JSON.stringify(tiger));

 

 

document.write로 출력하고 싶다면 JSON.stringify() 사용하기 

 

 

객체와 배열 결합하기 

하나의 [key:value]에 배열을 넣는다면 하나의 특성이지만 그 안에 여러개의 값이 들어갈 수 있음 

 

(*) 실습

[코드]

let dino = [
  {name : "tirano", id : "1"},
  {name : "stego", id : "2"},
  {name : "plateo", id : "3"}
]

console.log(dino[0]);

console.log(dino[0]["name"]);

console.log(dino[0].id);

 

[결과]

 

 

 

(*) 실습

[코드]

let minji = { name: "minzy", age: 20, num: [1, 3, 5, 6] };
let soojin = { name: "soojin", age: 24, num: [3, 9, 12, 33] };
let younghyun = { name: "younghyun", age: 28, num: [34, 22, 3, 5] };
let friend = [minji, soojin, younghyun];

console.log(friend[0]);
console.log(friend[1].name);
console.log(friend[2]);
console.log(friend[2].num[2]);

[결과] 

 

 

객체 안에 객체 넣기 

 

(*)실습

[코드]

let movie = {
  "Star Wars": {
    year: 1999,
    runtime: 131,
    type: "DVD",
    genre: "SF",
  },
  "Jurassic Park": {
    year: 1993,
    runtime: 123,
    type: "DVD",
    genre: "SF",
  },
  "Harry Potter": {
    year: 2001,
    runtime: 152,
    type: "DVD",
    genre: "fantasy",
  },
};

let star = movie["Star Wars"];
console.log(star);

let starGenre = movie["Star Wars"].genre;
console.log(starGenre);

let car = {
  year: 2006,
  runtime : 121,
  type : "DVD",
  genre : "family"
}

movie.car = car ;

console.log(movie.car);
console.log(movie.car.genre);

[결과]

 

 

 

const로 객체 내부 값 변경하기 

[코드]

const dog = {
  name: "바둑이",
  legs: 2,
  color: "brown",
};

console.log(dog.color);

dog.color = "white";

console.log(dog.color);
console.log(dog);

 

[결과]

 

**const 

: 값을 재할당하는 것은 불가능하지만 객체의 값을 변경하는 것은 가능함 

 

➡️ const의 객체 값을 변경하는 것은

메모리 주소를 변경하는 것이 아니라 메모리 주소 안에 있는 세부 값을 변경하는 것이므로 객체의 경우 변경이 가능함 

 

 

 

 

객체 생성문 축약 

: key 와 변수의 이름이 같은 경우 축약 가능 

 

(*) 실습

[코드]

let width = 100;
let height = 100;

let area = {
  width: width,
  height: height,
};

console.log(area);

let area2 = {
  width, height
}

console.log(area2);

[결과]

 

 

 

객체 안에 함수도 추가할 수 있음 

 

(*) 실습

[코드]

const dog = {
  name: "바둑이",
  age: 3,
  color: "brown",
  speak: function () {
    console.log("멍람어머어멍멍");
  },
};

dog.speak();

 

[결과]

 

 

 

this 

 

(*) 실습

[코드]

const dog = {
  name: "바둑이",
  age: 3,
  color: "brown",
  speak: function () {
    console.log("멍람어머어멍멍");
    console.log(this.color);    //this 사용 
  },
};

dog.speak();

[결과]

 

 

화살표 함수 

: this 키워드를 사용할 수 없음 

- this 사용 시 부모영역에서 function으로 선언된 값을 찾으므로 원하는 값이 아닌 엉뚱한 값이 나올 수 있음 

 

(*)실습

[코드]

const dog = {
  name: "바둑이",
  age: 3,
  color: "brown",
  // speak: function () {
  //   console.log("멍람어머어멍멍");
  //   console.log(this.color);
  // },
  speak : () => {
    console.log(this.age);
    // 내가 속해있는 dog가 아니라 
    // 부모(더 상위의 영역)의 함수를 찾음 ➡️ 선언이 function으로 되어 있는 것을 찾음 
  }
};

dog.speak();

[결과]

 

 

 

 

 

생성자 함수 

: 유사한 객체를 여러 개 생성할 수 있음 

 

** 함수의 첫 글자는 대문자로 시작

** new 연산자를 붙여서 실행 

 

(*) 실습

[코드]

function Animal(name, age) {
  this.name = name;
  this.age = age;
}

const dog = new Animal("바둑이", 3);
const cat = new Animal("나비", 6);
const tiger = new Animal("호돌이", 5)

console.log(dog);
console.log(cat);
console.log(tiger);
console.log(dog.name);
console.log(tiger.age);

[결과]

 

 

 

 

내장객체 

 

Date 

: 시간 정보를 담는 객체 

var now = new Date();
//현재 날짜와 시간(시, 분, 초) 값으로 초기화된 객체 생성 

 

- Date 객체에서 월(month)값은 0부터 시작 

➡️ 0 : 1월  //   11 : 12월 

 

 ** toLocaleString() : 객체에 든 시간 정보를 로컬 표현의 문자열로 리턴 

 

(*) 실습

[코드]

var now = new Date();

document.write("현재시간 " + now.toLocaleString() + "<br><hr>");
document.write(now.getFullYear() + "년도 <br>");
document.write(now.getMonth() + 1 + "월 <br>");
document.write(now.getDate() + "일 <br>");
document.write(now.getHours() +"시 <br>");
document.write(now.getMinutes() + "분 <br>");
document.write(now.getSeconds() + "초 <br>");
document.write(now.getMilliseconds() + "밀리초 <br>");

[결과]

 

 

이미 만들어진 객체

1. 코어 객체 (Date, Math ,, )

2. 브라우저 객체

3. 돔객체 

 

 

Math 

: 수학 계산을 위한 객체 

- new Math()로 객체를 생성하지 않음 

 

Math.random()

 : 1보다 작은 0~1 사이의 실수를 리턴 

 

Math.floor(m)

: m의 소수점 이하를 제거한 정수 리턴 

 

(*)실습

[코드]

//제곱근
var sq = Math.sqrt(4);

//파이
var area = Math.PI;

console.log("제곱근 : " + sq);
console.log("파이 : " + area);

for (let i = 0; i < 10; i++) {
  var m = Math.random() * 100;  // 0~99.9999 보다 작은 실수 
  var n = Math.floor(m);        // 0~99 사이의 정수

  document.write(n + " ");
}

console.log("랜덤숫자 : " + m);
console.log("정수로 변환 : " + n);

 

[결과]

 

 

 

 

 

 

 

새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 4주차 블로그 포스팅(월)