[자바스크립트] 변수, 데이터 타입, 연산자, 조건문, 반복문, 함수

1. 변수와 데이터 타입

(1) 변수

변수는 하나의 값을 저장하기 위해 확보한 공간을 말한다. 즉 값의 위치를 가리키는 상징적인 이름이며 변수명을 통해 접근 가능하다.

변수에 값을 저장하는 것을 할당이라 하고, 변수에 저장된 값을 읽어 들이는 것을 참조라 한다.

변수 선언

변수를 사용하려면 반드시 선언이 필요하다. 변수를 선언할 때는 var, let, const 키워드를 사용한다. ES6에서 let, const 키워드가 도입되었다.

• var: 함수 스코프를 가지며, 중복 선언이 가능하다. 
• let: 블록 스코프를 가지며, 중복 선언이 불가능하다.
• const: 블록 스코프를 가지며, 재할당이 불가능한 상수를 선언할 때 사용된다.

중복 선언이란, 같은 이름의 변수를 다시 선언하는 것을 말한다.

값의 재할당

재할당이란 이미 값이 할당되어 있는 변수에 새로운 값을 다시 할당하는 것이다. 

var score = 80; // 변수 선언과 값의 할당
score = 90; // 값의 재할당

const 키워드를 사용해 선언한 변수는 재할당이 금지된다. 즉 const 키워드는 단 한 번만 할당할 수 있는 변수를 선언하며 이는 상수라 한다.

(2) 데이터 타입

자바스크립트의 모든 값은 데이터 타입을 가지며 총 7개의 데이터 타입이 있다.

• 원시 타입
  • 숫자(number) 타입
  • 문자열(string) 타입
  • 불리언(boolean) 타입: 논리적 참과 거짓
  • undefined 타입: var 키워드로 선언된 변수에 암묵적으로 할당되는 값
  • null 타입: 값이 없음을 의도적으로 명시
  • symbol 타입
• 객체 타입: 객체, 함수, 배열 등

var integer = 10; // 정수
var double = 10.5 // 실수

var string = '10'; // 문자열
var name = "Kim"; // 문자열

var boolean = true;

var foo; // undefined

(3) 동적 타입 언어

C나 자바 같은 정적 타입 언어는 변수를 선언할 때 데이터 타입을 사전에 선언해야 한다. 이를 명시적 타입 선언이라 한다. 정적 타입 언어는 변수의 타입을 변경할 수 없고 타입에 맞는 값만 할당할 수 있다.

자바스크립트는 이와 다르게 변수를 선언할 때 타입을 선언하지 않는다. 정적 타입 언어와 같이 미리 선언한 데이터 타입의 값만 할당할 수 있는 것이 아니라 어떠한 데이터 타입의 값도 자유롭게 할당할 수 있다.

정적 타입 언어는 변수 선언 시점에 변수의 타입이 결정되는 반면, 자바스크립트의 변수는 선언이 아닌 할당에 의해 타입이 결정(타입 추론)된다. 그리고 재할당에 의해 변수의 타입은 언제든 동적으로 변할 수 있다. 이를 동적 타이핑이라 하고 자바스크립트를 동적 타입 언어라 한다.

2. 연산자

(1) 산술 연산자

• + : 더하기
• - : 빼기
• * : 곱하기
• / : 나누기
• % : 나머지
• ++ : 증가 연산자
• -- : 감소 연산자

증가/감소 연산자는 위치에 따라 의미가 다르다.

피연산자 앞에 위치하면, 먼저 피연산자의 값을 증가/감소시킨 후 다른 연산자를 수행한다.

피연산자 뒤에 위치하면, 먼저 다른 연산을 수행한 후 피연산자의 값을 증가/감소시킨다.

+ 연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작한다. 이때 true는 1로, false와 null은 0으로 타입 변환된다.

여기서 중요한 것은 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되었다는 것이다. 이를 암묵적 타입 변환이라 한다.

(2) 비교 연산자

• == : 동등 비교. 값이 같은지 비교 (타입 변환 허용)
• === : 일치 비교. 값과 타입이 모두 같은지 비교
• != : 부동등 비교. 값이 다른지 비교
• !== : 불일치 비교. 값과 타입이 다른지 비교

동등 비교 연산자(==)는 비교할 때 먼저 암묵적 타입 변환을 통해 타입을 일치시킨 후 같은 값인지 비교한다. 따라서 좌항과 우항의 타입이 다르더라도 암묵적 타입 변환 후 같은 값이라면 true를 반환한다.

일치 비교 연산자(===)는 타입도 같고 값도 같은 경우에만 true를 반환한다.

동등 비교 연산자는 결과를 예측하기 어려울 수 있고 실수하기 쉽기 때문에 일치 비교 연산자를 사용하는 것이 좋다.

• >, <, >=, <=

(3) 논리 연산자

• ||: 논리합(OR)
• &&: 논리곱(AND)
• !: 부정(NOT)

논리 부정 연산자는 항상 불리언 값을 반환한다. 피연산자가 불리언 값이 아닌 경우 불리언 타입으로 암묵적 타입 변환된다.

반면 논리합과 논리곱는 항상 두 피연산자 중 어느 한쪽으로 평가된다. (단축 평가)

3. 조건문

조건문은 주어진 조건식의 평가 결과에 따라 코드 블록의 실행을 결정한다. 

(1) if-else 문

조건식의 평가 결과가 true일 경우 if문의 코드 블록이 실행되고 false인 경우 else문의 코드 블록이 실행된다. 조건식을 추가하고 싶으면 else if 문을 사용한다.

var num = 2;

if (num > 0) {
  console.log('양수');
} else if (num < 0) {
  console.log('음수');
} else {
  console.log('0');
}

 

if-else문은 삼항 조건 연산자로 바꿔 쓸 수 있다.

var num = 2;
var result;

if (num % 2) {
  result = '홀수';
} else {
  result = '양수';
}
console.log(result);

// 삼항 조건 연산자 사용 시

var result2 = num % 2 ? '홀수' : '양수';
console.log(result);

(2) switch 문

switch문은 주어진 표현식을 평가하여 그 값과 일치하는 표현식을 갖는 case 문으로 실행 흐름을 옮긴다. case 문의 마지막에 break문이 없으면 실행 흐름은 연이어 다음 case 문으로 이동한다. break는 코드 블록에서 탈출 역할을 한다.

일치하는 case 문이 없다면 default 문으로 이동한다. default는 사용할 수도 있고 사용하지 않을 수도 있다.

var month = 11;
var monthName;

switch (month) {
  case 1:
    monthName = 'Jan';
  case 2:
    monthName = 'Feb';
  case 3:
    monthName = 'Mar';
  case 4:
    monthName = 'Apr';
  case 5:
    monthName = 'May';
  case 6:
    monthName = 'Jun';
  case 7:
    monthName = 'Jul';
  case 8:
    monthName = 'Aug';
  case 9:
    monthName = 'Sep';
  case 10:
    monthName = 'Oct';
  case 11:
    monthName = 'Nov';
  case 12:
    monthName = 'Dec';
  default:
    monthName = 'Invalid month';
}

console.log(monthName);

위 예제를 실행하면 'Nov'가 아니라 'Invalid month'가 출력된다. 처음에 'Nov'가 할당된 후 switch문을 탈출하지 않고 다음 case문이 연이서 실행되고 마지막으로 'Invalid month'가 재할당된 것이다. 이러한 현상은 fall through라 한다. 올바르게 작성하려면 case문마다 마지막에 break를 추가한다.

switch (month) {
  case 1:
    monthName = 'Jan';
    break;
  case 2:
    monthName = 'Feb';
    break;
  case 3:
    monthName = 'Mar';
    break;
  case 4:
    monthName = 'Apr';
    break;
  case 5:
    monthName = 'May';
    break;
  case 6:
    monthName = 'Jun';
    break;
  case 7:
    monthName = 'Jul';
    break;
  case 8:
    monthName = 'Aug';
    break;
  case 9:
    monthName = 'Sep';
    break;
  case 10:
    monthName = 'Oct';
    break;
  case 11:
    monthName = 'Nov';
    break;
  case 12:
    monthName = 'Dec';
    break;
  default:
    monthName = 'Invalid month';
    break;
}

728x90

4. 반복문

반복문은 조건식의 평가 결과가 참인 경우 코드 블록을 실행하고 조건식이 거짓일 때까지 반복한다. 주로 반복 횟수가 명확할 때 사용한다.

(1) for 문

for (변수 선언문 또는 할당문; 조건식; 증감식) {
  반복 실행될 문;
}

맨 먼저 변수 선언문이 실행되고 조건식이 실행된다. 변수 선언문은 단 한 번만 실행된다. 조건식이 true면 코드 블록이 실행되고 증감식이 실행된다. 다시 조건식이 실행되고 조건식이 false가 나오면 실행이 종료된다.

선언문, 조건식, 증감식은 모두 옵션이므로 반드시 사용할 필요는 없다. 만약 어떤 식도 선언하지 않으면 무한루프가 된다.

for (;;) {...}

(2) while 문

while문은 조건식 평가 결과가 참이면 코드 블록을 계속해서 반복한다. 주로 반복 횟수가 불명확할 때 사용한다.

조건식 평가 결과가 항상 참이면 무한 루프가 된다.

while (true) {...}

(3) do-while 문

do-while 문은 코드 블록을 먼저 실행하고 조건식을 평가한다. 따라서 코드 블록은 무조건 한 번 이상 실행된다.

5. 함수

프로그래밍 언의 함수는 일련의 과정을 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다. 입력을 받아서 출력을 내보내며, 입력을 전달받는 변수를 매개변수, 출력은 반환값이라 한다.

함수는 함수 정의를 통해 생성되고, 매개변수를 함수에 전달하면서 함수의 실행을 명시적으로 지시하는 함수 호출을 통해 함수가 실행된다.

// 함수 정의
function add(x, y) { return x + y; }

// 함수 호출
var result = add(2, 5);

console.log(result); // 7

함수는 필요할 때 여러 번 호출할 수 있어 코드의 재사용이 유용하다. 즉 코드의 중복을 줄일 수 있고 유지보수의 편의성을 높인다.

 

함수를 정의하는 방법은 함수 선언문, 함수 표현식, Function 생성자 함수, 화살표 함수 총 4가지가 있다.

(1) 함수 선언문

function add(x, y) {
  return x + y;
}

function 키워드를 사용하여 정의하며 함수 이름은 생략이 불가하다.

호이스팅이 적용되어 함수 선언 이전에도 호출이 가능하다.

(2) 함수 표현식

var add = function (x, y) {
  return x + y;
}

함수 리터럴로 생성한 함수 객체를 변수에 할당하는 방식이다. 함수 이름을 생략할 수 있다(익명 함수).

호이스팅이 적용되지 않아 선언 이후에만 호출이 가능하다.

(3) 화살표 함수

ES6에서 도입된 화살표 함수는 function 키워드 대신 화살표 => 를 사용해 좀 더 간략하게 함수를 선언할 수 있다. 항상 익명 함수로 정의한다.

const add = (x, y) => x + y;