쌍용교육센터 - 34일

2024.04.04

함수

<script type="text/javascript">
	//선언적 함수
	function check(){
		document.write('호출하면 동작함<br>');
	}
	//함수 호출
	check();
	
	//인자 앞에 var를 명시하면 오류 발생
	function check2(msg){
		document.write(msg + '을 좋아합니다.<br>');
	}
	//함수 호출
	check2('가을');
	
	function check3(num){
		return num*num;
	}
	//함수 호출
	var number = check3(10);
	document.write('number = ' + number + '<br>');
	
	//익명 함수
	var play = function(){
		document.write('운동을 좋아해요~~<br>');
	};
	//함수 호출
	play();
	
	var play2 = function(item){
		document.write(item + '를 좋아해요<br>');
	};
	//함수 호출
	play2('축구');
	
	var play3 = function(x,y){
		return x + y;
	};
	//함수 호출
	var result = play3(5,8);
	document.write('result = ' + result + '<br>');
	
	//정의한 함수를 인라인 방식으로 호출하기
	function checkIt(){
		alert('인라인 방식으로 함수 호출하기');
	}
	
</script>

 

함수 사용시 주의사항

<script type="text/javascript">
	//함수의 이름이 같을 경우 마지막 함수 호출
	function 함수(){
		document.write('함수 A<br>');
	}
	
	function 함수(){
		document.write('함수 B<br>');
	}
	
	//함수 호출
	함수();
	
	document.write('---------------<br>');
	
	//함수 호이스팅
	함수2();
	
	function 함수2(){
		document.write('함수2<br>');
	}
	
	document.write('---------------<br>');
	
	//변수 선언은 중복될 수 있고 호출은 마지막 변수가 호출됨
	var 함수3 = function(){
		document.write('함수 C<br>');
	};
	
	var 함수3 = function(){
		document.write('함수 D<br>');
	};
	
	//함수 호출
	함수3();
	
	document.write('---------------<br>');
	
	//함수 호이스팅이 아니라 변수 호이스팅으로 인식
	//함수처럼 호출하면 오류 발생
	//함수4();
	
	var 함수4 = function(){
		document.write('함수4');
	};
</script>

 

지역변수와 전역변수

<script type="text/javascript">
	/*
	1.지역변수(함수 레벨 스코프)
	함수안에서 var를 사용해서 선언한 변수, 함수가 끝나면 소멸
	
	2.전역변수
	함수밖에서 만들어진 모든 변수
	함수안에서 var없이 만들어진 변수
	함수가 끝나도 메모리에 남아 있음
	*/
	function test1(){
		var i = 10; //지역변수
		document.write(i + '<br>');
	}
	test1();
	
	//지역변수는 함수가 종료되면 소멸되기 때문에
	//함수 밖에서 호출 불가능
	//document.write(i + '<br>');
	
	//전역변수
	var j;
	function test2(){
		j = 200;
		document.write(j + '<br>');
	}
	test2();
	
	function test3(){
		document.write(j + '<br>');
	}
	test3();
	
	//전역변수
	//var를 명시하지 않고 전역변수를 만들면 선언과 함께 초기화해야 함
	a = 10;
	function test4(){
		document.write(a + '<br>');
	}
	test4();
	
	//전역변수
	//함수내에서 var를 명시하지 않고 변수를 선언하면 전역변수
	function test5(){
		m = 300; //전역변수
		document.write(m + '<br>');
	}
	test5();
	
	document.write(m + '<br>');
	
</script>

 

let

<script type="text/javascript">
	/*
	블록 레벨의 스코프 : let(변수), const(상수)
	*/
	
	//let를 블록 레벨 지역변수로 사용
	
	//for문안에서 지역변수 선언
	for(let i=1;i<=3;i++){
		document.write(i + '<br>');
	}
	document.write('-----------<br>');
	//document.write(i);//for문 블럭을 벗어나면 호출 불가
	
	for(var x=1;x<=3;x++){
		document.write(x + '<br>');
	}
	document.write(x + '<---전역적으로 인식<br>');
	document.write('-----------<br>');
	
	function test1(){
		let i = 100; 
		document.write(i + '<br>');
	}
	test1();
	//함수안에서 선언되었기 때문에 함수를 벗어나서는 호출 불가
	//document.write(i + '<br>');
	document.write('-------------<br>');
	
	//let를 전역변수로 사용
	let i = 10;
	function test2(){
		document.write(i + '<br>');
	}
	test2();
	document.write(i + '<---전역적으로 사용<br>');
	document.write('------------<br>');
	
	let a = '사과';
	//let로 변수 정의시 변수명 중복 불허
	//let a = '포도';
	document.write('a = ' + a + '<br>');
	document.write('------------<br>');
	
	//let를 명시하면 변수 호이스팅이 적용되지 않음
	//document.write(b);
	let b;	
</script>

 

const

<script type="text/javascript">
	const a = 10; //상수
	document.write(a + '<br>');
	document.write('------------<br>');
	
	//상수는 변경 불가능
	//a = 20;
	//document.write(a + '<br>');
	
	function test(){
		const b = 20;
		document.write(b + '<br>');
	}
	test();
	//const는 블럭 레벨 스코프로 동작하기 때문에
	//함수 블럭을 벗어나면 호출 불가
	//document.write(b);
	
</script>

 

함수의 인자

<script type="text/javascript">
	/*
	자바스크립트는 함수를 생성할 때 지정한 매개변수보다 많거나 적은 매개변수를 사용하는
	것을 허용. 원래 함수에서 선언한 매개변수보다 적게 사용하면 미지정 매개변수에
	undefined가 입력됨
	*/
	function test(a,b){
		document.write('a = ' + a + '<br>');
		document.write('b = ' + b + '<br>');
	}
	test();
	document.write('------------<br>');
	test(10);
	document.write('------------<br>');
	test(10,20);
	document.write('------------<br>');
	test(10,20,30);
</script>

 

나머지 매개변수

<script type="text/javascript">
	/*
	나머지 매개변수는 매개변수를 정의할 때 정해지지 않은 매개변수들을 정의할 수 있게 함.
	arguments 객체와 유사하나 arguments 객체는 함수에 전달되는 모든 전달
	인자를 포함하는 반면에, 나머지 매개변수는 정해지지 않는 나머지를 의미함.
	*/
	function test1(...args){
		document.write('args : ' + args + '<br>');
	}
	test1(10,20,30);
	
	function test2(a,b,...others){
		document.write('a : ' + a + '<br>');
		document.write('b : ' + b + '<br>');
		document.write('others : ' + others + '<br>');
	}
	test2(10,20,30,40,50);
	
</script>

 

return

<script type="text/javascript">
	function returnTest(){
		document.write('문장A<br>');
		for(let i=1;i<=10;i++){
			//조건문
			if(i == 5){
				//특정 조건일 때 반복문을 빠져나감
				//break;
				
				//함수를 호출한 곳으로 되돌아감
				//결과적으로 함수 종료
				return;
			}
			document.write(i + '<br>');
		}
		document.write('문장B<br>');
	}
	//함수 호출
	returnTest();
	
	document.write('프로그램 끝!!');
</script>

 

화살표 함수

<script type="text/javascript">
	/*
	ES6에서 도입된 화살표 함수(arrow function)은 function 키워드 대신
	화살표(fat arrow =>)를 사용해 좀 더 간략한 방법으로 함수를 선언할 수 있다.
	화살표 함수는 항상 익명 함수로 정의한다.
	*/

	let print = (x) => {
		document.write(x);
	};
	print(10);
	document.write('<br>-----------<br>');
	
	let print2 = (x) => {
		return x + 10;
	};
	document.write(print2(10));
	document.write('<br>-----------<br>');
	
	let print3 = (x,y) => {
		return x * y;
	};
	document.write(print3(3,6));
	document.write('<br>-----------<br>');
	
	//매개변수가 하나일 경우에는 인자를 정의할 때 괄호를 생략할 수 있음
	let print4 = x => {
		return x * 10;
	};
	document.write(print4(5));
	document.write('<br>-----------<br>');
	
	//화살표 함수 코드 블록을 지정하지 않고 한 문장으로 작성시 return문을 
	//않아도 화살표 오른쪽 표현식의 계산 결과값이 반환됨
	let print5 = (x,y) => x*y;
	document.write(print5(2,3));
	
</script>

 

내부함수(클로저 현상)

<script type="text/javascript">
	function f(){
		let n = 123;
		//내부함수
		function g(){
			document.write('n = ' + n + '<br>');
			document.write('g함수 호출');
		}
		return g; //내부함수 반환
	}
	//함수 호출
	let m = f();
	document.write(m + '<br>');
	document.write('----------------<br>');
	//반환된 내부함수 호출
	//f함수가 종료되고 f함수의 지역변수 n은 소멸해야 하지만
	//지역변수 n는 남겨둠으로써 내부함수가 호출될 때 값이 정상적으로
	//출력될 수 있도록 처리해줌. 이렇게 지역변수가 남겨지고 지역변수를
	//사용할 수 있는 현상을 클로저라고 부름
	m();
	
</script>

 

isFinite함수

<script type="text/javascript">
	let number1 = 10 / 0;//Infinity
	document.write('number1 = ' + number1 + '<br>');
	let number2 = -10 / 0;//-Infinity
	document.write('number2 = ' + number2 + '<br>');
	
	//isFinite함수를 이용해서 0으로 나누었는지 판단
	if(isFinite(number2)){//0이 아닌 수로 나눈 경우
		document.write('0이 아닌 수로 나눔');
	}else{//0으로 나눈 경우
		document.write('0으로 나눔');
	}
	
</script>

 

isNaN함수

<script type="text/javascript">
	let number1 = 10 / 'A';//NaN(Not a Number)
	document.write('number1 = ' + number1 + '<br>');
	
	//항상 false로 반환하기 때문에 isNaN함수를 사용해야 함
	if(number1 == NaN){
		document.write('숫자가 아님<br>');
	}else{
		document.write('숫자임<br>');
	}
	document.write('---------------<br>');
	
	//전달되는 인자의 값이 숫지인지 아닌지 판단
	if(isNaN(number1)){
		document.write('숫자가 아님<br>');
	}else{
		document.write('숫자임<br>');
	}
	
</script>

 

parseInt(),parseFloat()

<script type="text/javascript">
	let num = '1234';
	let won = '1000원';
	let won2 = '원1000';
	
	document.write(Number(num) + '<br>');//string -> number
	document.write(Number(won) + '<br>');//NaN
	document.write(parseInt(num) + '<br>');
	//앞의 숫자만 추출해서 형변환
	document.write(parseInt(won) + '<br>');
	//처음에 문자가 등장하면 형변환할 수 없음
	document.write(parseInt(won2) + '<br>');
	document.write('-----------------<br>');
	
	let num2 = '24.56';
	let dollar = '1.5$';
	let dollar2 = '$1.5';
	
	document.write(Number(num2) + '<br>');//string->number
	document.write(Number(dollar) + '<br>');//NaN
	document.write(parseFloat(num2) + '<br>');
	document.write(parseFloat(dollar) + '<br>');
	document.write(parseFloat(dollar2) + '<br>');//NaN
	document.write('-----------------<br>');
	
	let no1 = '10';
	let no2 = '3.67';
	
	//소수점 이하 절삭
	document.write(parseInt(no2) + '<br>');
	document.write(parseFloat(no1) + '<br>');
</script>

 

encoding함수

/*
함수 이름					설명
escape(url)				적절한 정도로 인코딩함
unescape(url)			적절한 정도로 디코딩함
encodeURI(url)			최소한의 문자만 인코딩함
decodeURI(url)			최소한의 문자만 디코딩함
encodeURIComponent(url)	대부분의 문자를 인코딩함
decodeURIComponent(url)	대부분의 문자를 디코딩함
 */
	const URL = '<<a href=http://www.naver.com?test=한글입니다.'>http://www.naver.com?test=한글입니다.'</a>>;
	//출력용 변수 선언 및 초기화
	let output = '';
	output += '*escape()<br>';
	output += escape(URL) + '<br><br>';
	output += '*encodeURI()<br>';
	output += encodeURI(URL) + '<br><br>';
	output += '*encodeURIComponent()<br>';
	output += encodeURIComponent(URL) + '<br><br>';
	
	document.write(output);
	

 

eval 함수

<script type="text/javascript">
	//eval(string) : string을 자바스크립트 코드로 실행
	let willEval = '';
	//(주의);를 명시해야 동작함
	willEval += 'var number = 10;';
	willEval += 'alert(number);';
	
	eval(willEval);
	alert(number);
</script>

 

배열의 요소 추가

<script type="text/javascript">
	//자바스크립트의 배열은 가변 길이이기 때문에 요소의 추가,삭제 가능
	const array = ['포도','사과'];
	              // 0    1
	//배열의 요소 목록 출력
	//쉼표(,)로 구분한 문자열 반환
	document.write(array + '<br>');

	array[2] = '사과';//인덱스 2에 요소를 대입해서 요소의 개수가 늘어남
	document.write(array + '<br>');
	
	array[10] = '망고';
	document.write(array + '<br>');
	
	//건너뛴 요소의 인덱스를 호출하면 undefined 값이 반환
	document.write(array[4] + '<br>');
	
</script>

 

배열의 요소 삭제

<script type="text/javascript">
	const array = ['one','two','three'];
	            //   0     1      2      length = 3
	document.write(array + '<br>');
	
	array.length = 2; //마지막 데이터 삭제
	document.write(array + '<br>');
	
	array.length = 4;//길이가 증가함
	document.write(array + '<br>');
	document.write('-------------<br>');
	
	const array2 = ['서울','부산','대구','광주'];
	              //  0    1     2    3 
	
	delete array2[1];//제거한 위치에 빈 요소를 남김
	document.write(array2 + '<br>');
	document.write('-------------<br>');
	
	const array3 = ['한국','미국','일본','중국','호주'];
	             //   0     1    2    3     4
	//인덱스 2에 해당하는 요소부터 하나의 요소를 제거하고 그 위치에 다음 인덱스의
	//데이터가 이동하여 위치함
    array3.splice(2,1);             
	document.write(array3);	
</script>