javascript (2) - 함수와 이벤트

 

 

1. 함수 

 

1.1 함수 선언 

 

함수 선언문

//함수 선언문 
function 함수명(){

}

//함수 표현식
const 변수명  = function(){
	//익명함수 
}

//람다식 
const 변수명 = () => {

}

//생성자 함수 
const object = new Function()

- 실행문에서 return을 명시적으로 적지 않으면, undefined가 자동반환된다.

 

 

2. var 변수의 특징 

 

2.1 변수의 적용 범위 스코프 알아보기 

 

- 자바 스크립트 변수는 지역변수와 전역변수로 나눌 수 있음

- 전역변수를 선언하려면, 함수 스코프 밖에서 선언하거나 함수 안에서 var 예약어를 빼고 선언해야한다.

   var 예약어를 사용하지 않으면 전역변수가 된다. 

function addNumber(){
	var sum = //지역변수
    multi = //전역변수 (선언이 아니라 사용)
}

2.2 var와 호이스팅

 

- JS에서 변수를 사용할 때 조심해야할 개념이 호이스팅이 있다. 

- 호이스팅은 끌어올린다를 의미 상황에 따라 변수의 선언과 할당을 분리하여 선언 부분을 

스코프의 가장 위쪽으로 올리는 것을 의미한다.

- JS 인터프리터는 소스를 훝어보면서 var를 사용한 변수는 따로 기억함 따라서 마치 선언한 것과 효과가 있는 것이다.

 

//실제코드
function displayNumber(){
	console.log(y);
    var y = 20;
}

//자바 인터프리터는 

function displayNumber(){
	var y;
    console.log(y);
    y = 20;
}

test();
function test(){
	console.log("test"); // 함수의 호이스팅 
}

//스코프 
var x = 10; //전역변수
function() test2() {
	var x =20; //지역변수 
}
test2();

- y변수를 선언 전에 사용했는데도 불구하고 작동은 함 y=undefined임 (is not defied여야 맞는데..)

 

2.3 변수의 재선언과 재할당 

 

- var를 사용한 변수는 호이스팅 외에도 재선언과 재할당이 가능함 

 

var sum = 100;
sum = 10;
var sum =20;

- 재선언은 안되는게 일반적인데.. 재선언도 가능 

 

3. let과 const의 등장 

 

3.1 let을 사용한 변수의 특징 

 

- var는 함수영역 스코프를 가지지만, let과 const는 블록영역 스코프를 가진다.

 

> 블록 안에서만 쓸 수 있는 변수: let을 사용하면 블록에서만 유효하고 블록을 벗어나면 사용 불가 

                                                  전역변수로 사용하고 싶으면 함수안에서 let을 빼라 

> 재할당은 가능하지만 재선언은 불가 (같은 스코프 내에서)

> 호이스팅이 없는 변수

 

3.2 const 사용한 변수 특징 

 

- const는 상수 변수임 재할당 재선언이 불가하다. 블록레벨 스코프를 가진다.

 

3.3 자바스크립트 변수 가이드

 

1. 전역변수는 최소한

2. var변수는 함수의 시작 부분에서 선언 (함수 안에서 지역변수로 사용하려고 사용하기도 함)

3. for문 카운터는 let을 사용 

4. var보단 let을 사용하는 것이 좋다 (ES6)

 

*전역변수와 나머지로 나누어 생각합시다. (전역만 쫌 안써봄)

*name hiding ? 이었나 지역에서 같은 이름 재선언되면 가려지는거.. 생각하쟛 (같은이름이면 지역우선)

 

4. 재사용할 수 있는 함수 만들기 

 

4.1 매개변수

 

function add(a=1,b=2){ //default값을 줄 수 있다.
	console.log(arguments); //함수라는 객체에 내장 속성 -> 전달된 매개변수 볼 수 있음
	    
    //return 문이 없으면 반환값은 undefined;
}

add(1,2,3); //선언된 매개변수보다 더 넣을 수 있다 (3은 무시됨)

function add2(..numbers){
	//rest매개변수 배열로 받음 (가변인자임)
}

(function run(){

})(); //선언하자마자 사용하기 -> 함 실행해보고 싶을 때 종종 사용 (많이는 아님)


function eee(){
    console.log(arguments);
}

eee(1,2,3,4,5,6,7); //이게 왜.............
//arguments가 받음...아니..?

 

4.2 콜백함수 

 

- 일급함수 -> 함수가 매개변수, 반환값, 할당(변수에), 동일비교가 가능한 함수를 의미 

- JS의 함수는 일급함수이다.

- 고차함수는 매개변수로 함수를 받는 함수이다.

- 콜백함수는 고차함수 입장에서 외부로부터 전달받은 함수이다. 전달과정에서 함수를 실행하는게 아니라, 전달받고 

특정 상황에 따라 함수를 호출하는 것이다.

(실행할 함수도 의도에 따라 바꿔 줄 수 있다. 자바에서 함수형 인터페이스를 메서드에 집어넣는 것과 같음)

- 비동기에서 흐름제어용으로 사용되기도 함!

 

*콜백함수의 매개변수는 지정해서 넘겨주는거 아니고, 고차함수 안에서 결정됨!