자바스크립트의 연산자, 함수

자바스크립트의 연산자 

• 자바스크립트의 데이터 타입은 다이나믹하게 변한다. 
  
  • number타입
    • 기본적으로 java의 double과 동일하다.
    • 숫자는 상수의 값이다. 
    • 정수와 실수를 담을 수 있다. 
  • boolean타입
    • true, false의 값을 갖고 있다.
  • string타입
    • 문자열은 "" , '', ``으로 감싸도 된다.
  • array타입
    • 배열은 new라는 키워드가 필요하지 않는다.
    • []
    • 자바스크립트는 크기가 가변적이다.
  • object타입
    • {};
    • 중괄호로 감싸서 나타낸다.
    • 이름:값의 형태를 가지고 있다.
  • 4가지의 property는 name:value의 값으로 저장한다. 
  • 기존의 property의 삭제와 추가가 가능하다. 
• 산술연산자 
  • 자바와 유사하다. 그러나 다른점은
  • 정수/ 정수 일경우 실수가 나온다. 
  • 모든숫자는 실수처럼 다루어진다. 
    • 전부 소주점부분이 0인 실수이다. 
  • 실수/실수 = 2.5
  • 정수/정수 = 정수가 나오는 것은 아니다. 
• 비교연산자 
  • == 타입이 다르더라도 변환후 값이 일치하면 true 다. 
    • 둘중에 하나만 같아도 true다.
  • ===타입이 같고, 값도 같을 때만 true다. 
    • 전체적으로 같을 때 true이다. 
  • != 타입도 다르고, 값도 다를 때만 true이다. 
    • 전체적으로 같을 때 true이다. 
  • !== 타입이 다르거나, 값이 다르면 true이다.
    • 둘중에 하나만 같아도 true이다. 
  • != 와 ===가 제일 많이 사용된다. 
• 논리 연산자 
  • && || !
    • java에서는 boolean의 값이 논리연산의 값이 되었었다.
  • 자바스크립트에서 false로 여기는 값은 
    • false, undefined, null, 0, '' , NaN은 항상 false로 간주되는 값이다.
  • 자바스크립트에서 true로 여기는 값은 
    • 위에서 정의한 6개의 값을 제외한 모든 값이다.
  • 자바의 경우 피연산자가 반드시 boolean타입의 값이거나, 연산결과가 boolean의 타입이어야한다. 
    논리연산의 연산결과는 항상 true, false의 값 중의 하나이다. 
    • distance > 30000 || year >= 3  -->이런 부분만 가능하다. 
  • 자바스크립트의 경우 피연산자가 boolean타입의 값일 필요는 없다.
    • 논리연산의 결과가 boolean의 타입이 아닐 수 없다. 
  • 4 && 5  -->값이 5가 나온다.
    var distance = 3000 ---> undefined
    distance >= 50000 || year >= 3 ---> 1.false 와 false의 비교로 false의 값이 나온다.
    var minPrice; --> 1. undefined --> 2. false로 판단되는 값
    
  • 3. ||연산자는 좌항의 값이 true일 때 우황을 확인하지 않는다. 
    ||연산자는 좌황의 값이 false일 때 우황을 확인한다. 
  • 4.즉 위의 식에서 좌항이 false이기 때문에 우황을 확인한다. 
  •  minPrice || 1000  --> false || 1000  -->false와 1000을 비교함 (1000의 값에 따라서 true와 false가 된다.)  -->5. 우황의 값은 1000이다.
  • 6. 따라서, 이 연산의 최종결과는 1000이다. 
  • 7. 최종결과값이 true/false가 아닌 이유는 1000이 true에 해당하는 값이기 때문이다. --> 어제 false배운것 외에는 전부 false이다. 
  • if문에서 사용이 된다면 1000인 값으로 인식하여  true의 값으로 인식한다.
• 즉, 자바스크립트에서 논리연산자의 경우 기본값을 입력하기 위하여, 논리연산자를 사용한다. 
• function searchProductsByMinPrice(minPrice) {
  변수 = 매개변수 || 매개변수의 값이 null이거나 undefined일 때 변수에 대입할 디폴트의 값
  var price = minPrice || 1000;
  console.log(price);
  price변수의 값은 매개 변수 minPrice값이 undefined일 때 1000이다
  price의 변수의 값은 매개변수 minPrice값이 undefined가 아닐 때는 minPrice의 값이 된다. -->변수의 기본값이 들어가기 위하여 사용한다. 뒤의 있는 값이 default값이다.
  }
• searchProductByMinPrice(); -->값을 넣지 않았을 경우 : 매개변수의 값을 주지 않고도 호출하는 것이 가능하다. minPrice는 undefined다.  출력결과 : 1000
  searchProductByMinPrice(5000); minPrice는 5000이다 출력결과 : 5000
  searchProductByMinPrice(25000); minPrice는 25000이다 출력결과 : 25000
  searchProductByMinPrice(50000); minPrice는 50000이다 출력결과 : 50000
  -->minPrice가 전달 받지 않을 경우, 기본값을 설정할 수 있다. 

예시 

• 자바 스크립트의 논리 연산자의 고유한 특징을 응용한 예
  maxUploadFileSize값이 undefined일 때 size는 1024*1024*10이다.
  maxUploadFileSize값이 undefined가 아닐 때 size는 maxUploadFileSize의 값이다.
  var maxUploadFileSize;
  var size = maxUploadFileSize || 1024*1024*10;
  console.log(size); //출력결과 : 1024*1024*10
  
  maxUploadFileSize = 1024*1024*5;
  size = maxUploadFileSize || 1024*1024*10;
  console.log(size); //출력결과 : 1024*1024*5

자바스크립트의 함수 

• 이름이 있는 코드들의 블록이다. 
• 자바스크립트의 프로그램을 구성하는 주요 구성요소이다. 
• 함수의 사용목적 
  • 함수를 이용해서 프로그램에서 반복적으로 등장하는 코드를 함수로 정의하면 코드의 중복을 제거할 수 있다. 
  • 함수를 이용해서 사용자와의 상호작용을 구현한다. 
  • 함수를 이용해서 html태그, 컨텐츠, 스타일등을 조작할 수 있다. 
• 함수의 선언(정의)
  • function 함수이름(매개변수 , 매개변수, 매개변수, ...) { --여러개 작성가능하다.
        수행문; -->이 부분이 함수의 본문이 된다. 
        수행문;
     }
• 함수의 사용과 실행
  • 함수이름(값, 값, ...); 
  • 참조변수가 필요하지 않다. 
• 함수의 선언
  • function이라는 객체를 만들어서 이름과 매개변수를 입력한다. 
  • 이름으로 저장된 함수를 찾아서 실행하게 된다. 
• 매개변수 
  • 자바스크립트 함수는 매개변수를 갖는다. 
  • 매개변수에 맞는 적절한 값을 인자로 전달해야한다.
  • 매개변수의 갯수보다 적은 갯수의 값을 인자로 전달할 수 있다.
  • 매개변수의 갯수보다 많은 갯수의 값을 인자로 전달할 수 있다.
  • 매개변수로 숫자, 문자열, 불린값, 배열, 객체, 함수를 전달받을 수 있다. 
  • 자바는 함수는 받을 수 없다. 
  • 기본값을 가지는 매개변수 정의하기 
    • 기본 값이 정의된 매개변수는 값을 전달받지 못하면 기본값으로 설정된 값이 매개변수에 저장된다. 
    • function sendMessage(from, to, title, text="내용은 없습니다.") { //text의 기본값을 설정해 놓았다. 
      console.log(from, to, title, text);
      }
      
    • greeting(); //매개변수를 전달받지 않으면 undefined의 값을 입력받는다.
      • 매개 변수 name에 값이 전달되지 않았다. 매개변수 name의 값은 undefined다.
    • greeting("홍길동");
      • 매개 변수 name에 값이 전달되었다. 매개변수의 name의 값은 "홍길동"이다.
    • sendMessage("홍길동","김유신","오후 2시 회의","오후 2시에 회의 있습니다.");
      • 모든 매개변수에 값이 전달 되었다. 
    • sendMessage("강감찬", "이순신","점심때 짜장면 어때?");
      • 제목만 작성하고 내용은 작성하지 않았다.
      • text 매개 변수에 값이 전달되지 않았다. text매개변수에는 기본값으로 설정한 값이 설정된다. 
    • 자바의 경우 매개변수에 무조건 값을 줘야하지만, 자바스크립트는 값을 주지 않으면 undefined의 값이간다.
    • function sum(x, y){
      console.log("arguments",arguments); //함수에 전달되는 인자값을 갖고있는 배열이다.
      console.log("x=", x, "y=", y)
      var result = x + y;
      console.log("연산결과" , result)
      }
      • arguments는 자바스크립트 함수는 매개변수로 전달되는 모든 인자값을 가지는 배열이다. 
      • 모든 자바스크립트의 함수가 공통으로 가지고 있는 프로퍼티이다.
    • 자바스크립트의 함수를 호출할 때는 매개변수의 갯수에 상관없이 함수를 호출할 수 있다. 
      • sum(); //NaN , undefined와 undefined가 연산하면 NaN 가 나타난다. Not A Number
      • sum(10); //NaN , x= 10 y= undefined으로 NaN이 나타난다.  [10, callee: ƒ, Symbol(Symbol.iterator): ƒ]의 값을 가진다.
      • sum(200, 400); //600
      • sum(3000, 6000, 9000); //9000 x= 3000 y= 6000 의 연산
      • sum(500, 1500, 2500, 3500, 4500); //2000  x= 500 y= 1500의 연산, 몇개를 보내던지 앞의 2개만 계산된다.
        • 앞의 뒤에는 필수입력값으로, 매개변수보다 더많은 값을 보내게 되면 사용하는 것보다 많은 것을 사용할 수 있다. 모든 자바스크립트 함수안에는 기본적으로 프라퍼티의 함수가 들어가있다. 
    • 지역변수 
      • 함수안에서 정의한 변수다. 
      • 해당 함수 내부에서만 사용이 가능하다. 
      • function showMessage() {
        //지역변수다.
        var message = "반갑습니다."; 
        console.log('지역변수의 값',message);
        }
        •  지역변수를 선언시 var을 생략할 경우 글로벌 변수가 된다. 지역변수로 선언시 var을 생략해서는 안된다.
      •  함수내부에서 선언된 지역변수는 함수밖에서 사용할 수 없다. 
    • 글로벌 변수 
      • 함수의 외부에서 정의한 변수다. 
      • 서로 다른 함수에서 사용할 수 있다. 
      • 여러 함수에서 공통으로 사용하는 값을 글로벌 함수로 정의할 수 있다. 
        • 만드는 방법
          • 변수를 만들 때 var을 생략한다. --> 생각해서는 안되는 방법이다. 
          • 함수밖에서 var로 정의한다. 
      • var path = "c:/save";
        
        function saveImage(filename) {
        var fullpath = path + filename; //밖에서 정의해서 path처럼 사용할 수 있다.
        console.log(fullpath + "파일을 저장합니다.");
        }
        function downloadImage(filename) {
        var fullpath = path + filename;
        console.log(fullpath + "파일을 다운로드합니다.");
        }
        
      • saveImage("logo.png");
        downloadImage("logo.png");
    • 함수의 반환값
      • 함수를 호출한 측에게 반환되는 값이다. 
      • return문을 사용해서 값을 반환할 수 있다. 
      • 함수 선언부의 반환타입을 정의할 필요가 없다. 
        • 자바스크립트의 모든 변수는 변수를 생성할 때 타입을 지정할 필요가 없기 때문이다.
          • 알아서 변경이 되기 때문이다. 
      • 함수의 반환값은 숫자, 문자열, 불린값, 배열, 객체, 함수 모두 가능하다. 
      • function plus(x, y){
        var z = x + y;
        return z;
        }
      • function getScore(name, kor, eng, math) {
        var total = kor + eng + math;
        var average = total/3;
        //학생 성적정보를 포함하는 객체를 생성한다.
        var result = {학생이름:name, 국어점수:kor, 영어점수:eng, 수학점수:math, 총점:total, 평균:average};
        //배열의 객체는 name:value의 값을 반환한다. 
        return result;
        }
        • 값은 전부 public 이기 때문에 open되어있어서 getter/setter이 필요하지 않다.
        • 값을 가져오는 방법
          • //x. 학생이름으로 가져온다. --> dot연산자와 
            //x[학생이름]으로 가져온다.  -->브라켓표기법으로 가져올 수 있다. 
      • var score = getScore("홍길동", 100, 80, 60); //score안에 객체가 들어있다.
        console.log(score.학생이름);
        console.log(score['국어점수']);
        console.log(socre.평균);
    • 이름이 있는 함수와 이름이 없는 함수 
      • 익명함수를 만들 수 있지만, 자바의 익명 객체와는 달른 부분이다. 
    • 이름이 있는 함수 (함수 선언식)
      • function 함수이름(매개변수){...} : 이름있는 함수이다. 
      • 이름이 있는 함수에서 함수의 이름은 그 함수로 작성하고, 
      • 함수의 이름과 매개인자를 작성한다. 
      • 함수의 이름이 함수를 가르키는 참조변수라고 생각하면 쉽다. 
    • 이름 없는 함수(함수 표현식)
      • function(매개변수) {...}   : 이름 없는 함수이다.
      • 위와 동일하게 이름없는 함수가 저장된 변수도 그함수를 참조한는 값을 대입하면 된다. 
      • var bye = function(name) {
        console.log(name + " 님 안녕히 가세요");
        }
      • bye("김유신");
        • 사용법은 이름없는 함수를 참조하는 변수에 대입하여, 함수를 실행하는 매개변수의 값을 입력하는 것이다. 
        • 이름이 있던지 없던지 함수의 이름을 작성하고 괄호를 붙인다. 
        • 함수의 이름이 곧 그 함수를 가르키는 참조변수이다. 
    • 즉시실행함수 
      • 변수에 담아놓고, 단 한번만 실행하기 위해서 만든 함수이다. 
      • (function(){
        console.log("함수가 실행되었음");
        })();
      • 괄호를 붙이면 실행할 수 있기 떄문에 괄호로 감싸고 괄호로 붙여서 만들었다. 
        • 웹 페이지가 로딩되자마자 바로 실행되게 만들었다. 
        • 라이브러리는 내부적으로 즉시 실행함수를 사용한다. 
      • 즉시 실행함수의 매개변수에 인자를 전달하기 
        • (function(a, b, c){
          console.log(a, b, c);
          })(10, 20, 30);
        • 함수를 실행하는 것은 (); 괄호이다. 값까지 실행할 수 있다.