[GSIT-POSTECH-DSC107] 웹 프로그래밍 기초 8

[Day 8] Ⅲ. JacvaScript 1

 

4. 변수란? 숫자 또는 문자열과 같은 값의 컨테이너, 값이 변경될 수 있음.

변수 설명 이미지 (출처: 포스텍)

   - 변수와 선언: 변수를 사용하기 위해서는 우선 변수를 선언해야 함. 

       1. 변수 선언

          - var + 원하는 변수 이름

var myName;
var myAge;

       2. 선언하지 않은 변수를 사용한 경우 

          - 오류 문구 생성

 

   - 변수의 초기화 및 업데이트

       1. 값으로 초기화

          - 원하는 변수 이름 = '초기화 값'

myName = 'Chris';
myAge = 37;

초기화된 myName, myAge 변수값

       2. 변수를 선언하고 초기화하는 법(동시에)

var myName = 'Chris';

       3. 변수의 값이 할당되면 다른 값으로 업데이트 할 수 있음

var myName = 'Chris';
myName = 'Bob';
myAge = 40;

 

 

   - 변수 이름에 대한 규칙

       1. 알파벳(a-z, A-Z), 숫자(0-9), 밑줄(_)

       2. 시작부분에 밑줄(_) 사용은 피해야 함

       3. 시작부분에 숫자 사용은 불가

       4. Lower Camel Case 사용: 여러 단어를 하나로 묶고 첫 단어의 시작은 소문자, 다음 단어의 시작은 대문자로 지정

                                           e.g., myAge totalGuessCount

       5. 포함된 데이터를 표현하는 직관적인 이름: 단일문자, 숫자, 긴 구절 사용은 피해야 함

       6. 대소문자 구분: myage =/= myAge

       7. 자바스크립트 예약어는 사용 불가: e.g., var, function, let for, etc.

 

   - 변수 예제

(좌) 좋은 변수의 예 / (우) 나쁜 변수의 예 (출처: 포스텍)

 

   - 변수의 종류

       1. 숫자(따옴표 사용X)

var myAge =37;

       2. 문자열(작은 따옴표나 큰 따옴표로 표시)

var dolphinGoodbye = 'So long and thanks for all the fish';

       3. 논리값: true or false

var isAmAlive = true;
var test = 3 < 7;

       4. 배열(대괄호로 묶이고 쉼표로 구분된 여러 값을 포함하는 단일 개체

var myNameArray = ['Chris', 'Bob', 'Jim'];
var myNumberArray = [10, 15, 40];

          - 위와 같이 배열이 정의되면 아래의 구문을 사용하여 개별값에 접근 가능

myNameArray[0];
myNumberArray[2];

배열을 정의하고 개별값에 접근한 예시

 

       5. 객체: 실제 사물을 모델링하는 코드구조

                  e.g., 주차장 객체 = 주차장의 넓이나 높이 정보를 가지고 표현

                  e.g., 사람 객체 = 이름, 키, 몸무게, 사용하는 언어 등의 정보를 가지고 표현

var dog = { name: 'Spot', breed: 'Dalmatian' };

// 객체에 저장된 정보를 가져오는 방법은 아래와 같음
dog.name

객체 정보를 지정하고 객체 변수에 접근

 

   - 동적 자료형: 자바스크립트는 다른 언어와 달리 변수에 포함할 데이터의 유형을 지정할 필요가 없음

var myString = 'Hello'
// 상기 예시에서 Hello를 따옴표 안에 넣어 자동으로 문자로 인식

// 1.
var myNumber = '500';
typeof(myNumber);

// 2.
var myNumber = 500;
typeof(myNumber);

/*
1번 예시는 따옴표 안에 숫자를 넣었으므로 문자로 인식
2번 예시는 따옴표 없이 숫자를 넣었으므로 숫자로 인식
각각 출력했을 때 서로 다른 값이 출력됨
*/

위의 1, 2번 예시를 출력한 경우