Keep going
함수와 변수 본문
- 여러 동작을 묶은 덩어리, 함수
- 자바 스크립트 프로그램은 단순히 동작 하나만 실행되는 게 아니라 여러 가지 동작이 연결된다. 이렇게 동작해야 할 목적대로 묶은 명령을 함수라고 한다.
- 함수 선언 및 호출
|
<body>
<script>
function addNumber() {
var num1 = 2;
var num2 = 3;
var sum = num1 + num2;
alert("결과 값: " + sum);
}
addNumber();
</script>
</body>
|
cs |
- 재사용할 수 있는 함수 만들기
- 함수를 선언할 때부터 외부에서 값을 받아 줄 변수를 미리 만들어야 한다.
- 이것을 매개변수라 하고 함수를 호출할 때 괄호 안에 매개변수의 이름을 넣는다.
|
<script>
function addNumber(num1, num2){
var sum = num1 + num2;
return sum;
}
var result = addNumber(2, 3);
document.write("두 수를 더한 값 : " + result);
</script>
|
cs |
- 매개변수 기본값 지정하기
- ES6부터는 함수에서 매개변수를 선언할 때 기본값을 지정하는 기능도 생겼다.
- 예를 들어 매개변수의 변숫값을 넘겨받지 못했을 때 기본값을 사용한다.
|
<body>
<script>
function multiple(a, b = 5, c = 10) { // b = 5, c = 10으로 기본값 지정
return a * b + c;
}
var result1 = multiple(5, 10, 20); // a = 5, b = 10, c = 20
document.write("multiple(5, 10, 20)을 실행하면 결과는 " + result1 + "입니다. <br>")
var result2 = multiple(10, 20); // a = 10, b = 20, c = 10(기본값)
document.write("multiple(10, 20)을 실행하면 세번째 매개변수는 기본값을 사용하고 결과는 " + result2 + "입니다.<br>")
var result3 = multiple(30); // a = 30, b = 5(기본값), c = 10(기본값)
document.write("multiple(30)을 실행하면 두번째, 세번째 매개변수는 기본값을 사용하고 결과는 " + result3 + "입니다.")
</script>
</body>
|
cs |
- 익명 함수
- 익명 함수는 이름이 없는 함수로, 익명 함수를 선언할 때는 이름을 붙이지 않는다.
- 익명 함수의 실행 원리는 함수 자체가 식이므로 함수를 변수에 할당할 수 있으며, 또한 다른 함수의 매개변수로 사용할 수도 있다.
|
<body>
<script>
var sum = function(a, b){
return a + b;
}
document.write("함수 실행 결과 : " + sum(10, 20) );
</script>
</body>
|
cs |
- 즉시 실행 함수
- 한 번만 실행하는 함수라면 함수를 정의하면서 동시에 실행할 수 있다.
- 즉시 실행 함수는 함수를 실행하는 순간에 자바스크립트 해석기에서 함수를 해석한다.
|
<body>
<script>
(function() {
var userName = prompt("이름을 입력하세요.");
document.write("안녕하세요? <span class='accent'>" + userName + "</span>님!");
}());
</script>
</body>
|
cs |
|
<body>
<script>
(function(a, b){ // 함수 선언을 위한 매개변수
sum = a + b;
}(100, 200)); // 마지막에 함수 실행을 위한 인수
document.write("함수 실행 결과 : " + sum);
</script>
</body>
|
cs |
- 화살표 함수
- ES6 버전부터는 => 표기법을 사용해 함수 선언을 좀 더 간단하게 작성할 수 있다.
- 이 방법은 간단히 화살표 함수라고 하는데 익명 함수에서만 사용할 수 있다.
|
<body>
<script>
// const hi = function() {
// alert("안녕하세요?");
// }
const hi = () => { alert("안녕하세요")};
//중괄호 안에 함수 내용이 한 줄뿐이라면 중괄호 생략 가능
hi();
</script>
</body>
|
cs |
|
<script>
// const hi = function(user) {
// document.write(user + "님, 안녕하세요?");
// }
const hi = user => { document.write(user + "님, 안녕하세요?"); }
// 매개변수 한개이면 매개변수의 괄호 생략 가능
hi("경희");
</script>
|
cs |
|
<body>
<script>
// const sum = function(a, b) {
// return a + b;
// }
const sum = (a, b) => a + b;
document.write("두 수의 합 : " + sum(10, 20));
// 함수 내용 한줄이여서 중괄호 생략되면서 return 문 생략됨
</script> </body>
|
cs |
-
var 변수
- 변수를 선언하고 사용할 때 변수가 적용되는 범위를 스코프라고 한다.
- 함수 안에서만 사용할 수 있는 변수를 지역변수, 스크립트 소스 전체에서 사용할 수 있는 변수를 전역 변수라고 한다.
- 지역 변수
- 지역 변수를 선언하려면 예약어 var와 함께 변수 이름을 지정해야 한다.
|
<body>
<script>
function addNumber() {
var sum = 10 + 20;
}
addNumber();
console.log(sum);
</script>
</body>
|
cs |
- 전역 변수
- 함수 밖에서 선언하거나 함수 안에서는 var 예약어를 빼고 선언해야 한다.
- 함수 안에서 선언한 변수라 하더라도 var 예약어를 사용하지 않으면 전역 변수가 된다.
|
<body>
<script>
function addNumber() {
var sum = 10 + 20; // 지역 변수
multi = 10 * 20; // 전역 변수
}
addNumber();
console.log(multi);
</script>
</body>
|
cs |
- var와 호이스팅
- 자바 스크립트에서 변수를 사용할 때 조심해야 할 개념은 호이스팅이다.
- 호이스팅이란 끌어올린다는 뜻으로 상황에 따라 변수의 선언과 할당을 분리해서 선언 부분을 스코프의 가장 위쪽으로 끌어올리는 것이다.
- 끌어 올린다고 해서 실제로 소스 코드를 끌어올리는 것은 아니고 소스를 그런 식으로 해석한다는 의미다.
|
<body>
<script>
var x = 10;
function displayNumber() {
console.log("x is " + x);
console.log("y is " + y);
var y = 20;
}
displayNumber();
</script>
</body>
|
cs |
이런 결과가 나타는 것은 바로 변수 호이스팅 때문이다.
자바스크립트 해석기는 함수 소스를 훑어보면서 var를 사용한 변수는 따로 기억해 둔다.
즉, 변수를 실행하기 전이지만 '이런 변수가 있구나'하고 기억해 두기 때문에 마치 선언한 것과 같은 효과가 있는 것이다.
자바스크립트 해석기가 인식하는 코드
|
<body>
<script>
var x = 10;
function displayNumber() {
var y;
console.log("x is " + x);
console.log("y is " + y);
y = 20;
}
displayNumber();
</script>
</body>
|
cs |
- 변수의 재선언과 재할당
- var를 사용한 변수는 재선언과 재할당을 할 수 있다.
|
<body>
<script>
function addNumber(num1, num2) {
return num1 + num2;
}
var sum = addNumber(10, 20);
console.log(sum);
sum = 50;
console.log(sum);
var sum = 100;
console.log(sum);
</script>
</body>
|
cs |
ES6 이전의 자바스크립트 프로그램에서는 var 예약어만으로 변수를 선언했다.
var 예약어를 빠뜨리면 의도하지 않게 전역 변수가 되기도 하고, 사용하는 변수를 재선언하거나 재할당해 버리는 경우가 생기기도 한다. 그래서 ES6 에서는 변수를 선언하기 위한 예약어 let와 const가 추가되었다.
var과 let, const의 가장 큰 차이는 스코프의 범위다. var는 함수 영역의 스코프를 가지지만 let와 const 는 블록 영역의 스코프를 가진다.
-
let 변수
- 블록 안에서만 쓸 수 있는 변수
- let 예약어로 선언한 변수는 변수를 선언한 블록( { }로 묶은 부분 )에서만 유효하고 블록을 벗어나면 사용할 수 없다.
- 블록 안에서만 쓸 수 있는 변수
|
<body>
<script>
function calcSum(n) {
let sum = 0;
for(let i = 1; i < n + 1; i++) {
sum += i;
}
console.log(sum);
}
calcSum(10);
</script>
</body>
|
cs |
- 재할당은 가능하지만 재선언은 할 수 없는 변수
- let 예약어를 선언한 변수는 값을 재할당할 수는 있지만 변수를 재선언할 수는 없다.
- 그러니 예약어 var와 같이 실수로 같은 변수의 이름을 사용할 걱정은 없다.
|
<body>
<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>
</body>
|
cs |
|
<body>
<script>
function calcSum(n) {
let sum = 0;
for(let i = 1; i< n + 1; i++) {
sum += i;
}
let sum;
console.log(sum);
}
calcSum(10);
</script>
</body>
|
cs |
- 호이스팅이 없는 변수
- let 예약어를 사용한 변수는 선언하기 전에 사용할 경우 오류 메시지를 나타낸다.
|
<body>
<script>
var x = 10;
function displayNumber() {
console.log("x is " + x);
console.log("y is " + y);
let y = 20;
}
displayNumber();
</script>
</body>
|
cs |
-
const 변수
- const로 선언한 변수는 상수 변수 이다.
- const로 할당한 변수는 재선언하거나 재할당할 수 없으며, let 예약어를 사용한 변수처럼 블록 레벨의 스코프를 가진다.
- 자바 스크립트 변수 사용법
- 전역 변수는 최소한으로 사용한다. (오류 발생 확률 높음)
- var 변수는 함수의 시작 부분에서 선언한다. (호이스팅이 생기므로)
- for 문에서 카운터 변수를 사용할 때는 var 예약어를 사용하지 않는다. (블록 함수가 아니므로)
- ES6를 사용한다면 예약어 var보다 let를 사용하는 것이 좋다.
출처 : DO it HTML +CSS+ 자바스크립트 웹 표준의 정석 [이지스퍼블리싱 (고경희)]
'Web Project > Java Script' 카테고리의 다른 글
| 이벤트와 이벤트 처리기 (0) | 2021.03.17 |
|---|---|
| 자바 스크립트 개요 (0) | 2021.03.16 |
Comments