참고

• 200922Ex3_Object.html

객체

• 사물의 속성과 동작을 묶어서 표현하는 기법
  • 예) 자동차
    • 속성:메이커, 모델, 색상, 마력
    • 동작: 출발하기, 정지하기

종류

내장 객체 built-in object

• 생성자가 미리 작성되어 있다

예시

• Object: new Obeject() 대신 {}
• Array: new Array() 대신 []
• Date
• Number
• String: new String() 대신 "" 사용 가능
• Boolean 객체: new Boolean() 대신 true 나 false
• Function: new Function()대신 function(){}
• Math
• ...
  • new 키워드를 사용해서 생성 (예: var date = new Date(); )
  • Math는 전역 객체 이기 때문에 new 키워드 사용하지 않음

사용자 정의 custom object

• 사용자가 생성자를 정의

생성방법

1. 객체 리터럴로부터 직접 생성

• 주로 쓰는 방법임
• 한번 만들어지면 요걸로 끗
• var arr = [2, 4, 6];

var myCar = {
  model: "520d", //객체의 속성
  speed: 60,
  color: "red",
  brake: function () { this.speed -= 10; }, // 객체의 메소드
  accel: function () { this.speed += 10; }
}

myCar.color = "yellow";
myCar.brake();

2. 생성자 함수를 이용하여 객체를 정의하고 new 연산자 이용해 객체 생성

• 가급적 피하는 것이 좋음. 속도 저하, 가독성 저하

//생성자도 함수, 생성자 이름은 대문자로 시작
function Car(model, speed, color) {
  //객체의 속성
  this.model = model; //this: 소유자 의미, 일반변수와 구별 용도
  this.speed = speed;
  this.color = color;

  //객체의 메소드
  this.brake = function (){ this.speed -= 10;}
  this.accel = function (){ this.speed += 10;}
}

// 생성자 함수를 호출해서 새로운 객체 생성
var myCar("BMW", 60, "white");
myCar.color = "yellow";
myCar.brake();

속성 및 메서드 추가

• 기존에 존재하고 있던 객체에도 속성을 추가할 수 있다
• 생성자 함수는 변경할 필요가 없다

myCar.turbo = true;
myCar.showModel = function() {
  alert("모델은 " + this.model + "입니다.")
}

속성 및 메서드 삭제

delete myCar.turbo;

객체 표시 방법

// 1. 속성 표시
myCar.model;
myCar["model"];

// 2. 배열로 변환 - Object.values()
var person = {name: "홍길동", age:30, city:"서울"};
var myArray = Object.values(person);
// myArray = ["홍길동", 30, "서울"] 이란 배열이 됨

// 3. 문자열로 변환 - JSON.stringify()
var person = {name: "John", age: 50, city: "New York"};
var myString = JSON.stringify(person);
// myString = {"name":"John", "age":50, "city":"New York"}

배열로 변환 Object.values()

문자열로 변환: JSON.stringify()

• 자주씀

Array 객체

• w3schools Arrays

var myArray = new Array();
myArray[0] = "apple";
myArray[1] = "orange";
myArray[2] = "banana";

• 배열을 담는 객체
• 배열의 크기가 자동으로 조절됨
  • 다른 언어 에서는 배열의 크기가 고정되어 있다. 하지만 자바스크립트에서 배열의 크기는 현재 배열의 크기보다 큰 인덱스를 사용하면 자동으로 증가
• 하나의 배열에 여러가지 자료형을 혼합해서 저장 가능
  • 정수, 문자열, date...
• 인덱스 건너뛰고 다음 방에 저장 가능 (하지만 추천하는 방법은 아님)

속성과 메서드

속성

• length

메서드

• indexOf(item, start)
  • 배열에서 요소를 찾아 위치 리턴
• lastIndexOf(item, start)
  • 역순으로 요소를 찾아 위치 리턴
• slice(start, end)
  • start ~ end 범위의 요소를 따로 뗴어내어 새로운 배열을 만듬
• a.concat(b,c..)
  • 여러 개의 배열 합치기
• sort(): 사전순 정렬
  • 숫자는 스트링처럼 되기 때문에 사용불가
    • 숫자 오름차순: points.sort(function(a, b){return a - b});
    • 숫자 내림차순: points.sort(function(a, b){return b - a});
• reverse():
  • 그냥 reverse만 하면 원래배열에서 순서만 바뀜
  • sort후 reverse해야 내림차순 정렬
• pop() & push()
  • pop(): 마지막 요소 제거 후 리턴
  • push(): 배열 끝에 요소 추가
• unshift(a,b,c..)
  • 배열처음에 요소 추가
• splice(index, n, a, b, c...)
  • 배열 일부를 수정, 일정 범위를 삭제하고 새로운 요소 삽입

예제

1. 사람 이름을 계속 입력 받아 배열에 저장하고 그 저장된 이름을 출력하는 프로그램을 작성하시오.

• (단, 입력은 prompt 명령을 이용하고, 입력의 마지막은 공백문자를 입력하거나 "취소" 버튼을 눌렀을 때로 한다. "취소" 버튼은 null 이 입력될 때이다.)

2. 서로 중복되지 않은 정수 5개를 입력 받아 출력하는 프로그램을 작성하시오.

Date객체

• w3schools Date
• 날짜와 시간 작업
  • new Date(): 현재날짜와 시간
  • new Date(milliseconds): 1970/01/01 이후 밀리초
  • new Date(dateString)
  • new Date(year,month, date[,hours[, minutes[, seconds[,ms]]]]
• month: 0부터 시작,
• 매개변수 1개면 dateString으로 인식하니 다 써줄 것

메서드

getter, setter

• getDay(): 0(일요일) ~ 6(토요일)
• getDate(): 1~31
• getMonth(): 0~11
• getFullYear(): YYYY
• getHours(): 0~23
• getMinutes(): 0~59
• getSeconds(): 0~59
• getMilliseconds(): 0~999
• getTime(): 경과시간(milliseconds단위)
  • getTime()/1000 -> 실제 초
  • getTime(0/1000/60/60/24 -> 일

예제

구입일로 부터 7일이 경과했는지 비교하여 환불가능여부 알려주는 프로그램

String 객체

• 스트링 내에서 "" 사용시 역슬래시 앞에 붙여준다.
• 역슬래시를 쓰고싶을땐 앞에 한개 더 붙여준다.

속성과 메서드

속성

• length: 문자열의 길이

메서드

원래 string이 변하는게 아니고 새 string이 생기는 것

• substring(from-index, to-index)
  • 어디서부터 어디까지, 마지막 포함x
  • slice랑 비슷하지만 음수 계산 불가

var str = "Apple, Banana, Kiwi";
var res = str.substring(7,13); // Banana

• substr(start, length)
  • 어디서부터 몇개, 마지막 포함o
  • 음수면 뒤에서부터 셈
• split(separator, limit)
  • 구분자로 구분된 문자열을 분리하여 배열로 리턴, limit은 최대 몇개까지 리턴할 것인가를 지정
• indexOf(str), lastIndexOf(str)
  • 없으면 -1 리턴
  • indexOf(str, index) 이면 index번째부터 찾기 시작
  • lastIndexOf(str)이면 index를 끝으로 두고 맨 앞부터 찾기시작
• search(str)
  • 제일 먼저 등장하는 것의 index를 반환, 없으면 -1 리턴
  • indexOf()와의 차이
    • search(): 정규식 받아들일 수 있으나, 시작위치 지정못함
• slice(start-index, end-index)
  • end는 포함되지 않음

var str, res;
str = "Apple, Banana, Kiwi";
res = str.slice(-12,-6); // Banana: 음수면 뒤에서부터 자름
res = str.slice(7); // Banana, Kiwi: 7부터 끝까지
res = str.slice(-12); // Banana, Kiwi: 스타팅포인트를 뒤에서부터 셈

• replace()
  • replace하면서 새로운 string 생성
  • 처음 등장한 단어만 replace -> 전부하고싶으면 / g 이용
  • 대소문자 구별함 -> 대소문자 상관없이 하고싶다면 / i 이용

str = "Please visit Microsoft!";
n = str.replace(/MICROSOFT/i, "W3Schools");
n = str.replace(/Microsoft/g, "W3Schools");

• toUpperCase(), toLowerCase()
• concat()

var text = "Hello" + " " + "World!";
var text = "Hello".concat(" ", "World!"); // 둘이 같음

• trim()
• charAt(index)
• charCodeAt(index)
  • index번째 방에 있는 값을 유니코드로 변환하여 반환

Math 객체

• w3schools 참고

속성

메서드

• abs(x): 절대값
• random(): 0과 1사이의 난수값 반환
• round(x): 반올림
• ceil(x), floor(x): 실수를 정수로 올림, 내림
• max(x,y,z,...,n), min(x,y,z,...,n): 최댓값, 최솟값
• pow(x,y): x의 y제곱