객체와 함수. 생성자. this / window

[ 객체 ]
< JS는 객체도, 함수도 "변수" 취급 >
--------------
class A{}
A a1 = new A();

=> JS 에선, 이걸 간소화 시켜 사용한다.

(1) 기본 literal 객체정의

let c1 = {
id : 100,
name : "June",
salary : 4500.99,
f1 : function(){}
};

- 전형적인 JS 에서의 객체 모습이다.
=> 이게 "JSON 형식"
: 이 형식은 통신할 때 다른 언어프로그램 에서도
모두 인식이 되는 약속된 형태



(2) 생성자 함수 이용


function emp(id, name, salary){
this.id = id;
this.name = name;
this.salary = salary;
this.f1 = function(){ };
};

=> 매개변수로 받아서, 그걸 자기자신의 프로퍼티 값으로 초기화

( 클래스, 전역변수 선언 없이, 생성자만 있는 모습.
=> 이 생성자 만으로 줄여서 객체로 사용하는 것 )

let c1 = new emp(100, "june", 30000);
=> 객체 생성


< property >
let c1 = new emp(100, "june", 30000);

객체 : c1
property : id,name,salary (객체에 포함된 변수)


<조회> getter
document.wirte( c1.id + " " + c1.name );
- get 해서 사용할 수 있고

<변경> setter
c1.salary = c1.salary + 5000;
- get 한걸 새롭게 대입해서 set 할 수도 있다

<추가>
c1.dept = "인재개발부";
- 이렇게하면, 객체에 새롭게 property (변수)를 추가 할 수 도 있다.

<삭제>
delete c1.salary;
- 객체에 있는 property(변수)를 삭제

추가 / 삭제 기능은 JS 특이점 ( Java 는 꿈도 못꿈 )


[ in ]
: 객체에 프로퍼티 있는지 Boolean

doc.write( "name" in emp ); => true / false
( "프로퍼티" in 객체 )

=> if 문에 조건으로 사용

( p1 객체안에 detail 이라는 프로펄티가 있다면 그것까지 포함해서 출력 / else 빼고 출력 )

if("detail" in p1){
document.write("생성자 : "+p1 + " " + p1.detail +"<br>");
} else {
document.write("생성자 : "+p1 + "<br>");
}

[ for + in ]
: 자바 foreach 구문과 유사 ( : 를 in 으로 사용 )
뽑는 값은 자바의 map 에서 key 개념으로
객체의 경우 property 종류가 기본으로 뽑히고,
배열의 경우 index 가 기본으로 뽑힌다.

value 를 뽑으려면 객체[v] / 배열[v] 하는 식으로 뽑아서 사용

for( let v in emp ) {
document.write ( v ); }
=> emp 객체에 프로퍼티(변수) 종류 뽑기

for( let v in emp) {
document.write ( v + " = " + emp[v] ); }
=> emp의 v 프로퍼티 vlue값 뽑기
즉, emp의 name, id 등의 value값 뽑기

- value 뽑을 때, v 는 String 타입이라서
emp.v 로 뽑으려 하면, 사실상 emp."id" 이렇게 되는거라 인식을 못한다.
그래서 제공하는 같은의미의 문법
emp[ "id" ] 을 사용해서 뽑는다.

< 같은 표현 >
emp.id === emp[ "id" ]



-------------------------------------------------------


[ 함수 ]
1. 정의
function f1(){ }
2. 호출
f1( );

< 지역변수 / 전역변수 >
- 지역변수, 전역변수 개념 < Script > 내부에서 똑같이 적용
- 함수안에서 선언된 객체나 함수의 scope 는
지역변수로, 그 안에서만 사용 가능하다.
- Hoisting 기능때문에, 지역에서 오히려 선언 한적없는 변수를 그냥 사용하면,
function f1() { a = 10; } // 처음등장하는 a 변수
오히려 전역변수 구역으로 Hoisting 되어
var a;
=> 전역변수로 선언 된 것으로 간주되므로, 다른 scope 에서도 사용이 가능해버린다.

노리고 사용하자면, 전역변수쪽에 선언하고 오는 그 약간 귀찮은걸 안해도 된다는 장점이 있겠지만,
실수로 선언안한게 전역에서 사용되는등 위험성이 존재하므로, 되도록 차근차근 지역/전역 확실히 구분하며 사용해야 겠다.


- 함수도 hoisting 된다.
f1(); 호출부터하고
나중에
function f1(){} 정의해도
실행된다.


< 이름 주고 사용 함수 / 이름 없이 바로사용 함수 >

1. 이름주고 function f1( ){ ~ } 함수 정의한 다음
필요할때 f1(); 호출해서 사용한다.

2.이름을 불러서 "직접" 호출할 필요가 없다면,
즉, f1(); 이런식으로 호출할 필요가 없는 경우 => 바로 정의해서 사용 가능
( 정의해둔거 있으면 function() { 이안에 f1( ); } 이런식으로 넣고 다른거 추가해서 사용해도되고,
정의해둔거 바로 onclick = f1; 이렇게 사용가능!
onclick = f1( ); 이건 태그속성에서만 쓰는 표현!  DOM 방식에선 f1; 으로 줘야함 )

(1) onload = function( ){ }
- onload 는 프로그램 실행하면 자동으로 실행되게 해놓는 것이기 때문에
호출할 필요 없이, 이름 안주고 바로 사용

(2) onclick
document.getElementById("clock").onclick=
function(){ }
- 이벤트 실행될때 자동으로 실행되는 것이므로
호출 필요 X, 이름 안주고 바로 사용가능


(3) setInterval / setTimeout
setInterval( function(){ }, 1000 );
- 타이머로 자동실행되는 함수도,
시간에 따라 자동으로 실행되는것이므로
호출 X, 이름 없이 바로 사용

(4) 이름없는 함수 + 즉각 호출


( function( ){ ~ } ) ( );


- 함수전체를 ( )괄호로 감싸주고,
뒤에 매개변수에 넣을 괄호 ( ); 써준다.
=> 마치 f1( ); 이런 형태로 만드는 것
그 자리에서 즉각 호출된다.

(5) 변수처럼 사용 함수
let myf1 = function(){ }
변수로 넣어두고, 그냥 함수사용하는것 처럼 사용한다.
myf1( );

< JS는 객체도, 함수도 변수로 취급한다 >
---


[ 함수 return ]
- 리턴타입은 없다.
- 리턴값 없이 return; 이렇게 사용은 못한다.

function f1(){
let a = 10, b=20;
return a+b; }

var f1result = f1();
document.write(f1result);

function f3(a, b){
return a+b; }

document.write(f3(20,30)); => 50
documetn.write(f3("자동", "오버로딩") ); =>자동오버로딩
타입에 따라 자동으로 오버로딩


---


[ 객체 + 함수 ]

- 그냥 독단적으로 사용되는 함수는 함수라고 부르고
객체안에서 정의된 함수는 메소드 라고도 부른다.

var emp = {
id : 100,
name : "june",
salary : 30000,
f1 : function(){ ~ }
};

객체 안의 함수는
함수명 : function( ) { }
이렇게 정의해주면 된다.

객체안에 함수니까, 값 뽑아쓸 때
f1(); 이렇게 사용 못하고
emp.f1(); 이렇게 사용



< this / window>

let salary = 10000;

var emp = {
id : 100,
name : "june",
salary : 30000,

f1 : function(salary){
this.salary = this.salary + window.salary;
document.write( this.salary );
}
};

=> 현재 객체안의 함수 f1 안에서 ( 로컬의 로컬. 두번 들어옴 )
salary => 매개 변수
this.salary => 객체 변수 (30000) ( 한칸 밖으로 )
window.salary => 전역 변수 (10000) (두칸 밖으로 )

=> 객체 바깥에서
emp.f1( this.salary );
this.salary => 전역 변수(10000)

=> 객체내의 함수에서, 객체의 전역변수를 쓰고싶으면
this 를 꼭 붙여줘야 한다.
( java 에서는 안써줘도 자동으로 인식해주긴 했는데,
JS에서는 안주면 무조건 매개변수로만 인식한다. (엄격))