생각기록
JavaScript 객체 자료형 본문
자바스크립트의 가장 기초적인 자료형은 객체(Object)이다.
객체는 실제 세상에 존재하는 사물을 모델링 한 것
객체 데이터는 객체가 가지고 있는 특성값(속성)
객체의 동작은 객체가 수행할 수 있는 동작(기능)
- 객체 : 고양이
- 속성 : 이름-나비 , 나이-1살
- 메소드(함수) : mew()-울다
함수는 객체가 할수있는 동작, 속성은 객체 안에 존재할 수 있는 명사들이다.
객체 안의 변수 = 속성
객체 안의 함수 = 메서드
둘을 포함하는 묶음 = 객체(컨테이너)
객체 안의 변수는 외부 세계로부터 감추어져 있다.
>데이터를 객체 안에 숨기면, 데이터가 실수로 다른 객체에 의해 변경되는 것을 방지
<script>
var cat = {
name: '나비', //객체
age: 1, // 속성 age, 함수 mew
mew: function() {
return "야옹";
}
}
console.log( cat );
console.log( cat.name );
console.log( cat.mew() ); // .으로 켓이라는 객체에서 mew라는 얘를 찾는다. 함수다보니 ()를 붙이고 실행시키라는 의미
return
- 어떤 값을 함수에서 계산하고 출력하는 것
- 하나의 함수에는 하나의 return만이 존재하고, 값이 존재하지 않을때도 있다.
생성자 함수를 이용한 객체 생성 방법
<script>
//생성자 정의
function Car(model, speed, color){
this.model = model;
this.speed = speed;
this.color = color;
this.accel = function accel(){
this.speed += 10;
}
this.barake = function barake(){
this.speed -= 10;
}
}
// 객체 생성(객체 공간에 생성자로 초기화)
var myCar = new Car('250d', 50, "white");
document.write("모델:" + myCar.model + "속도:" + myCar.speed + "색상:" + myCar.color + "<br>");
myCar.accel();
document.write("모델 :" + myCar.model + "속도 :" + myCar.speed + "<br />");
myCar.barake();
document.write("모델 :" + myCar.model + "속도 :" + myCar.speed + "<br />");
// 새로운 속성 turbo와 새로운 메서드 showModel을 추가하려면 아래처럼 하면된다.
// 밑에서는 생성자 함수는 변경할 필요없다.
myCar.turbo = true;
myCar.showModel = function(){
alert("모델은 " + this.model + "입니다.")
}
</script>*생성자란 객체가 생성될 때 마다 실행되는 메소드를 뜻 합니다.
1) function 생성자 이름 () { 속성, 메소드 } 로 생성자 정의
- 생성자도 함수이다.
- 생성자 이름은 대문자로 시작
- this 키워드 = 실행중인 현재 객체의미 / 일반 변수와 객체속성을 구별해준다.
- this는 생성자 내부에 속성, 함수를 생성하기 위해 쓴다.
2) new + 생성자( "520d", 60, "white"); 객체 생성
- 변수 myCar = new 생성자이름( 값 ); 호출하는 문장 > myCar 라는 변수(공간)에 객체를 저장한다.
- new 연산자 - 객체 생성 / 생성자가 객체를 초기화한다.
3) 객체 맴버(객체안의 속성과 메소드) 사용하기
- 객체이름.멤버이름
- myCar(객체이름).color(속성이름) = "red";
- myCar(객체이름).bracke( ); > 메소드 이름
4) 새로운 속성, 새로운 메서드 추가는
위에 객체가 있다는 가정하에 이런식으로 추가하면 된다.
myCar.turbo = true;
myCar.showModel = function()
{ alert("모델은 " + this.model + "입니다.") }
위의 방법은 개별적인 객체를 생성하고, 각 객체는 다른 객체와 완전히 별도로 취급 되었다.
따라서 하나의 객체가 가지고 있는 속성과 메서드는 다른 객체가 전혀 사용할 수 없다.
프로토타입
[Javascript ] 프로토타입 이해하기. 자바스크립트는 프로토타입 기반 언어라고 불립니다. 자바스크립트 개발을… | by 오승환 | Medium
이번에는 속성이나 메서드를 여러 객체가 공유하는 방법을 배워 볼 것이다.
다른 객체 지향 언어에는 클레스라는 개념이 제공된다.
클래스는 객체에 대한 설계도(템플릿)이다.
자바스크립트에는 클래스의 개념이 없다.
하지만 프로토타입이라는 개념을 제공하여 여러 객체가 공유하는 메서드를 정의 할 수 있다.
메모리 낭비가 없다.
프로토타입이 메서드를 소유하게 하는 법
자바스크립트의 모든 객체는 prototype이라는 숨겨진 객체를 가지고 있으며, 이 객체를 이용해 공유되는 메서드를 작성 할 수 있다.
<script>
// 생성자 생성, this라고 안하면, 틀림 (point.x라고 했다가 현재 실행중인 객체에 적용이 안됬다.)
function point(xpos,ypos){
this.x = xpos;
this.y = ypos;
}
// 모든 point 객체가 공유하는 메서드
point.prototype.getDistance = function(){
return Math.sqrt( this.x * this.x + this.y * this.y );
}
//p1에 객체 생성 후, 그 초기화 값을 p1.getDistance();왜 안하는지 물어보기
var p1 = new point(10,20);
var d1 = p1.getDistance();
var p2 = new point(10,30);
var d2 = p2.getDistance();
document.writeln(d1 + "<br />");
document.writeln(d2 + "<br />");
</script>1) 생성자 생성
this라고 안하면, 현재 실행중인 객체에 적용이 안된다.
2) 모든 객체가 공유하는 메서드(필요한 기능은 따로 정의), 생성자 안에 하는 거 아님!
메모리를 메서드가 필요할때만 쓰게 해서, 메모리 낭비가 없다.
3) 호출방식은 동일하다.
var p1 = new point(10,20);
p1.getDistance();
배열
배열이 필요한 이유
예) 학생 10명의 성적 데이터가 필요할 때, 10개의 변수가 필요하다.
만약 100명이라면, 100개의 정수 변수를 선언해야 한다.
서로 관련된 데이터를 차례로 접근해서 처리하고 싶은 경우이다.
하나의 이름을 공유하고, 단지 번호만 다를 뿐이라면, 쉽게 기억하고 편리하게 사용할 수 있기 때문이다.
배열은 기본적으로 데이터에게 하나하나 이름을 붙이지 않고,
전체 집단에 하나의 이름을 부여한 다음, 각가의 데이터에 숫자로 된 번호를 붙여서 접근하는 방법이다.
변수는 오직 하나의 값만을 저장할 수 있다.
하지만 복잡한 응용 프로그램에서는 많은 값을 한꺼번에 저장할 수 있는 장소가 필요하다.
배열(Array)은 이런 목적으로 만들어진 자료형이다.
배열을 사용하면 많은 값을 저장할 수 있는 공간을 할당 받을 수 있다.
배열은 대용량의 자료를 저장하는 기본적인 구조이다.
리터럴 배열 생성
구체적인 값을 가지고 배열을 생성 할 수 있다.
1) 대괄호 사용
var fruits = ["apple", "banana", "peach" ];
2) 배열에 저장된 값은 정수 인덱스를 가지고 접근 할 수 있다.
document.write(fruits [0] + "<br>"); // apple
document.write(fruits [1] + "<br>"); // banana
* 배열은 첫번째요소의 인덱스는 0부터 시작된다. 그래서 0 = 사과 1 = 바나나 임
Array 객체로 배열 생성
1) var fruits = new Array() ;
배열이름 새로운객체생성 키워드 ; 배열을 나타내는 객체
배열에 값을 저장할 때에는 인덱스 사용
2) fruits[0] = "Apple";
인덱스 = "배열에 저장되는 값";
첫번째 자리에 사과 값을 넣는다.
var fruits = new Array ("Apple", "Banana", "Orange");
이런식으로도 가능
가장 많이 사용되는 속성은 배열의 크기인 lenght이다.
배열 요소를 반복하며 처리할 때 사용한다.
for ( i = 0; i < fruits.length; i++ ) { ... }
자바스크립트 배열의 특징
한 배열에 여러 가지 종류 객체 혼합 저장 가능
즉, 타입을 따지지 않는다.
var comp = new Array();
comp[0] = "Apple"; //문자열
comp[1] = new Date; // 객체
comp[2] = 3.14; // 정수
배열관련 속성들
그냥 배열에 대해
console.log( arr1 ); 하게 되면, arr1 객체가 가진 배열들을 보여준다.
변수명.indexof
값이 있을 경우에는 위치한 곳의 인덱스의 위치 / 없으면 -1을 반환하게 된다
변수명.length
길이, 갯수를 가져온다.
변수명.push(추가할 값)
가장 마지막 요소 추가
변수명.pop()
배열에서 마지막 요소를 빼내는 것
변수명.unshift()
push 처럼 추가하지만, 가장 앞(0번째 인덱스)에 추가한다.
변수명.shift()
맨앞의 요소를 추가하거나 뺴는 친구라, 모든 인덱스가 밀린다.
*unshift,shift는 앞의 요소가 제거추가로 밀리기때문에 전체적 인덱스값이 다른 결과가 나온다
var arr1 = [1,2,3,'a','b','c'];
var arr2 = new Array(1,2,3,'a','b','c');
console.log( arr1 );
console.log( arr1[0]);
console.log( arr1.indexOf('a')); //arr1의 인대스의 a가 몇 번째인가
console.log( "length : " + arr1.length ); //arr1의 갯수,길이는 몇?
arr1.push('d'); //가장 마지막에 요소 추가
console.log( arr1 );
arr1.pop(); // 가장 마지막 요소 제거
console.log( arr1 );
arr1.unshift('0'); //가장 앞의 요소 추가
console.log(arr1);
arr1.shift(); //가장 앞의 요소 제거
console.log(arr1); //unshift,shift는 앞의 요소가 제거.추가로 밀리기때문에 전체적 인덱스값이 다른 결과가 나온다
딕셔너리
- 키-값 형태로 저장
- 인댁스라는 아이가 사실은 키로 불림
- 객체는 . 과 []로 가져올 수 있다.
자바스크립트의 배열은 다른 언어와 다른점은
키( key ) 를 이용해 값을 저장하였다가 다시 추출할 수 있다는 점이다.
키는 단순한 문자열이다.
즉 인덱스 대신에 키를 사용해 저장하고 다시 가져올 수 있다는 의미
입력 양식 필드에서 값을 가져올 때 아주 편리하다.
var me = {
name: 'ar',
birth: '0302'
};
//me라는 객체에 name, birth라는 값
console.log( me );
console.log( me["name"]); //me라는 객체에서 name이라는 키값을 가져와라
console.log( me.name ); //위랑 동일한 결과가 나온다 같은방법이라고 봐도된다.
me.gender = 'M';
me["age"] = 10; //속성 추가
console.log(me);
배열은 인덱스 / 딕셔너리는 키로 가져온다 외워!!
표준 객체 (=내장 객체)
자바스크립트가 기본적으로 가지고 있는 객체들
프로그래밍을 하는데 기본적으로 필요한 도구들
Date 객체
시간과 날짜를 가져올 때 사용
new date(); 데이트 객체 생성
현재 날짜와 시간
Date의 메서드
date.getYear()
1970년이면 70만 가져오겟지만, 2000년대와 구분하기위해 122 2022 / 22는 1922를 의미한다.
date.getFullYear()
4개의 숫자로 된 연도 반환 / 2022
date.getMonth()
0-11반환 *주의할 점: 월은 0부터 시작!
현재 11월이면, 10으로 표기 됨.
var d1 = new date (2013, 7, 24); // 2013년 8월 24일
date.getDate()
일 표기
date.getDay()
요일은 일요일부터 일월화수목금토 에서 몇번째 인덱스인지 반환, 오늘은 목요일이니 4인덱스를 반환한다.
date.getTime()
1975년도부터 밀리초 반환
date.getHours()
0-23 반환 / 현재 18시 25분이면, 18이 뜸
date.getminuters()
0-59반환
Math 객체
수학에서 자주 사용하는 상수와 함수들을 미리 구현한 JS내장 객체
수학적인 작업을 위한 객체이며, 생성자가 아니다.
따라서 new를 통해 객체 생성 필요가 없어 바로 사용한다.
정확한 결과를 얻어야 할 경우 사용하지 않길 바란다.(우리 프로젝트에서는 괜찮다.)
병원데이터는 정밀해야하기 때문에 이런 곳에서는 사용하지 않는다.
Math.PI
파이값 / 쓰는것보다 3.14 적용하는게 쉬울수도 있다.
Math.abs()
절대값
Math.min()
전달받은 값중 최소값 반환, 아무것도 없으면 인피니티 반환
Math.min( -10, 2, 10) //-10을 반환
비교할 수 없는 문자가 들어갈 경우 NaN값 반환
Math.min(0,'a',5)
Math.max()
가장 최대값을 반환
Math.random()
무작위수를 랜덤 반환 / 0과 1 사이의 난수값 반환
var min = 1; var max = 10;
console.log( Math.random() * (max-min) + min ); //최대값, 최소값을 구할때 수학적으로 모르겠으면 외워라.
Math.round()
반올림 1의자리에서 반올림
Math.round(-1.7) // -2를 반환
Math.floor(1.9)
내림 1
Math.ceil(1.1)
올림 2
console.log(Math.min()); // 전달받은 값중 최소값 반환, 아무것도 없으면 인피니티 반환
console.log(Math.min( -10, 2, 10)); //-10을 반환, 비교할 수 없는 문자가 들어갈 경우 NaN값 반환
console.log(Math.min(0,'a',5));
console.log(Math.max(-10,2,10)); //가장 최대값을 반환
console.log(Math.random()); // 무작위수를 랜덤 반환
var min = 1; var max = 10;
console.log( Math.random() * (max-min) + min ); //최대값, 최소값을 구할때 수학적으로 모르겠으면 외워라.
console.log( Math.round(1.2)); //첫번째? 자리에서 반올림하는 친구 1을 반환, 기본적으로 정수로 반환하기때문에 둘째자리에서 반환하고 싶거든.. 소수점을 정수로 만든다음 다시 소수점..
console.log( Math.round(-1.7));
console.log( Math.floor(1.9)); //내림과 올림을 의미, 정수(기준)로 만들어준다.
console.log( Math.ceil(1.1));
그 외
String
Number
'SeSAC 풀스택 > JavaScript' 카테고리의 다른 글
| JQuery 사용 (0) | 2022.11.05 |
|---|---|
| 2022-11-05 수업 Bootstrap (0) | 2022.11.05 |
| JavaScript DOM 문서 객체 모델 (0) | 2022.11.04 |
| 조건문, 반복문 (0) | 2022.11.01 |
| JavaScript 기초 (0) | 2022.11.01 |
