자바스크립트의 중요한 요소 함수와 변수를 같이 다루어 보겠습니다.
05 - 1 여러 동작을 묶은 덩어리, 함수
#1 함수란 무엇인가?
: 자주 실행하는 기능에 포함된 명령이 여러가지일 때
그 명령을 한번에 실행할 수 있게 한 덩어리로 묶은 주머니
#2 함수를 사용하면 왜 좋을까?
함수를 사용하면 각 명령의 시작과 끝을 명확하게 구별할 수 있습니다.
#3 함수 정의하고 실행하기
함수 선언 --------------> 함수 실행
(함수 호출)
① 함수 선언
function addNumber(){
var sum = 10 + 20;
console.log(sum);
}
② 함수 실행
addNumber()
#4 버튼으로 함수를 실행하는 프로그램 만들기
① button 태그에 onclick = "addNumber()" 을 추가하여
button을 눌렀을 때 함수가 실행되도록 수정합니다.
② addNumber()을 선언하고 중괄호에 실행할 소스를 넣습니다.
05 - 2 let과 constant로 변수 선언하기
#1 변수의 적용범위
자바스크립트에서 변수를 선언하고 사용할 때
변수가 적용되는 범위를 스코프(scope)라고 합니다.
자바스크립트 함수에서 변수를 사용할 때 이 영역을 주의해야 합니다.
#2 지역변수 (Local Variable)
: 한 함수 안에서만 사용할 수 있는 변수
① test()함수 밖에 변수 myVar = 100 => 전역함수
② test()함수 안에 변수 myVar = 50 => 지역함수
지역함수는 test()안을 벗어나면 무효가 되기 때문에
화면상의 myVar은 100이 됩니다.
또한, 지역변수는 전역변수에 영향을 주지 않습니다.
#3 전역변수 (Global Variable)
: 스크립트 소스 전체에서 사용할 수 있는 변수
위에 식과 비슷하지만 자세히 보면
test()안의 함수에 var 예약어를 붙이지 않고 선언하였습니다.
이럴 때 test()안의 myVar 변수는 전역변수가 됩니다.
#4 var을 사용한 변수의 특징
var를 사용한 변수는 재선언이 가능하여 한번 선안한 변수를 다시 선언할 수 있습니다.
만약 여러 명이서 프로그램을 함께 진행할 때
같은 변수 이름을 사용하여 선언한다면
오류가 뜨지 않고 이전의 변수를 덮어쓰기 때문에 예상치 못한 결과가 생길수도 있습니다.
다음 글에는 예약어 var의 단점을 보완한 예약어 let과 constant를 사용한 변수를 배워보겠습니다.