나만의 코딩 일지
[Javascript] 반복문, 함수 본문
- 숫자 0, 빈 문자열 "", null, undefined, NaN은 불린형으로 변환시 모두 false가 된다.
- 연산자 &&는 ||보다 우선순위가 높다.
- 자바스크립트에서 || 연산자 특징
- 가장 왼쪽 피연산자부터 시작해 오른쪽으로 나아가며 피연산자를 평가한다.
- 각 피연산자를 불린형으로 변환하고 변환 후 그 값이 true이면 연산을 멈추고 해당 피연산자의 변환 전 원래 값을 변환한다.
- 피연산자 모두를 평가한 후(모든 피연산자가 false로 평가되는 경우)엔 마지막 피연산자를 반환된다.
- 반환 값은 형 변환을 하지 않은 원래 값이다.
- null 병합 연산자 ??를 사용하면 피연산자 중 값이 할당된 변수를 빠르게 찾을 수 있다.
- a ?? b : a가 null도 아니고 undefined도 아니면 a를 반환 그 외의 경우는 b를 반환
- 괄호 없이 ||나 &&을 사용하면 오류가 난다.
- ??와 ||의 차이점
- ||는 첫 번째 truthy 값을 반환
- ??는 첫 번째 정의된(defined) 값을 반환
- ||는 0을 falsy 한 값으로 취급하지만 ??는 null, undefined 이외는 모두 값이라고 취급한다.
- break나 continue는 삼항연산자 ?에 사용할 수 없다.
- 여러 개의 중첩 반복문을 사용할 때 한 번에 반복문을 빠져나가게 하기 위해서는 레이블(lable)을 사용하면 된다.
- 레이블은 반복문 앞에 :과 함께 쓰이는 식별자이다.
- continue 지시자를 레이블과 함께 사용하는 것도 가능하다.
- break와 continue는 반복문 안에서만 사용 가능하고 레이블은 break나 continue 지시자 위에 있어야 한다.
outer: for (let i = 0; i < 3; i++) {
for (let j = 0; j < 3; j++) {
let input = prompt(`(${i},${j})의 값`, '');
// 사용자가 아무것도 입력하지 않거나 Cancel 버튼을 누르면 두 반복문 모두를 빠져나옵니다.
if (!input) break outer; // (*)
// 입력받은 값을 가지고 무언가를 함
}
}
alert('완료!');
- prompt 함수는 사용자가 입력 필드에 기재한 값을 문자열로 변환해 반환한다.
- 함수 내부에 외부 변수와 동일한 이름을 가진 변수가 선언되었다면, 내부 변수는 외부 변수를 가린다.
- 매개변수가 있는 함수에 매개변수에 값을 전달하지 않으면 그 값은 undefined가 된다.
- undefined가 되지 않기 위해서는 매개변수에 = 과 기본값을 설정하면 된다. 예)
function message(form, text = "기본 값"){
alert(form + ":" + text); // abcde : 기본 값
}
message("abcde");
----------------------------------------------------------------------------
function messge(form, text = anotherFunction()){
// anotherFunction()은 text 값이 없을 때만 호출된다.
// anotherFunction()은 반환 값이 text의 값이 된다.
}
- return문이 없거나 return만 있을 경우 반환값은 undefined가 된다.
- return 문에 값이 긴 표현식인 경우 return과 반환하려는 값 사이에 새 줄을 넣어 코드를 작성할 수 없다. 왜냐하면 자바 스크립트에서 return문 끝에는 자동으로 세미콜론 ;을 넣기 때문에 새 줄을 즉 밑에 줄에 표현식을 작성하게 되면 그 표현식은 작동을 안 하고 함수를 빠져나오게 된다 긴 표현식을 새 줄에 사용하고 싶다면 return 옆에 괄호()를 사용해야 한다.
return
(a + b + c + d + f); // 새 줄을 사용해 작성할 수 없다.
return;
(a + b + c + d + f); // 자바스크립트에서는 return 끝에 자동으로 세미콜론을 넣어준다.
return(
a + b + c + d + f
);
// 긴 표현 식을 사용하기 위해서는 이렇게 괄호를 사용해야 한다.
- 함수 표현식
let value = function(name){
alert(`나의 이름은 ${name}입니다.`);
}; // 함수 표현식에서는 괄호가 끝나는 부분에 세미콜론을 넣어줘야 한다.
- 콜백(colled back) 함수 : 함수를 함수의 인수로 전달하고 필요하다면 인수로 전달한 그 함수를 "나중에 호출" 하는 것을 콜백 함수라고 한다.
function ask(question, yes, no){
if (confirm(question)) yes();
else no();
}
ask(
"동의하십니까?,
function() {alert("동의하셨습니다.");},
function() {alert("취소 버튼을 누르셨습니다.");}
);
- 함수 표현식와 함수 선언문의 차이점
- 함수 표현식은 실행 흐름이 표현식에 다다랐을 때 만들어진다. 함수 호출을 아무 데서나 할 수 없다.(함수가 실행되고 나서 해야 되기 때문)
- 함수 선언문은 스크립트 실행 준비 단계에서 생성되기 때문에, 스크립트 내 어디에서든 접근할 수 있다.
- 함수 선언문은 선언된 블록 안에서만 유효하기 때문에 블록 밖에서는 사용할 수 없다.
- 화살표 함수
let func = (arg1, arg2,...) => result;
----------------------------------------
// 함수 표현식을 사용했을 경우
let func = function(arg1, arg2,...){
return result;
};
------------------------------------------
//여러 줄인 함수일 경우
let sum = (a, b) =>{
let return = a + b;
return sum; // 중괄호를 사용할 때는 return 지시자를 사용해 값을 반환해 줘야 한다.
};
'Javascript' 카테고리의 다른 글
[Javascript] 변수(Variable)와 상수(Constant) (0) | 2022.06.28 |
---|---|
[Javascript] 배열 사용법 (0) | 2022.06.28 |
객체, 배열 (0) | 2022.06.28 |
[Javascript] synchronous 와 asynchronous 차이 (0) | 2022.06.28 |
[Javascript] async, await (0) | 2022.06.28 |