ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • javascript
      JAVASCRIPT 2022. 1. 12. 00:50

      1. 함수

      (1) basic

      <body>
      <script>
      //함수 정의
      //함수의 이름은 동사적 기능이 내포되게 짓습니다.
      function calcTotal(x){
      consol.elog('함수가 호출됨!');
      var total = 0;
      for(var n=1; n<=x; n++){
      total += n;
      }
      return total;
      }
      function add(n1, n2){
      return n1 + n2;
      }
      //함수 리터럴
      var add2 = function(n1, n2){
      return n1 + n2;
      }
      //화살표 함수
      var add3 = (n1, n2) => {
      return n1 + n2;
      }
      console.log(calcTotal(10));
      var result = calcTotal(50);
      console.log('result: ' + result);
      console.log(add(10,20));
      console.log(add2(10,20));
      console.log(ad3(10,20));
      //함수를 변수에 할당할 수 있습니다.
      var ct = calcTotal;
      var result2 = ct(200);
      console.log('result2: ' + result2);
      </script>
      </body>
       

      (2) parameters

      <body>
      <script>
      //begin부터 end까지의 총합을 구해주는 함수
      function calcRangeTotal(begin, end){
      var total = 0;
      // 매개변수는 큰 의미가 없습니다.
      // 단순히 매개값으로 들어오는 것에 이름을 붙여 사용하는 형태입니다.
      //함수에 전달되는 매개변수는 arguments 객체에서 전부 확인이 가능합니다.
      console.log(arguments);
      console.log('길이: ' + arguments.length);
      for(var n=begin; n<=end; n++){
      total += n;
      }
      return total;
      }
      function selectRandomFood(){
      var rn = Math.random();
      return rn > 0.5 ? '짜장면' : '짬뽕';
      }
      function multiply(n1, n2){
      if(typeof n1 !== 'number' || typeof n2 !== 'number'){
      console.log('숫자를 전달하세요!');
      return;
      }
      return n1 * n2;
      }
      var res = multiply(3, '메롱');
      console.log(res);
       
      console.log('랜덤 음식: ' + selectRandomFood());
      //자바스크립트의 함수는 매개변수의 개수를 다르게 주더라도 작동합니다.
      //권장하지 않습니다.
      var totalNumber = calcRangeTotal(10, 30);
      console.log('실행 결과값: ' + totalNumber)
      // 매개변수의 디폴트 값 지정
      function sayHello(language ='한국어'){ //디폴트는 한국어로 한 것입니다.
      if(language === '한국어'){
      console.log('안녕하세요~');
      } else if(language === '영어'){
      console.log('Hello~');
      } else if(language === '일본어'){
      console.log('곤니찌와~');
      }
      }
      sayHello();
      sayHello('일본어');
      </script>
      </body>
       

      (3) return

      <body>
      <script>
      //void 함수: 리턴값이 없는 함수
      // void 함수는 단독 호출해서 사용, 다른 함수의 인자(매개값)로 전달이 불가능합니다.
      function greetings(nickname){
      var bad_nick = ['멍청이', '바보', '쓰레기', '양아치'];
      if(bad_nick.includes(nickname)){
      console.log('나쁜 말은 하지 마세요!');
      return; //함수 강제 종료
      // console.log('메롱이다~');
      }
      console.log(nickname + '님 안녕하세요~!');
      }
      var result = greetings('쓰레기');
      console.log(result);
      function operateAll(n1, n2){
      return {
      plus: n1 + n2,
      minus: n1 - n2,
      multi: n1 * n2,
      divide: n1 / n2
      }
      }
      var results = operateAll(10, 2);
      console.log(results.plus);
      console.log(results.minus);
      console.log(results['multi']); //이렇게도 호출이 가능합니다.
      </script>
      </body>

       

      (4) multi-param

      <body>
      <script>
      //매개값 2개
      function add(n1, n2){
      return n1 + n2;
      }
      //n개의 정수의 합을 구하는 함수
      //spread
      function addAll(name, ...numbers){
      console.log(name + '님 안녕~');
      var total = 0;
      for(var num of numbers){
      total += num;
      }
      return total;
      }
      var result = addAll('홍길동', 10, 20, 30, 40, 50, 100, 1000, 10000);
      console.log(result);
       
      </script>
       
      </body>

       

      (5) 다양한 함수 알아보기~!

       

      <body>
      <script>
      //즉시 실행 함수 (정의와 동의에 실행되는 함수)
      (function(x, y) {
      console.log(`x + y = ${x+y}`);
      }(60, 70));
      //재귀 함수
      console.log('===============================');
      function countdown(n){
      if(n < 0) return;
      console.log(n);

       

      countdown(n-1);
      }
      countdown(5);
      console.log('===============================');
      function factorial(n){
      if(n <= 1) return 1;
      return n * factorial (n-1);
      }
       
      console.log(factorial(6));
      //중첩 함수
      console.log('===============================');
      function outer(){
      var x = 1;
      function inner(){
      var y =2;
      console.log(x + y);
      }
      inner();
      }
      outer();
      </script>
      </body>

       

      (6) callback

       

      <body>
      <script>
      //콜백 함수
      function showNumbers(n, func){
      for(var i=1; i<=n; i++){
      func(i);
      }
      }
       

       

      showNumbers(10, i => {
      if(i % 2 === 0){
      console.log(i);
      }
      });
      var plusMinus = function(a, b , callback){
      callback(a + b, a - b);
      }
       
      plusMinus(10, 20, function (res1, res2){
      console.log(res1);
      console.log(res2);
      });
      </script>
      </body>

       

      2. 스코프

      (1) basic

      <body>
      <script>
      var x = 'global';
      function foo(y){
      var x = 'local';
      console.log('x: ' + x);
      console.log('y: ' + y);
      }
      console.log('x: ' + x);
      foo('parameter');
      </script>
      </body>
       

      (2) local-scope

      <body>
      <script>
      var x = 'global x';
      function outer(x){
      var y = 'outer local y';
      console.log('x: ' + x);
      console.log('y: ' + y);
      function inner(){
      var x = 'inner local x';
      var z = 'inner local z';
      console.log(x);
      console.log(y);
      console.log(z);
      }
      // console.log(z);
      inner();
      }
      outer('outer local x');
      console.log(x);
      </script>
      </body>
       
      3. let, const
      (1) const
      <body>
      <script>
      const x = '메롱';
      console.log(x);
      // x = '안메롱'; (값의 변경이 불가능)
      //const와 객체(객체, 배열, 함수)
      const person = {
      name : 'park',
      age : 20
      }
      person.name = 'kim';
      console.log(person);
      //객체 자체를 변경하는 행위는 불가
      /*person = {
      name : 'lee',
      age : 33
      };*/
      </script>
      </body>
       
      (2) let
      <body>
      <script>
      //1. 변수의 중복 선언 불가능
      let x = 100;
      // let x = 200;
      //2. 블록 레벨 스코프 인정
      if(true){
      let y = 100;
      console.log('if문 내부 y: ' + y);
      }
      console.log('if문 외부 y: ' + y);
      //3. 변수 호이스팅이 발생하지 않습니다.
      z = 10;
      consol.elog(z);
      let z;
      </script>
      </body>

      (3) var의 문제점

      <body>
      <script>
      //1. 중복 선언 허용
      // 동일 이름 변수가 선언된지 모르고 변수를 중복 선언하면
      // 의도치 않게 변수의 값이 변경되는 부작용이 발생할 수 있다.
      var x = 1;
      var x = 100;
      console.log(x);
      //2. 블록 레벨 스코프를 지원하지 않는다. (함수만 블록으로 인정합니다.)
      //var 키워드는 오로지 함수의 영역만을 지역 스코프로 인식합니다.
      // 따라서 함수 외의 블록들에게는 모두 전역변수로 일괄 적용됩니다.
      // 전혀 관련없는 변수의 값이 사용될 수 있고 , 전역변수가 남용될 수 있습니다.
      var i = 1;
      for(var i=0; i<10; i++){
      }
      console.log('i: ' + i);
      //3. 변수 호이스팅
      // var 키워드로 변수를 선언하면 호이스팅에 의해
      // 변수 선언문이 자동으로 맨 위로 끌어올려진 것처럼 동작합니다.
      //흐름 해석에 방해되어 가독성과 유지보수성을 현격하게 떨어트립니다.
       
      y = 100;
      console.log('y: ' + y);
      var y;
      </script>
      </body>
       

      'JAVASCRIPT' 카테고리의 다른 글

      javascript  (0) 2022.01.17
      javascript  (0) 2022.01.14
      javascript  (0) 2022.01.13
      javascript  (0) 2022.01.12
      javascript  (0) 2022.01.11

      관련글 관련글 더보기

    Designed by Tistory.

    티스토리툴바