자바스크립트는 함수를 호출할 때,
지정한 매개변수보다 많거나 적은 매개변수를 사용하는 것을 허용한다.
지금까지 사용하던 alert( ) 함수와 prompt( ) 함수의 매개변수를 필요한 것보다 많고, 적게 입력해보자.

<script>
//함수 호출
alert('원래 매개변수입니다.', '추가된 매개변수입니다.');
</script>

위에 코드처럼, 원래 함수에서 선언된 매개변수보다 많게 사용하면
일반적으로 추가된 매개변수는 무시한다.

따라서 결과는,
'원래 매개변수입니다.' 라는 경고창을 출력한다.

또한 원래 함수에서 선언한 매개변수보다 적게 사용하면,
지정하지 않은 매개변수는 undefined로 입력된다.

아래 코드에서 prompt( ) 함수의 두 번째 매개변수를 입력하지 않고
코드를 실행해보면 두 번째 매개변수에 undefined가 입력된 것을 볼 수 있다.

<script>
//함수 호출
prompt('원래 매개변수입니다.');
</script>

어라, ie에서는 undefined가 입력된 것을 확인했는데
크롬에서는 undefined가 입력되어 있지 않네...컹







'웹개발 > javascript' 카테고리의 다른 글

자바스크립트 리턴값 (return 키워드)  (0) 2019.02.02
자바스크립트 가변 인자 함수  (0) 2019.02.02
자바스크립트 선언적 함수  (0) 2019.02.01
자바스크립트 익명 함수  (0) 2019.02.01
break, continue 키워드  (0) 2019.02.01
자바스크립트에서 함수 만드는 법은
아래와 같이 만들었었다.

익명 함수 만드는 법
<script>
var 함수 = function () {};
</script>

하지만, 일반적으로 다음 방식으로 함수를 만든다.

<script>
function 함수() {

}
</script>

위에 코드와 같은 방식으로 생성한 함수를 '선언적 함수' 라고 표현한다.

다음 코드를 살펴보자.

<script>
function 함수() { alert('함수 A'); }
function 함수() { alert('함수 B'); }
함수();
</script>

함수를 호출했을 때, 어떤 함수가 실행될까?
결과는 뒤에 위치하는 함수가 실행된다.

다음 코드도 살펴보자.
<script>
var 함수 = function () { alert('함수 A'); }
var 함수 = function () { alert('함수 B'); }
함수();
</script>

결과는 뒤에 위치한 함수가 실행된다.
변수는 같은 이름으로 다시 선언하면 기존의 변수를 덮어씌우므로 뒤쪽에 있는 변수를 사용하듯이,
위에 함수도 뒤에 위치한 함수가 이전에 선언한 함수를 덮어씌운다.

그렇다면 익명 함수와 선언적 함수의 차이점은 없는걸까?

<script>
함수();
var 함수 = function () { alert('함수 A'); }
var 함수 = function () { alert('함수 B'); }
</script>

위에 익명 함수의 경우, 코드를 실행하면 오류가 발생해 실행되지 않는다.
Uncaught TypeError: 함수 is not a function

변수를 선언하기 전에 변수를 사용했기 때문이다.

<script>
함수();
function 함수() { alert('함수 A'); }
function 함수() { alert('함수 B'); }
</script>

위에 선언적 함수를 사용하면 정상적으로 코드가 실행된다.
웹브라우저는 script 태그 내부의 내용을 한 줄씩 읽기 전에
선언적 함수부터 읽는다.

마지막으로 다음 코드도 살펴보자.

<script>
//함수 생성
var 함수 = function () { alert('함수 A'); }
function 함수() { alert('함수 B'); }

//함수 호출
함수();
</script>

실행 결과는, '함수 A'를 출력한다.
선언적 함수가 먼저 생성되고 익명 함수가 나중에 생성되기 때문이다.

개발할 때 실수할 수 있는 부분이라고 하니, 기억해두면 좋을 것 같다.






참고 서적 : 모던 웹을 위한 JavaScript + jQuery 입문(개정판)

윤인성 지음. 한빛미디어

'웹개발 > javascript' 카테고리의 다른 글

자바스크립트 가변 인자 함수  (0) 2019.02.02
자바스크립트 매개변수  (0) 2019.02.01
자바스크립트 익명 함수  (0) 2019.02.01
break, continue 키워드  (0) 2019.02.01
자바스크립트 반복문  (0) 2019.02.01
함수는 코드의 집합을 나타내는 자료형이다.
함수는 다음 형태로 만든다.

var 함수 = function () { };

방금 만든 function () { } 형태는 함수이지만,
이름이 없으므로 익명 함수라고 부른다.
이름이 없으므로 변수에 넣어서 사용해야 한다.

자바스크립트에서 함수는 하나의 자료형이지만, 다른 자료형과 다르게
뒤에 괄호를 열고 닫음으로써 코드를 실행한다.

함수();

자바스크립트는 이렇게 함수를 실행하는 것을 '함수를 호출한다.' 라고 표현한다.

<script>
//함수를 만든다.
var 함수 = function () {
var output = prompt('숫자를 입력해주세요.', '숫자');
alert(output);
};

//함수를 호출한다.
함수();
</script>







참고 서적 : 모던 웹을 위한 JavaScript + jQuery 입문(개정판)

윤인성 지음. 한빛미디어

'웹개발 > javascript' 카테고리의 다른 글

자바스크립트 매개변수  (0) 2019.02.01
자바스크립트 선언적 함수  (0) 2019.02.01
break, continue 키워드  (0) 2019.02.01
자바스크립트 반복문  (0) 2019.02.01
비교연산자와 일치연산자  (0) 2019.01.31
break 키워드는 switch 조건문이나 반복문을 벗어날 때 사용하는 키워드이다.

while (true) {

}

위에 반복문은 조건이 항상 참이므로 무한 반복한다.
이러한 무한루프는 break 키워드를 사용해야 벗어날 수 있다.

<script>
var i = 0;
while (true) {
if (i > 5) {
break;
}
alert(i);
i = i + 1;
}
</script>

결과는 0부터 5까지만 출력하고 반복문을 종료한다.





continue 키워드는 반복문 내에서 현재 반복을 멈추고 다음 반복을 진행시키는 키워드다.

<script>
for (var i = 1; i <= 10; i++) {
continue;
alert(i);
}
</script>

위에 코드를 실행하면 경고창이 하나도 출력되지 않는다.
continue 키워드를 만나면 바로 다음 반복으로 넘어가므로 alert( ) 함수를 실행하지 않는 것이다.

코드를 하나 더 살펴보자.

<script>
//변수 선언
var output = 0;

//반복문
for (var i = 1; i <= 10; i++) {
if (i % 2 == 1) {
// 홀수이면 현재 반복을 중지하고 다음 반복을 수행
continue;
}
output += i;
}
//출력한다.
alert(output);
</script>

위에 코드의 결과는
조건문을 사용해서 홀수일 때는 continue 키워드를 만나 바로 다음 반복으로 넘어가기 때문에
짝수의 합만 구해진다.






참고 서적 : 모던 웹을 위한 JavaScript + jQuery 입문(개정판)

윤인성 지음. 한빛미디어

'웹개발 > javascript' 카테고리의 다른 글

자바스크립트 선언적 함수  (0) 2019.02.01
자바스크립트 익명 함수  (0) 2019.02.01
자바스크립트 반복문  (0) 2019.02.01
비교연산자와 일치연산자  (0) 2019.01.31
숫자와 문자열 사이의 자료형 변환  (1) 2019.01.31
자바스크립트 반복문도 구글링하면 다 나오니까
반복문 종류만 알고 넘어가자.

1. while 반복문
2. do while 반복문
3. for 반복문
4. for in 반복문

나는 여기서 4번. for in 반복문을 잘 사용해보지 않았기 때문에,
정리하고 넘어가자.

for in 반복문의 기본형태

for (var i in array) {

}

이러한 for in 반복문은 다음 단순 for 반복문과 같은 기능을 수행한다.

for (var i = 0; i < array.length; i++) {

}

<script>
//변수를 선언한다.
var array = ['포도', '사과', '바나나', '망고'];

//반복문
for (var i in array) {
alert(array[i]);
}
</script>






참고 서적 : 모던 웹을 위한 JavaScript + jQuery 입문(개정판)

윤인성 지음. 한빛미디어


'웹개발 > javascript' 카테고리의 다른 글

자바스크립트 익명 함수  (0) 2019.02.01
break, continue 키워드  (0) 2019.02.01
비교연산자와 일치연산자  (0) 2019.01.31
숫자와 문자열 사이의 자료형 변환  (1) 2019.01.31
문자열과 불을 입력하는 방법  (0) 2019.01.31
비교 연산자

>= 좌변이 우변보다 크거나 같다.
<= 우변이 좌변보다 크거나 같다.
> 좌변이 크다.
< 우변이 크다.
== 좌변과 우변이 같다.
!= 좌변과 우변이 다르다.

다음 코드의 네 가지 출력 결과를 예측해보자.

<script>
alert('' == false);
alert('' == 0);
alert(0 == false);
alert('273' == 273);
</script>

결과는 네 가지 모두 true를 출력한다.
자동 자료형 변환으로 인해 비교 연산자를 사용할 때, 이처럼 뜻하지 않는 경우가 발생할 수 있다.
자료형이 다른 것을 확실하게 구분 짓고 싶다면 일치 연산자를 사용해야 한다.


일치 연산자
=== 양 변의 자료형과 값이 일치하다.
!== 양 변의 자료형과 값이 다르다.

다음 코드의 네 가지 출력 결과를 예측해보자.

<script>
alert('' === false);
alert('' === 0);
alert(0 === false);
alert('273' === 273);
</script>

결과는 모두 false를 출력한다.
좌변과 우변이 자료형부터 다르기 때문이다.

기본이 되는 내용이지만,
하. 나도 결과를 예측하지 못했다.컹컹컹






참고 서적 : 모던 웹을 위한 JavaScript + jQuery 입문(개정판)

윤인성 지음. 한빛미디어

'웹개발 > javascript' 카테고리의 다른 글

break, continue 키워드  (0) 2019.02.01
자바스크립트 반복문  (0) 2019.02.01
숫자와 문자열 사이의 자료형 변환  (1) 2019.01.31
문자열과 불을 입력하는 방법  (0) 2019.01.31
자바스크립트 자료형 검사  (0) 2019.01.31

+ Recent posts

티스토리툴바