Notice
Recent Posts
Recent Comments
Link
«   2024/09   »
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
Archives
Today
Total
관리 메뉴

나만의 코딩 일지

[Javascript] 반복문, 함수 본문

Javascript

[Javascript] 반복문, 함수

namgung 2022. 6. 28. 17:56
  • 숫자 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