2020.10.28 #TIL

 오늘 학원에서 2depth menu를 만들고 header영역을 position으로 배치하는 것을 위주로 공부했다.

그리고 저녁시간을 이용해서 자바스크립트 변수 기초를 공부했다.

 

1. Javascript 변수

 

1. 변수의 사용법

 

  - 변수 : variable, 문자와 숫자를 담는 container로 값을 유지할 필요가 있을때 사용함.(문자와 숫자와 같은 담는 값은 변경될 수 있음)

 - var : 변수를 선언하겠다는 것을 의미, 생략 가능함

  ex) var a = 1;

      a라는 이름을 가진 변수를 생성했음을 의미함.

      var를 생략할 때는 왜 생략하는지 이유를 명확히 알면 생략하고 만약 명확히 알지 못하면 생략하지 않는 것이 좋은 코딩을 위해 좋음

 

 - var a=1;

   alert(a); 

   a를 1이라는 변수라고 선언했기 때문에 경고창에 a 대신 1이 뜸

 - var a=10;

   alert(a);

   a는 값을 계속 변경할 수 있는 그릇이기 때문에 1을 10으로 바꿀 수 있음

 

 - 숫자 연산

   a = 1;

   b = 2;

  alert(a+b);  // 3으로 연산

 

 - 변수에 문자를 할당할 수 있음

   var a='coding';

  혹은 var a='coding', b='everybody'; 로 두 개 한번에 쓰기도 가능

 

2. 변수의 효용

 - 변수를 왜 사용하는가?

   : 변수는 코드의 재활용성을 높인다(좋은 코드를 위해 재활용성은 아주 중요한 요소임)

 

 예제) 100에 10을 더하고, 10을 나눈 후에 다시 10을 빼고 거기에 10을 곱해야 한다.

 

방법 1) 변수를 사용하지 않을 때

alert(100+10); alert((100+10)/10); alert(((100+10)/10)-10); alert((((100+10)/10)-10)*10);

방법2) 변수를 사용할 때

a=100;  // 변하는 부분 alert(a);  // 변하지 않는 부분 a=a+10; alert(a); a=a/10; alert(a); a=a-10; alert(a); a=a*10; alert(a);

 - 변수를 사용하지 않는 것이 코드가 더 짧아서 효율적으로 보이지만 만약 100을 1000으로 바꿔 계산하여야한다면 방법 1에서는 모든 100을 1000으로 바꿔야 한다. 또한 훨씬 더 긴 연산에서 100을 1000으로 바꿔야한다면 유지보수에 아주 취약해지기 때문에 방법 1같은 코딩은 지양하는 것이 좋음

  - 변수를 사용한다면 방법 2에서 a=100; 은 변할 수 있는 부분이고 이외의 코드는 변하지 않는 부분이다. 따라서 100을 1000으로 바꿔야한다면 a=100;을 a=1000;으로만 바꿔주면 쉽게 결과를 얻을 수 있기 때문에 변수를 사용하는 것이 좋음.