함수(funtion)
함수란 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록을 의미한다.
함수는 필요할때마다 호출하여 해달 작업을 반복해서 수행할 수 있다.
함수의 기초
함수의 정의
ES5
function addNum(x,y){
return x+y;
}
ES6
const addNum = (x,y) =>{
return x+y;
}
console.log(addNum(2,3)); //5
console.log(addNum(5,4)); //6
-
자바스크립트에서는 함수도 하나의 타입(datatype)
따라서 함수를 변수에 대입하거나, 함수에 프로퍼티를 지정하는 것도 가능하다. -
함수 이름(function name)은 함수를 구분하는 식별자(identifier)
매개변수(parameter)란 함수를 호출할 때 인수(argument)로 전달된 값을 함수 내부에서 사용할 수 있게 해주는 변수이다.
반환(return)문
-
자바스크립트에서 함수는 반환(return)문을 포함할 수 있다.
이러한 반환문을 통해 호출자는 함수에서 실행된 결과를 전달받을 수 있다. -
반환문은 함수의 실행을 중단하고, return 키워드 다음에 명시된 표현식의 값을 호출자에게 반환한다. 반환문은 배열이나 객체를 포함한 모든 타입의 값을 반환할 수 있다.
function addNum(x,y){
x+y;
}
console.log(addNum(2,3)); //undefined
//함수는 반환문을 선언해야 리턴값을 반환할 수 있다.함수의 호출
정의된 함수는 프로그램 내에서 호출되어야 비로소 실행된다.
function addNum(x,y){
return x+y;
}
const sum = addNum(3,4);
console.log(sum); //7인수(argument)로 전달된 숫자 3과 4는 함수에서 정의된 매개변수(parameter) x와 y에 각각 대입되고, 호출된 함수의 내부에서는 매개변수 x와 y에 각각 3과 4가 대입되어 계산된다.
값으로서의 함수
자바스크립트에서 함수는 문법적 구문일뿐만 아니라 값(value)이기도 하다.
따라서 함수가 변수에 대입 될 수도 있으며, 다른 함수의 인수로 전달될 수도 있다.
function addNum(x,y){
return x+y;
}
const sum = addNum(addNum(1,2),addNum(3,4));
console.log(sum); //10 == addNum(3,7);변수의 유효 범위
자바스크립트에서 객체나 함수는 모두 변수(variable)이다.
변수의 유효 범위(scope)란 해당 변수가 접근할 수 있는 변수, 객체 그리고 함수의 집합을 의미한다.
- 지역 변수(local variable)
- 전역 변수(global variable)
지역 변수
지역변수(local variable)란 함수 내에서 선언된 변수를 가리킨다.
이러한 지역변수는 변수가 선언된 함수 내에서만 유효하며, 함수가 종료되면 메모리에서 사라진다.
함수의 매개변수 또한 함수 내에서 정의되는 지역 변수처럼 동작한다.
function localVariable(){
const x = 10;
console.log("function localVariable 실행");
console.log("함수 내부에서 지역변수 x의 타입은 : "+ typeof x);
}
localVariable(); // 함수 localVariabale을 호출한다.
console.log("함수 밖에서의 지역변수 x의 타입은 : "+ typeof x);
//함수 밖에서 x는 정의된적이 없기 때문에 identified
전역 변수
전역 변수(global variable)란 함수의 외부에서 선언된 변수를 가리킨다.
이러한 전역 변수는 프로그램의 어느 영역에서나 접근할 수 있으며, 웹 페이지가 닫혀야만 메모리에서 사라진다.
1.
const x= 20;
// 전역 변수 x는 웹페이지가 구동할 경우 메모리에 계속 존재하고
// 웹페이지가 종료되어야 메모리에서 사라진다.
function localVariable(){
const x = 10;
console.log("지역변수 x의 값 : " + x);
}
localVariable(); // 함수 localVariable의 지역변수 x는 함수의 호출이 종료되면 메모리에서 사라진다.
console.log("전역변수 x의 값 : " + x);
2.
let x= 20;
function localVariable(){
x = 10;
console.log("전역 변수 x의 함수 호출 후 값 : " + x);
}
console.log("전역 변수 x의 함수 호출 전 값 : " + x); // 20
localVariable(); // 10
3.
function localVariable(){
x = 10;
console.log("함수 내부의 전역변수 x : " + x);
}
localVariable(); //10
console.log("함수 내부에서 선언한 전역변수 x : " + x); //10
전역 변수는 함수 외부뿐만 아니라 내부에서도 접근하여 변경할 수 있다.
자바스크립트에서 지역 변수를 선언할때는 반드시 키워드를 사용하여 선언해야한다.
함수 내부에서 키워드를 사용하지 않고 변수를 선언하면, 해당 변수는 지역 변수가 아닌 전역 변수로 선언된다.
함수의 유효 범위
대부분의 프로그래밍 언어에서 블록 내에서 정의된 변수를 블록 외부에서는 접근할 수 없다.
블록(block)이란 코드 내에서 중괄호{}로 둘러싸인 부분을 가리키며 블록을 기준으로 하는 유효 범위를 블록 단위의 유효 범위라고 한다.
하지만 자바스크립트는 다른 언어와는 달리 함수를 블록 대신 사용한다. 자바스크립트에서 함수는 자신이 정의된 범위 안에서 정의된 모든 변수 및 함수에 접근할 수 있다.
const x = 20;
const y = 10;
function sub(){
return x-y; //전역변수인 x,y에 접근
}
console.log("함수 sub()의 값 : " + sub()); // 10
function parentFunc(){
//전역변수로 존재하는 x,y의 범위를 제한한다.
const x = 7; //지역변수 x
const y = 7; //지역변수 y
function add(){ //내부함수 add()
return x+y; //지역변수 x,y
}
return add();
}
console.log("함수 parentFunc()의 값 : " + parentFunc()); // 14함수 호이스팅(hoisting)
자바스크립트에서 함수의 유효 범위라는 것은 함수 안에서 선언된 모든 변수는 함수 전체에 걸쳐 유효하다는 의미이다. 그런데 이 유효 범위의 적용이 변수가 선언되기 전에도 똑같이 적용된다.
이러한 자바스크립트의 특징을 함수 호이스팅이라고 한다.
즉, 자바스크립트 함수 안에 있는 모든 변수의 선언은 함수의 맨 처음으로 이동된 것처럼 동작한다.
1.
const x = 10;
const y = 20;
function print(){
console.log(x,y);
}
print(); // 10 20
2.
const x = 10;
const y = 20;
function print(){
console.log(x,y);
const x = 1;
const y = 2;
}
print(); //Error 발생, ES6 문법은 hoisting 적용이 불가능하다.
3.
var x = 10;
var y = 20;
function print(){
console.log(x,y);
var x = 1;
var y = 2;
}
print(); //undefined undefined 변수 선언은 됐지만, 값 초기화가 되지 않았다.
3-1. hoisting 적용된 모습
var x = 10;
var y = 20;
function print(){
var x; var y;
console.log(x,y);
x = 1;
y = 2;
}
print();일반적으로 var 대신 let이나 const를 사용하는 것이 좋다. 왜냐하면 variable hoisting을 피하는 데 도움이 되고 코드에 대한 추론을 쉽게 하기 때문이다. var를 사용할 경우 호이스팅이 적용되어 변수 선언부가 함수 최상단에서 변수를 선언하고 초기화는 따로 진행된다.
매개변수(parameter)
자바스크립트에서 함수를 정의할 때는 매개변수의 타입을 따로 명시하지 않는다.
함수를 호출할 때에도 인수(argument)로 전달된 값에 대해 어떠한 타입 검사도 하지 않는다.
함수를 호출할 때 함수의 정의보다 적은 수의 인수가 전달되더라도, 다른 언어와는 달리 오류를 발생시키지 않고 전달되지 않은 나머지 매개변수에 자동으로 undefined 값을 설정한다.
function addNum(x,y,z){
return x+y+z;
}
console.log(addNum(1,2,3)); //6
console.log(addNum(1,2)); //NaN 1+2+undefined
console.log(addNum(1)); //NaN 1+undefined+undefined
console.log(addNum()); //NaN undefined+undefined+undefinedaddNum() 함수를 호출할 때 인수가 세 개보다 적게 전달되면, 계산할 수 없다는 의미인 NaN을 반환한다. 전달되지 않은 나머지 값이 자동으로 undefined 값으로 설정되어, 산술 연산을 수행할 수 없기 때문이다.
