[JavaScript] 함수 , 익명함수, 즉시실행함수
함수 선언 및 호출
function 함수명() {
명령
}
함수 사용 예제
<script>
function addNumber(){
var num1 = 2;
var num2 = 3;
var sum = num1 + num2;
alert("결과값: " + sum);
addNumber();
addNUmber();
</script>위 코드를 실행하면 함수가 2번 호출되어 결과값 : 5 라는 알림창이 두번으로 연속해서 뜨게된다.
var를 사용한 변수의 특징
자바스크립트 ES6 버전에서는 변수를 선언하기 위해 let과 const 라는 새로운 예약어가 생겼다.
변수의 적용 범위 스코프 알아보기
js 에서 변수를 선언하고 사용할 때 변수가 적용되는 범위를 스코프라고 한다.
변수가 어디까지 유효한지 범위를 가리키는 영역이 필요한 것이다. 함수에서 변수 사용시 주의해야한다.
한 함수 안에서만 사용하는 변수를 지역변수, 소스 전체에서 사용하는 변수를 전역변수라고 한다.
지역변수 선언 : var sum = 100 + 200;
전역변수 선언 : multi = 10 * 20; (var 사용 x)
var과 호이스팅
js 에서 변수를 사용할때 호이스팅을 조심해야한다.
호이스팅이란 끌어올린다를 뜻하며 상황에 따라 변수의 선언과 할당을 분리해서 선언 부분을 스코프의 가장 위쪽으로 끌어올리는 것이다.
끌어올린다고 해서 실제 소스 코드를 끌어올리는 것이 아닌 그런식으로 해석한다는 의미이다.
<script>
var x = 10;
function displayNumber(){
console.log("x is " + x);
console.log("y is " + y);
var y = 20;
}
displayNumber();
</script>
위와 같은 결과가 나온 것은 호이스팅 때문이다.
자바스크립트 해석기는 함수 소스를 훑어보며 var를 사용한 변수는 따로 기억해둔다.
변수 실행하기 전이지만 이런 변수가 잇구나 라고 기억해두기 때문에 선언한 것과 같은 효과가 있다.
let / const
let을 사용한 변수의 특징
var 예약어를 사용한 변수는 var 예약어를 빠뜨리면 전역변수가 되기도 하고 ,
소스 길이가 길어지면 실수로 사용하는 변수를 재선언하거나 값을 재할당 하는 경우가 생긴다.
그래서 ES6 에서는 변수를 선언하기 위한 예약어로 let 와 const가 추가되었고, var는 사용하지 않는걸 권장한다.
var 와 let, const 의 가장 큰 차이는 스코프의 범위이다.
var는 함수 영역의 스코프를 가지지만 let, const는 블록 영역의 스코프를 가진다.
블록 안에서만 쓸 수 있는 변수
let 예약어로 선언한 변수는 변수를 선언한 블록{ } 안에서만 유효하다.
아래 예제를 보면 calcSum() 함수에서 변수 sum은 let 예약어를 사용해 선언한다.
sum 은 함수 calcSum() 블록 안에서만 사용할 수 있다.
<script>
function calcSum(n){
let sum = 0;
for(let i = 1; i < n + 1; i++){
sum += i;
}
console.log(sum);
}
calcSum(10);
</script>결과 : 55
전역 변수를 사용하고 싶다면 let 을 쓰지 않고 변수 이름과 초깃값만 할당하면 된다.
<script>
function calcSum(n){
sum = 0;
for(let i = 1; i < n + 1; i++){
sum += i;
}
}
calcSum(10);
console.log(sum);
</script>
재할당은 가능하지만 재선언은 할 수 없는 변수 let
let 예약어를 사용하여 선언한 변수는 값을 재할당할 수 있지만 변수를 재선언할 순 없다.
예약어 var 와 같이 실수로 같은 변수의 이름을 사용할 걱정은 없다.
아래 예제 처럼 for 문이 끝나고 이미 값이 저장되어있는 sum 변수에 값을 재할당한다.
<script>
function calcSum(n){
let sum = 0;
for(let i = 1; i < n + 1; i++){
sum += i;
}
sum = 100;
console.log(sum);
}
calcSum(10);
</script>결과 : 100
블록 변수 sum 을 재선언하면 아래와 같이 불가능.
호이스팅이 없는 변수
var 예약어를 사용한 변수는 선언하기 전에 실행하더라고 할당되지 않은 자료형이 undefined 값을 가진다.
하지만 let 예약어를 사용한 변수는 선언하기 전에 사용할 경우 오류 메시지를 나타낸다.
const를 사용한 변수의 특징
const 역시 let과 마찬가지로 변수를 선언할 때 사용하는 예약어다.
const 로 선언한 변수는 상수 변수이다. 재할당, 재선언 모두 불가능 하며 블록 레벨의 스코프를 가진다.
변수 사용 팁!
- 전역 변수는 최소한으로 사용
- var 변수는 함수의 시작 부분에서 선언
- for 문에서 카운터 변수를 사용할 때는 var 예약어를 사용하지 않기
- ES6을 사용한다면 var 보다 let 사용하기
익명 함수
익명 함수란 선언할 때 이름을 붙이지 않는 함수이다.함수 자체가 식(expression) 이므로 함수를 변수에 할당할 수 있으며 다른 함수의 매개변수로 사용할 수 있다.
<script>
var sum = function (a, b) {
return a + b;
}
document.write("결과: " + sum(10,20));
</script>
즉시 실행 함수
일반적으로 함수는 선언하고 필요할 때 호출해서 실행하는 방법을 사용한다. 하지만 한 번만 실행하는 함수라면 함수를 정의하면서 동시에 실행할 수 있다.이를 즉시 실행 함수라고 부르며 함수를 실행하는 순간에 자바스크립트 해석기에서 함수를 해석한다.
예제
<script>
(function() {
let userName = prompt("이름 적어");
document.write("하이루 " + userName);
}())
</script>
화살표 함수
ES6 버전부터는 => 표기법을 사용해 사용하고, 화살표 함수는 익명함수에서만 사용할 수 있다. 매개 변수 없는 함수 사용 예제
<script>
// 매개변수가 없는 함수
const hi = function () {
return "안녕";
}
//매개변수가 없는 화살표 함수
const hiArrow = () => { return "안녕 화살표 함수" };
//매개변수가 없는 화살표 함수 (중괄호 생략)
const hiAr = () => "안녕하세요";
document.write(hi() + "<br>");
document.write(hiArrow() + "<br>");
document.write(hiAr() + "<br>");
console.log(hi());
console.log(hiArrow());
console.log(hiAr());
</script>
매개변수 1개 함수
<script>
// 매개변수가 1개인 함수
let hi = function(user) {
document.write(user + "님 환영!");
}
// 매개변수가 1개인 화살표 함수
let hiArrow = user => {
document.write(user + "님 환영해 화살표!");
}
// 사용자 이름을 변수에 저장
let username = "채원";
// 함수 호출
hi(username );
document.write("<br>");
hiArrow(username);
</script>
매개변수 2개인 함수
<script>
//매개변수가 2개인 함수
let sum = function (a, b) {
return a + b;
}
//매개변수가 2개인 화살표 함수
let sumAr = (a, b) => a + b;
let lunch = "오늘의 점심은 "
let sushi = "초밥"
document.write(sum(lunch, sushi));
document.write("<br>");
document.write(sumAr(lunch, sushi));
</script>
