함수
자바스크립트에서 함수도 객체이며(일반객체처럼 취급 될 수 있다) "값"이다.
함수는 값이기 때문에 변수, 객체, 배열, 함수의 리턴값, 함수의 인자값이 될 수 있다.
- 변수
데이터를 저장할 수 있는 공간으로 변할수 있는 값이다.
변수 명명 규칙
- 첫글자로 달러($), 언더바(_), 알파벳이 와야한다.
- 두번째 글자부터는 숫자도 가능하다.
- 자바스크립트 예약어를 사용할 수 없다.(var, let,...)
- 띄어쓰기가 불가하다.
- camelcase표기법을 권장한다.
함수가 변수에 담길 때
function a(){} => var a = function(){}
// 함수의 정의가 a 변수에 담겼으며 함수가 값으로 쓰인 것- 객체
객체는 key, value로 구성된다.
이런 key, value의 쌍을 property라고 하며 property는 어떠한 값을 나타내기 때문에 함수가 들어갈 수 있는 것이다.
=> 객체의 property값이 함수일 때 method(메소드)라고 한다.
객체의 사용
- []대괄호 사용 => console.log(obj['a']);
- . 점사용 => console.log(obj.a); //단, 인덱스 문자열이 변수명명 규칙에 맞는 경우에 한해
- 배열
첫번째 요소, 두번째 요소, 세번째 요소 등 순서가 있는 컬렉션이 필요할 때 사용한다.
배열의 index값에 함수가 들어갈 수 있다.
var process = [
function(x){ return x + 10 }, // 배열의 요소로 함수가 들어감.
function(x){ return x * x },
function(x){ return x / 2 },
]- 함수의 리턴값
함수의 반환된 결과 값을 return이라 하며,
return은 값을 반환한다는 의미이므로 '값'의 자리에 함수가 들어갈 수 있다.
function f(매개변수){
~~~~~~~~
}
return f[매개변수]- 함수의 인자값
function cal (func, num){ // 첫번째 인자 : func, 두번째 인자 : num
return func(num); // 괄호 = 함수를 호출한다는 뜻
}
function increase (num){
return num + 1 ;
}
console.log(cal(increase, 1));=> console문을 보면 cal();함수에 첫번째 인자로 increase, 두번째 인자로1을 넣는데,
cal();함수는 func, num가 각각 첫번째, 두번째 매개변수이므로 func = increase, num = 1이 들어가게 되고 return increase(1);이 실행된다.
여기서 increase(num); 이라는 함수에 num=1을 넣어 실행하면 1+1인 2가 된다.
결과적으로 increase라는 함수의 이름이 cal이라는 함수의 인자로 전달이 되었고 호출되었다.
이렇게 함수의 인자로 함수가 들어가는 경우를 콜백이라고 한다.
- 클로저
내부함수가 외부함수가 포함하고 있는 변수에 접근할 수 있는 것을 가르킨다.
function outter() {
var title = 'coding everybody'; // 외부함수에 정의 되어 있는 지역변수
function inner() {
console.log(title);
}
inner();
}정의된 변수를 사용할 수 있는 소스코드의 집합을 scope라고 하며,
자바스크립트에서 함수를 선언할 때마다 생성되는 것을 scope라고 한다.
내부 scope에서 외부 상위 scope의 변수에 접근이 가능하도록 접근할 때 연결 형식으로 만들어진 것을 scope chain 이라고 한다.
스코프(scope)
-
함수레벨스코프 : 함수 내부에 선언된 변수만 지역변수로 취급한다.(if,for, while,..등 {...} 코드블럭 내부에 선언된 변수는 전역변수로 취급한다.
-
블록레벨스코프 : 함수 내부는 물론, if문이나 for문등의 코드블럭{...}에서 선언된 변수도 지역변수로 취급한다.)
=> var : 함수레벨스코프 / let,const : 블록레벨스코프
호이스팅
함수가 실행되기 전, var변수 또는 함수 선언들이 스코프내의 최상단으로 올라가 읽히는 것이다.
console.log(a);
var a = 10;
console.log(a);자바스크립트는 위에서 아래 순서대로 코드를 실행한다.
뒤에 선언된 변수 a가 앞에서 참조되었음에도 실행이 된다.
그 이유는 변수 호이스팅이 발생했기 때문이다.
함수가 실행되기 전 자바스크립트가 선언을 호이스팅한 것이다.
=>var는 호이스팅되며 let과 const도 호이스팅이 되지만 방식이 다르다.
var, let, const 차이
- 중복선언 가능여부
- var - 중복선언이 가능하다.(이 경우 마지막에 할당된 값이 변수에 저장된다.)
- let, const - 중복선언이 불가능하다.(이미 선언한 변수를 다시 선언할 경우 에러 발생)
- 재할당 가능여부
- var, let - 변수의 값의 재할당이 가능하다.(변수 선언 및 초기화 이후 반복해서 다른 값을 재할당 할 수 있다.)
- const - 값의 재할당이 불가능한 상수이다.(변하고 싶지 않은 값들을 만들 때 사용)
var a = 5;
a = 4;
a = 3;
let b = 1;
b = 2;
b = 3;
const c = 10;
c = 15; // 이미 선언되었다는 에러- 변수 스코프
- var - 함수레벨스코프 : 함수내부에 선언된 변수만 지역변수로 한정, 나머지는 모두 전역변수로 취급한다.
- let, const - 블록레벨스코프 : 함수 내부는 물론 모든 코드블럭{}에서 선언된 변수를 지역변수로 취급한다.
- 변수 호이스팅 방식
- var - 변수 선언 -> undefined로 정의(초기화)함 => 선언과 초기화가 동시
- let, const - 변수 선언 -> 선언만 하고 정의(초기화)는 하지 않음 => 선언과 초기화가 분리
=> 그래서 let,const도 호이스팅이 발생하긴 하지만 값을 참조할 수가 없어서 호이스팅이 발생하지 않은 것처럼 보인다.
ex)
let a = 10;
if(true){
console.log(a);
let a = 20;
}전역변수 a가 있음에도 지역변수 앞에서 참조시 에러가 발생한다.
전역변수와 같은 이름의 지역변수를 선언하면 지역변수가 전역변수보다 우선순위가 되기 때문에 지역변수 a의 선언이 호이스팅되었고 값은 참조 되지 않아 a에 접근할 수 없게 된다.
