2. Javascript 기초 2 <변수/연산자/제어문/함수/배열>

1. 변수 (Variables)

변수의 기본 형태:

var NAME = VALUE;

변수명은 CamelCase 방식으로 작성.

※ 변수를 사용하기 위한 3단계

1. Create Variable

2. Iniitialize

3. Use Variables

※ 새로운 변수/상수 선언 방식

변수 : let 키워드를 사용 ( reassign )

상수  : const 키워드 사용

변수선언 시 const 키워드를 이용하도록 하고, 필요한 경우에만 let 키워드를 사용하는 것이 안전한 코딩을 할 수 있는 방법이다.

※ 변수에 할당할 수 있는 데이터 타입

1. Number : 숫자형 데이터
2. Float : 부동소수점을 가지고 있는 실수형 데이터
3. String : 문자, 문자열 등 문자형 데이터
4. Boolean : True or False 

2.비교 연산자

2.1동등연산자 ==

좌항과 우항을 비교해서 서로 값이 같으면 True 다르면 False 를 반환

2.2일치연산자 ===

 == 과 같이 좌,우항 값을 비교하는데, Data Type도 같아야 True를 반환한다.

undefined : 정의되어 있지 않음 , 변수 반환값이 undefined 라면 해당 변수는 값이 할당되어 있지 않음을 나타냄.

null : 값이 없음. undefined와는 차이가 있다. 의도적으로 값이 없는 상태를 부여할때 사용.

NaN : 숫자가 아님을 알려주는 것

3. 논리 연산자

3-1. And 연산자(&&)

좌항과 우항의 값이 모두 True 일 경우에만 True 를 반환하는 연산자이다.

Example: 

  <script type="text/javascript">
  var id = prompt("아이디를 입력하세요: " );
  var password = prompt("패스워드를 입력하세요: ");
    if(id == 'egoing' && password == '123455'){
      alert("Login Success!");
    } else {
      alert("Login Failed! T T");
    }
  </script>

3-2. OR 연산자( || )

좌항 또는 우항의 값 중 둘 중 하나만 True이면 결과 값은 True를 반환하는 연산자이다.

prompt() : 사용자로 부터 입력값을 받는다.

alert(prompt("Age:"));  사용자로 부터 나이를 입력받으면 alert로 입력받은 값을 출력해준다.

※ Boolean의 대체제

 False로 처리되는 데이터 형식

•  ''
•  undefined
•  null
•  0
•  NaN

4. 제어문

기본적인 문법은 C , Java 등과 유사하다.

4-1. 조건문

if(조건식){
 
    statement1;
 
} else {
 
    statement2;
 
}

4-2. 반복문

(1) While 문

 

(2) for 문

(3) 반복문의 제어

5. 함수 

특정한 입력 값에 대해 처리를 통해 결과값을 반환하는 역할을 수행한다.

함수는 코드의 재활용성을 높여주는 것이 목적이다.

function 함수명 (파라미터) {
 
    함수내용;
 
}

5-1. 함수의 입력과 출력

(1) 입력

함수에 파라미터 값을 넘겨주어 원하는 결과값을 받아낸다.

파라미터는 단순히 이름만 주어질 수도 있고, argument=value 와 같이 주어지면 Default 값을 지정해 줄 수도 있다.

(2) 출력  

return 키워드를 통해 함수를 종료시키며 지정된 값을 반환.

  <script type="text/javascript">
    function get_member1(){
      return 'egoing';
    }
    function get_member2(){
      return 'kgh';
    }
  </script>

4-2. 익명 함수(anonymous Function)

함수의 이름이 없고, 정의하는 동시에 함수가 실행되는 일회성 함수이다.

  <script type="text/javascript">
    (function (){
      document.write("Anonymous Funtion Sample <br />");
    })();
  </script>

6.  배열 

여러 데이터를 하나로 묶어 놓은 것을 배열(Array)이라 부른다.

JavaScript 의 배열은 Python의 List 자료형과 유사하다.

6-1. 배열의 사용방법

/* 배열 변수 선언과 동시에 값 초기화 */
var members = ['val1', 'val2' ,'val3'];
 
/* 배열 변수 선언과 공간만 확보 */
var arr = new Array(arrayLength);
 

배열의 데이터에 접근하기 위해서 인덱스(index)를 이용한다. 

6-2. 배열의 조작법

배열의 뒤에 값 추가 : .push(value);

여러 값을 한번에 추가할 때  : .concat([list]);

배열의 가장 뒤에 있는 값을 출력 : .pop(data);

배열의 첫번째 위치에 값을 추가 : .unshift(data);

배열의 첫번째 값을 출력 : .shift(data);

배열의 원소를결합해서 문자열로 만듬 : .join(seperator);

배열의 원소를 역순으로 바꿈 : .reverse(array);

배열을 정렬 : .sort(array) : 숫자

배열의 특정 구간을 추출하거나, 특정 구간에 값을 추가 : .splice(index, howmany, element1, element2.....);