#TIL (April 20th, 일곱번째 이야기)

Javascript 1분코딩 (ft.최소 자바스크립트 유목민)

https://www.youtube.com/watch?v=vlyHEQSqkl8

자바스크립트 기초 Part 2: 함수, 전역변수와 지역변수, 객체, 생성자

1. 함수(Function)

• 함수의 호출(=실행) : 함수는 우리가 필요할때 그때 그때 호출을 해서 불러내서 사용함

	function sample() { //function 선언하고 (sample) 이름 붙임 
      console.log('Hey there');
    }
	sample(); //sample();를통해 선언하면 'Hey there' 가 출력됨 

• Return 값 : 함수 값을 얻어내는 용도 라고 볼수 있음, 함수 종료후 실행하는곳으로 활용

	// a와 b는 더하기 함수의 매개변수(parameter)
	function  더하기2(a,b){
      document.write(a+b);
      return a + b; //리턴값
    }
	var h = 더하기2(200,500);	
	console.log(h); // 하면 화면과 console 창에 700이 출력된다. 

• 변수의 유효범위(Scope) :

	var a = 100;//전역 변수 
	
	function sample1() {
      console.log('sample1 에서 출력한'+a); 
    }
	
	sample1(); //이렇게 실행하면 값은 'sample1에서 출력한 100'이 됨 
	

	// 그럼 다시 변수 값을 function 안에 넣어보면?
	
	function sample1(){
      var b=200; // 지역변수(함수 내에서만 호출 가능)
      console.log('sample1 에서 출력한'+b);
    }

	sample1(); // 이렇게 실행하면 값은 'sample1에서 출력한 200' 이 됨

	//그럼 다시 !! 
	
	function sample1(){
      var = 200;
    }
	console.log(b); // 출력 안됨. 왜냐? 함수안에서 만든 변수는 
					//밖에서는 접근을 못함! 

* 함수는 **거울유리로된 건물의 실내**와 같음!!! 
  함수 안에서 먼저 찾고 없으면 바깥의 전역변수를 찾음 
  (같은변수가 지역변수/전역변수 다 있을때) 바깥에서는 안으로 찾을 수 없다.
  
  

• 변수 (let, const, var 사용법 아래 참조 : 결론적으론 웬만하면"const 써라" 인듯(https://medium.com/javascript-scene/javascript-es6-var-let-or-const-ba58b8dcde75)

---

2. 객체(object)

출처 https://medium.com/@dlfdn91/9-%EA%B0%9D%EC%B2%B4-object-d37b29f41ad9

• { } 이 curly braces 괄호안에 내용이 속성(property)이고 var 뒤에오는 person이 객체(object) 임

• 객체 안에 function 이 들어가면 그것은 메서드(method) 라고 함

  		var person ={};
  		person.username= 'Jojo'; //속성 (property)
  		person.age =28;
  		person.introduce = function () {
       		console.log('안녕? 나는 Jojo, 28세.');
     		}; // 매서드 (method) 
  		```
  

• 객체 안에 넣거나 바깥에 넣거나 똑같이 적용됨

  	var person ={};
  	person.username= 'Jojo'; //속성 (property)
  	person.age =28;
  	person.introduce = function () {
      		console.log('안녕? 나는 Jojo, 28세.');
    		}; // 매서드 (method) 
  
  	var person2 = {
  	username : 'Joel'; 
  	age : 29;
  	introduce = function () {
      		console.log('안녕? 나는 Joel, 29세.');
    		}
  		};
  
  	person.introduce(); //출력하면 안녕? 나는 Jojo, 28세.
  	person2.introduce(); //출력하면 안녕? 나는 Joel, 29세. 
  같이나옴 즉 {}안에있든 {} 바깥에 있든 똑같음. 하지만 안에 넣는걸 더 추천 !!
  	
  //여기서 더 깔끔한 코딩을 하겠다 하면? this 를 써볼수있음 
  
  	var person ={};
  	person.username= 'Jojo'; 
  	person.age =28;
  	person.introduce = function () {
      		console.log
            ('안녕? 나는' + this.username +  this.age + '세.');
    		}; /
  
  	var person2 = {
  	username : 'Joel'; 
  	age : 29;
  	introduce = function () {
      		console.log
            ('안녕? 나는' + this.username +  this.age + '세.');}
    		
  		};
  
  	//이렇게 입력한 뒤
  
  	person.introduce();
  	person2.introduce();// 실행하면 위의 값과 똑같은 답을 얻을 수 있음.

3. 생성자(Constructor)

• 생성자는 앞자리 대문자로 해줌
• 인스턴스를 만들려고 생성자를 사용하는 것
• This 를 쓰려면 new와 함께 why? this는 윈도우 객체 이기 때문

	function Person(username.age) {
 	this.username = username;
  	this.age = age;
  	this.introduce= function() {
    	console.log('안녕? 나는' + this.username +  this.age + '세.');} 
}

  	// 인스턴스(instance)
	var p1=new Person('Jojo',28);
	var p2=new Person('Joel',29);
  
	p1.introduce();// 
	p2.introduce(); //실행하면 안녕? 나는 Jojo, 28세. 똑같이 나올것