굳건하게

안녕하세요, 여행벌입니다.

오늘은 제어문의 한 종류인 선택문(switch)에 대해서 다뤄보겠습니다.

Switch 문

 선택문인 switch 문은 변수에 저장된 값과 switch 문에 있는 경우(case)의 값을 검사하여 변수와 경우의 값에서 일치하는 값이 있을 때 그에 해당하는 코드를 실행합니다. if 문과 용도는 비슷하나 if 문은 만족하는 데이터가 여러 개일 경우에 주로 사용하고, switch 문은 여러 경우의 값 중 일치하는 데이터를 찾아 그에 해당하는 코드를 실행시킬 때 사용합니다. 기본 형태는 다음과 같습니다.

let 변수 = 데이터;
switch(변수){
    case 값1 : 코드1; break;
    case 값2 : 코드2; break;
    case 값3 : 코드3; break;
    case 값4 : 코드4; break;
    default : 코드5;
}

 변수에 저장된 값은 switch 문을 만나면 case의 값을 하나씩 검사합니다. 일치하는 데이터가 있으면 그에 해당하는 코드를 실행하고 break 문을 만나 switch 문을 종료합니다. 일치하는 데이터가 없다면 마지막 default 에 있는 코드를 실행하고 switch 문을 종료합니다.

 변수의 값이 값1과 같다면 코드1을 수행, 값2와 같다면 코드2를 수행, 값3과 같다면 코드3을 수행, 값 4와 같다면 코드4를 수행, 어떤 값과도 같지 않다면 코드5를 수행합니다. if 문과 비슷하게 돌아가는 것을 확인할 수 있습니다.

예시를 통해서 익혀보겠습니다.

let today = "일"
switch(today){
    case "월" : console.log("오늘은 월요일입니다.\n"); break;
    case "화" : console.log("오늘은 화요일입니다.\n"); break;
    case "수" : console.log("오늘은 수요일입니다.\n"); break;
    case "목" : console.log("오늘은 목요일입니다.\n"); break;
    case "금" : console.log("오늘은 금요일입니다.\n"); break;
    case "토" : console.log("오늘은 토요일입니다.\n"); break;
    case "일" : console.log("오늘은 일요일입니다.\n"); break;
    default : console.log("잘못입력하셨습니다.\n");
}

today에 문자 "일"이 들어가 있으므로 case "일" 에 해당됩니다.

today를 한 번 바꿔보겠습니다.

let today = "금요일";

어떤 값과도 같지 않으므로, default 코드가 실행됩니다.

이번 포스팅은 선택문에 대해서 알아보았습니다.

선택문은 if 문과 비슷하지만 쓰이는 용도가 조금 다르므로 잘 익혀두시면 좋을 것 같습니다.

안녕하세요, 여행벌입니다.

이번에는 자바스크립트(javascript)의 제어문 중 하나인 if 문에 대해서 포스팅해보겠습니다.

조건문이란 

 제어문은 프로그램의 흐름을 제어할 수 있도록 도와주는 문장을 말합니다. 

 조건을 만족하는지의 여부에 따라 코드를 제어할 수 있는 제어문의 한 종류를 조건문이라합니다.

 즉, 조건문은 조건식의 값이 참(true)인지, 거짓(false)인지에 따라 자바스크립트 코드를 제어합니다.

if문

if 문은 조건식을 만족(true)할 경우에만 코드를 실행합니다. 기본 형태는 다음과 같습니다.

if (조건식){
	자바스크립트코드;
}

예시를 통해서 익혀보겠습니다.

var num = 10;
if(num < 500){
	console.log("hello");
 }

num 변수에는 10이라는 데이터를 저장했습니다. 조건식 num < 500 을 만족하므로 if 문은 자바스크립트 코드를 실행합니다. 따라서, "hello" 가 console 창에 출력되는 것을 확인할 수 있습니다.

조건식에 논리형 데이터(true, false)가 아닌 다른 타입이 오면 if 문이 어떻게 작동할까요??

정답은 조건식에 논리형 데이터(true, false)가 아닌 다른 형의 데이터가 입력되어도 true 또는 false로만 인식이 됩니다!!

0 null ""(빈문자) undefined

위의 4개를 제외하고는 모두 true 로 인식하고 4개는 false로 인식합니다.

else문

else 문은 조건식을 만족하는(true) 경우와 만족하지 않는(false) 경우에 따라 실행 코드가 달라집니다.

즉, 두 가지 결과가 나올 수 있는 조건문으로 기본 형태는 다음과 같습니다.

if (조건식){
	자바스크립트코드1;
}else{
	자바스크립트코드2;
}

조건식이 참이라면 자바스크립트코드1이 실행되고, 거짓이라면 자카스크립트코드2가 실행됩니다.

예시를 통해서 익혀보겠습니다.

let num = 2;
if(num % 2 == 0){
    console.log("짝수입니다.\n");
}else{
    console.log("홀수입니다.\n");
}

num 이 2이므로 조건식이 참이되고 if 문이 실행될 것입니다.

이번에는 num 을 3으로 바꿔서 실행해보겠습니다.

let num = 3;
if(num % 2 == 0){
    console.log("짝수입니다.\n");
}else{
    console.log("홀수입니다.\n");
}

"홀수입니다.\n" 가 출력되는 것을 확인할 수 있습니다.

else if 문

else if 문은 두 가지 이상의 조건식과 정해 놓은 조건을 만족하지 않았을 때 실행되는 코드로 이루어져 있습니다.

기본 형태는 다음과 같습니다.

if(조건식1){
	코드1;
}else if(조건식2){
	코드2;
}else if(조건식3){
	코드3;
}else{
	코드4;
}

원한다면 무수히 많은 조건식을 추가할 수 있습니다.

예시를 통해서 익혀보겠습니다.

let num = 5;
if(num === 0){
    console.log("num은 0입니다.\n");
}else if(num < 3){
    console.log("num은 3보다 작습니다.\n");
}else if(num < 5){
    console.log("num은 3보다 크거나 같고 5보다 작습니다.\n");
}else{
    console.log("num은 음수이거나 5보다 크거나 같습니다.\n");
}

조건문 1은 num이 0이면 참이되므로 num이 0일 때에만 작동합니다.

조건문 2는 num이 3보다 작으면 참이되므로 num이 0이 아니고(조건식1을 통과하고) 3보다 작을 때 작동합니다.

조건문 3은 num이 5보다 작으면 참이되므로 num이 0이 아니고(조건식1을 통과하고) 3보다 작지도 않고(조건식 2를 통과하고) 5보다 작으면 작동합니다.

조건문 4는 이외의 모든 경우에 작동합니다.

조건문은 한 번만 동작합니다. 즉, 조건식1과 조건식2가 동시에 만족되더라도 항상 코드1이 작동하눈 순간 조건문을 종료됩니다. 

아래 예시를 통해 자세히 익혀보겠습니다.

let num = 5;
if(num < 10){
    console.log("num은 10보다 작습니다.-1\n");
}else if(num < 10){
    console.log("num은 10보다 작습니다.-2\n");
}

num이 5이고 조건식1과 조건식 2가 동일하므로 조건식1, 조건식2 모두 참(true)가 되는 상황입니다.

조건식1과 조건식2를 모두 만족하지만 수행되는 코드는 코드1 뿐입니다.

오늘은 조건문에 대해서 알아보았습니다.

조건문은 정말정말 많이 쓰이는 제어문으로 포스팅 예시 외에도

여러가지 예시를 혼자 연습하시는 걸 추천드립니다.

안녕하세요, 여행벌입니다.

이번에는 자바스크립트(javascript)의 다양한 연산자에 대해서 포스팅해보겠습니다.

1. 연산자

자바스크립트 프로그래밍에서 사용하는 연산자는

산술, 문자 결합, 대입, 증감, 비교, 논리, 삼항 조건 연산자

가 있습니다.

- 산술 연산자

산술 연산자로 연산을 하기 위해서는 연산 대상 데이터가 반드시 2개 있어야 합니다.

- 문자 결합 연산자

문자 결합 연산자는 피연산자가 문자형 데이터이빈다.

이름 그대로 여러 개의 문자를 하나의 문자형 데이터로 결합할 때 사용합니다.

또, 숫자형과 문자형이 섞이면 문자형으로 캐스팅되서 저장이 됩니다.

문자형 데이터 + 문자형 데이터
ex) "do it " + "javascript";   // "do it javascript"

문자형 데이터 + 숫자형 데이터
ex) "100" + 200;   // "100200"

- 대입 연산자

대입 연산자는 연산된 데이터를 변수에 저장할 때 사용합니다.

- 증감 연산자

변수--;  --변수; // 변수의 값을 1 감소시킵니다.
변수++; ++변수; // 변수의 값을 1 증가시킵니다.

증감 연산자는 숫자형 데이터를 1씩 증가 혹은 감소시키는 연산자로

피연산자가 한 개만 필요한 단항 연산자입니다.

증감 연산자는 변수의 어느 위치에 오는가에 따라 결괏값이 달라집니다.

변수 앞에 ++ 이나 -- 가 온다면 1을 증가 혹은 감소 시킨 후 나머지 연산을 진행해달라는 뜻이고,

변수 뒤에 ++ 이나 -- 가 온다면 나머지 연산을 다 진행 후 1을 증가 혹은 감소 시켜달라는 뜻입니다.

예시를 통해서 익혀보겠습니다.

    <script>
        var s = 10;
        document.write(++s); // 11이 출력.
    </script>

변수 앞에 ++ 단항 연산자가 존재하므로 먼저 1을 증가시켜준 후

document.write() 를 진행하므로 11이 출력됩니다.

    <script>
        var s = 10;
        document.write(s++);
    </script>

반대로 변수 뒤에 ++ 단항 연산자가 존재하는 경우에는 출력을 먼저 한 후

1을 증가시키므로 10이 출력되고 s에는 마찬가지로 11이 저장됩니다.

- 비교 연산자

두 데이터를 '크다, 작다, 같다' 와 같이 비교할 때 사용하는 연산자로 결괏값은 참(true) 와 거짓(false)로 논리형 데이터를 반환합니다.

주의해야할 연산은 == 와 === , != 와 !== 의 차이입니다.

표기된 숫자만 확인할 것인지, 자료형까지 확인할 것인지의 차이로

지금은 "=== 가 조금 더 엄격하다." 정도로 이해하고 넘어가시면 될 것 같습니다. 

- 논리 연산자

- 삼항 조건 연산자

삼항 조건 연산자는 조건식의 결과에 따라 실행 결과가 달라지는 연산자로, 피연산자가 3개 필요합니다.

조건식 ? 자바스크립트 코드1 : 자바스크립트 코드2;

기본형은 위와 같으며, 조건식이 참이라면 코드1을, 거짓이라면 코드 2를 사용합니다.

    <script>
        var a = 10;
        var b= 3;
        var result = a > b ? "a가 더 큽니다." : "b가 더 큽니다.";
    </script>

a가 더 크므로 조건식 a > b가 참이 되고 result 에는 "a가 더 큽니다." 문자형 데이터가 저장됩니다.

- 연산자 우선 순위

연산자에도 우선 순위가 있습니다. 우선 순위를 잘 모르고 코딩을 한다면 예상한 결과와 실제 결과가 큰 차이가 있을 수 있으므로, 우선 순위는 어떤 언어를 공부하더라도 익혀두시는 걸 추천드립니다.

1. ( )
2. 단항 연산자( --, ++, ! )
3. 산술 연산자( *, /, %, +, - )
4. 비교 연산자( >, >=, <, <=, ==, ===, !=, !== )
5. 논리 연산자( &&, || )
6. 대입 연산자( =, +=, -=, *=, /=, %= )

이상으로 자바스크립트 연산자 포스팅을 마치겠습니다.

안녕하세요, 여행벌입니다.

앞으로 Javascript 를 공부하면서 차근차근 정리해보겠습니다.

1. 자바스크립트 선언문

자바스크립트 선언문은 자바스크립트 코드를 작성할 영역을 선언하는 것입니다.

<script> 태그를 이용해 선언을 하고 이 부분을 스크립트 영역이라고 합니다.

<script>
	~자바스크립트 코드~;
</script>

우리나라 개발자 대부분은 <head> 태그 영역에 자바스크립트 선언문을 작성합니다.

다음과 같이 HTML 내부에 자바스크립트 코드를 작성할 수 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>//~자바스크립트코드~</script>
</head>
<body>
    
</body>
</html>

하지만, 프로젝트 관리를 원활하게 하기 위해 보통은 외부로 자바스크립트 코드를 분리합니다.

외부 파일로 존재하는 자바스크립트 코드는 다음과 같이 src 속성을 이용해서 불러올 수 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="자바스크립트파일경로"></script>
</head>
<body>
    
</body>
</html>

2. 자바스크립트 변수

변수(Variables)는 변하는 데이터(값)을 저장할 수 있는 메모리 공간을 뜻합니다.

자바스크립트에서 변수에 저장할 수 있는 데이터 종류로는

문자형(string)

숫자형(Number)

논리형(Boolean)

빈 데이터(Undefined)

가 있습니다.

[ 기본형 ]
var 변수명;
var 변수명 = 데이터;
let 변수명;
let 변수명 = 데이터;

위와 같은 형태로 변수를 선언할 수 있습니다.

- 문자형

문자형(String) 데이터는 문자나 숫자를 큰따옴표(" ") 또는 작은따옴표(' ')로 감싸고 있습니다.

또, 문자형 데이터에 HTML 태그를 포함하여 출력하면 태그를 인식해 출력합니다.

    <script>
        var s="<h1> String </h1>";
        document.write(s); // s를 출력하는 명령어.
    </script>

위와 같이 <h1> 태그를 포함하여 출력하면 다음과 같이 <h1> 태그가 적용돼서 웹 브라우저에 출력됩니다.

- 숫자형

숫자형(Number) 데이터는 숫자를 의미합니다. 정수, 실수 모두 다 숫자형에 속합니다.

    <script> 
        var s= 100; 
    </script>

- 논리형

논리형(Boolean) 데이터는 참(true) 또는 거짓(false) 을 담고 있습니다.

    <script> 
        var s = true;
        var t = 5 < 10; // true
        var k = 5 > 10; // false
    </script>

- Undefined 형

Undefined는 변수에 값이 등록되기 전의 기본 값을 의미합니다.

Null은 변수에 저장된 값이 null인 경우로 Undefined와는 다르므로 구분해줘야 합니다.

null은 변수에 저장된 데이터를 비우는 용도로 사용합니다.

    <script> 
        var t = "hello";
        t = null;
    </script>

- typeof

typeof 는 지정한 변수에 저장된 자료형을 알고 싶을 때 사용하는 함수입니다.

typeof 변수;

위에서 다룬 4가지 데이터형에 대해서 typeof 함수를 사용해보겠습니다.

    <script> 
        var t = "hello";
        document.write(typeof t, "<br>");
        var s = 10;
        document.write(typeof s, "<br>");
        var k = false;
        document.write(typeof k, "<br>");
        var u;
        document.write(typeof u, "<br>");
    </script>

t는 문자형, s는 숫자형, k는 논리형, u는 Undefined 형이므로 다음과 같이 출력됩니다.

이번 포스팅에서는 가장 기본인 선언문과 자료형에 대해서 다뤄보았습니다.

다음 시간에는 기본 연산과 가능하다면 캐스팅에 대해서 다뤄보겠습니다.