Javascript #1

Javascript를 왜 쓰냐

1. html을 변경하고 씀

document.getElementById('hello').innerHTML = 'hi';

2. 이벤트리스너 정의하려고 씀

   <button id = "button"> 버튼 </button>

   document.getElementById('button').addEventListener('click', function(){
   document.getElementById('hello').innerHTML = 'hi';  })

3. 잠깐 자료 저장해두고 싶을때 변수 만들어 씀

  var name = 'kim';
  var age =. 20;
  var
  let
  const

4. 긴 코드 짧게 축약하려면 함수를 만들어 쓴다.

 function 작명(){
          document.getElementById('hello').innerHTML = 'hi';  })
  }
  작명()

5. 함수를 다양하게 쓰려면 파라미터로 업그레이드

  function 작명(파라미터, 파라미터2 ){
          document.getElementById('hello').innerHTML = 파라미터  })
  }
  
  작명('hello')

6. 자료 한번에 여러개 저장하고 싶으면 array, object

var name = ['kim', 'john']
  var obj = {
    name : 'kim',
    age : 20
  };

  name[1] //john
  obj.name //kim
  obj['age'] //20

7. if / else

8. for문

[1,2,3,4].forEach(function(){
  
})

[1,2,3,4].forEach(function(a){
  a //배열 안에이 있는 자료
})

this

오브젝트 생성기계(Constructor) > 기계안에서 쓰면 새로 생성되는 오브젝트를 뜻함

var 어쩌구 = {}

function 기계(){
  this.이름 = 'kim'
}

함수안에서의 this는 새로 생성되는 오브젝트 (instance)

기계(Constructor)에서 오브젝트 생산하는 법

var 어쩌구 = {}

function 기계(){
  this.이름 = 'kim'
}

var 오브젝트 = new 기계();

console.log(오브젝트);

이벤트리스너

<button id="버튼">
  버튼
</button>

document.getElementById().addEventListener('click', function(e){
  this // =e.currentTarget
  console.log(this); // 결과로 html태그가 나오는데 이벤트가 동작하는곳을 의미한다.
  console.log(e.currentTarget);
})

Case Study

//Case Study1.
document.getElementById().addEventListener('click', function(e){
	var 어레이 = [1,2,3];
  어레이.forEach(function(a){ //콜백함수. 함수안에 들어가는 함수
    console.log(a)
    console.log(this) : // window 출력됨 : 오브젝트내의 메서드를 쓰면 그 메서드를 가지고 있는 오브젝트, 엄밀히 따지면 그냥 일반함수이므로 일반함수에서는 window
  })
})




//Case Study2.
var 오브젝트 = {
  name : ['김','이','박']
  함수 : function(){
    console.log(this) // 오브젝트
    오브젝트.name.forEach(function(){
      console.log(this) 
    })
  }
}

오브젝트.함수()  // 오브젝트 ? X ,,, Window O
forEach다음에 나오는 함수는 그냥 일반함수이기 때문

위의 this는 오브젝트가 나온다.




//Case Study3.
var 오브젝트 = {
  name : ['김','이','박']
  함수 : function(){
    console.log(this) // 오브젝트
    오브젝트.name.forEach(()=>{
      console.log(this) // 오브젝트
    })
  }
}

arrow function은 내부의 this값을 변화시키지 않음
(외부의 this값 그대로 재사용 가능)--> //결과 : 오브젝트
  
arrow function을 이용하면 bind, call등을 신경쓸 경우가 줄어든다.

Arrow Function

// 함수를 만드는 방법 2가지

//1번째 방법
var 함수 = function(){
  
}
//2번째 방법
function 함수(){
  
}

//Arrow Function
var 함수 =()=>{
  
}
함수();



함수를 써야 할 때
1. 코드들을 기능으로 묶을 때 사용
2. 입출력 기계를 만들고 싶을 때 사용



var 함수 = (a) => { return a + 10 }
함수(5) // 15



파라미터가 1개뿐이라면 소괄호 생략 가능
리턴 구절이 1줄이라면 중괄호 생략 가능

var 함수 = a => return a + 10 
var 함수 = a,b => return a + 10 // X
var 함수 = a => console.log(a); // O


[1,2,3,4].forEach(function(a){
  console.log(a)
})
//축약
[1,2,3,4].forEach(a=> console.log(a) );


//Arrow function 특징
// : 바깥에 있던 this값을 내부에서 그대로 사용
document.getElementById().addEventListener('click', (e)=>{
  this; //(함수 내의 this값을 변경시키지 않음)
  console.log(this) //(==window)	
	
  일반 이벤트 리스너에서는 (애로우펑션 적용 안할 때) e.currentTarget
  안에서 사용하고 싶으면 this 대신 e.currentTarget쓰면 됨
  
})



var 오브젝트 = {
  함수 : function()[
   
  ]
  
  //가능
   함수 : ()=>[
    this; //= window임
  ]

}