[JavaScript]자바스크립트 기초문법2 - [자료형, 연산자, 함수선언, 반복문, 조건문]

in JavaScript on Basic


이번 포스트는 [자료형, 연산자, 함수선언, 반복문, 조건문]에 관한 내용입니다.

1️⃣ 자료형

(1) JavaScript는 동적(dynamic)언어

  • JavaScript는 동적언어이기 때문에 변수의 타입을 미리 선언할 필요가 없습니다.
  • 프로그램이 처리되는 과정에서 변수의 타입이 자동으로 파악됩니다.

<h4 align=”middle”style=”color:#0e435c;”>< 자료형선언 ></h4>

let temp1 = "Hello";  // String(문자형)
let temp2 = 42;      // Number(숫자형)
let temp3 = true;    // Boolean(불린형)
console.log(temp1 + temp2 + temp3);
console.log(typeof (temp1 + temp2 + temp3));  // 문자형의 힘이 큼
/*-------출력-------*/
Hello42true
string

<h4 align=”middle”style=”color:#0e435c;”>< 문자형변수에 숫자값 대입 ></h4>

let temp = "HI";  // 문자형으로 선언
console.log(typeof temp);

temp = 42;  // 숫자형값을 넣을 수 있음
console.log(typeof temp);
/*-------출력-------*/
string
number

(2) Boolean형 타입

  • 참이면 true, 거짓이면 false를 출력합니다. (파이썬에서는 True, False로 작성되는데 언어마다 작성의 차이가 있습니다.)
console.log(true);  // true
console.log(typeof true);  // boolean

console.log(Number(true));  // true == 1
console.log(Number(false)); // false == 0
/*-------출력-------*/
true
boolean
1
0



  • true:  '문자', 0이 아닌 숫자
  • false:  '', ""y, NaN, 0, undefined, null
console.log(Boolean("HI"));  // true
console.log(Boolean(""));    // false
console.log(Boolean(2));     // true
console.log(Boolean(0));     // false
console.log(Boolean(NaN));   // false
console.log(Boolean(undefined));  // false
console.log(Boolean(null));       // false
console.log(Boolean(String));     // true

(3) null 타입, undefined 타입

  • null타입과 undefined타입은 비슷하지만 다른 목적을 가지고 있습니다.
  • undefined는 의도치않게 값이 할당되지 않을 때 확인 용으로 사용합니다.
  • null은 의도적으로 값을 할당하지 않음을 표현용으로 사용합니다.
let x;  // 값을 할당 못함
console.log(x);

let y = null;  // 의도적으로 null값을 대입
console.log(y);
/*-------출력-------*/
undefined
null

(3) Number 타입, String 타입

  • Number타입은 숫자형, String타입은 문자형을 뜻합니다.
  • 위에서 언급했듯이 Javascript는 동적언어이기 때문에 숫자형과 문자형의 덧셈이 가능합니다. (합연산의 결과는 문자형입니다.)
  • NaN은 숫자가 아니다를 뜻하는 출력자 입니다.
  • 문자는 +연산자만 사용이 가능합니다.
console.log(Number('a'));  // NaN
console.log('a' + 3);   // 문자열은 + 연산이 가능
console.log('a' - 3);   // NaN
console.log('a' / 3);   // NaN
/*-------출력-------*/
NaN
a3
NaN
NaN



2️⃣ 연산자

(1) 연산자

  • JavaScript는 C언어와 비슷한 연산자를 지원합니다.
  • 심지어 ++, --와 같은 증감연산자사용이 가능합니다.
  • C언어와 다른점은 \(나눗셈)의 결과값입니다. (소수점까지 출력합니다.)
console.log(7 / 4);
console.log(13 / 3);
/*-------출력-------*/
1.75
4.333333333333333

(2) 비교 연산자

  • C언어의 비교 연산자를 모두 지원합니다.
  • JavaScript에서는 크게 ==, ===의 방법으로 값의 같은지를 확인할 수 있습니다.
  • ==는 자료형에 무관하게 값을 비교해 줍니다.
  • ===는 자료형까지 고려하여 값을 비교해 줍니다.
  • >=, <=같은 경우 문자형까지도 비교가 가능합니다.
console.log(3 == '3');  // true
console.log(3 === '3');  // false
console.log(4 >= '3');  // true
console.log('4' >= '3');  // false
/*-------출력-------*/
true
false
true
true

3️⃣ 함수 선언

(1) 기본함수 선언

  • function을 이용하여 함수를 선언할 수 있습니다.
  • 함수의 반환형을 지정해줄 필요가 없습니다.
  • {}를 이용하여 함수의 범위를 표시해 주어야 합니다.
function temp()
{
  console.log("Hello!");
}

temp();
/*-------출력-------*/
Hello!

(2) 파라미터

  • 파라미터를 지정할 수 있으며 ‘옵셔널파라미터’ 또한 사용이 가능합니다.
  • ‘옵셔널파라미터’는 항상 뒤쪽에 위치합니다.
function personInfo(name, age, nation = "미국")
{
  console.log(`이름: ${name}\n나이: ${age}\n국적: ${nation}`);
}

personInfo("철수", 23, "한국");
console.log();
personInfo("스티브", 33);
/*-------출력-------*/
이름: 철수
나이: 23
국적: 한국

이름: 스티브
나이: 33
국적: 미국

(3) 반환값(return)

  • C언어, 파이썬과 같이 return을 이용하여 반환값을 줄 수 있습니다.
  • 파이썬에서의 방법으로 여러개 값을 리턴할 수 없습니다. (컴파일은 되나 값이 정의되지 않습니다.)
function calculate(num1, num2)
{
  return (num1 + num2), (num1 - num2);  // 정상적으로 컴파일은 됨
}

let a,b = calculate(5, 3);
console.log(`a: ${a}\nb: ${b}`);
/*-------출력-------*/
a: undefined
b: 2

(4) 로컬변수(지역), 글로벌변수(전역)

  • 다른 언어와 같이 함수 내부에서 선언된 변수는 로컬변수(지역)로써 작동합니다.
  • 로컬변수를 우선적으로 탐색하며 그 다음순번으로 글로벌변수를 탐색합니다.
let x = 3;   // 글로벌변수

function temp()
{
  let x = 5;   // 로컬변수
  console.log(x);
}

temp();
console.log(x);
/*-------출력-------*/
5
3



4️⃣ 반복문

  • C언어에서의 반복문과 거의 같은 형태입니다.

(1) while문

let i = 0;

while (i < 3)  // 0, 1, 2
{
  console.log("Hello!");
  i++;
}

console.log(i);  // 변수 i가 그대로 살아있음
/*-------출력-------*/
Hello!
Hello!
Hello!
3

(2) for문

  • while문과 다르게 for문에서 선언된 변수는 for문만의 지역변수로 동작합니다.
for(let i = 0; i < 3; i++)  // 0, 1, 2
{
  console.log("Hello!");
}

console.log(i);  // 컴파일 오류

(3) break, continue

< break >

for (let i = 0; i < 5; i++)
{
  if (i == 2)  // 2일때 break로 인해 for문 탈출
    break;
  console.log(i);
}
/*-------출력-------*/
0
1

< continue >

for (let i = 0; i < 5; i++)
{
  if (i == 2)  // 2일때 아래코드를 무시하고 다시 반복문 진행
    continue;
  console.log(i);
}
/*-------출력-------*/
0
1
3
4



5️⃣ 조건문

  • if문, switch문의 문법이 C언어와 거의 같습니다.

(1) if문

  • JavaScript에서 if문은 ==를 사용하여 유연하게 값을 비교할 수있습니다.
  • ===을 사용하여 엄격하게 비교할 수 있습니다.
let score = 75;

if (score >= 90)
  console.log('A');
else if (score >= 80)
  console.log('B');
else if (score >= 70)
  console.log('C');
else
  console.log('F');
/*-------출력-------*/
C

(2) switch문

  • switch문 같은경우 값을 자료형을 고려하여 엄격하게 비교합니다.
let fruit = '3';

switch (fruit)
{
  case 1:
  {
    console.log(`숫자형`);
    break;
  }
  case 3:
  {
    console.log(`숫자형`);
    break;
  }
  case '3':
  {
    console.log(`문자형`);
  }
  default :
    break;
}
/*-------출력-------*/
문자형



< 자바스크립트[JavaScript] 기초문법 포스트 목차 >

1.  자바스크립트 기초문법1 [변수선언, 기본출력, 기본 규칙]
>> 자바스크립트 기초문법2 [자료형, 연산자, 함수선언, 반복문, 조건문]
3.  자바스크립트 기초문법3 [객체(objact)]
4.  자바스크립트 기초문법4 [배열(array)]
5.  자바스크립트 기초문법5 [(지수,n진법)표기법, 숫자형 메소드, Math객체]



© 2021.02. by kirim

Powered by kkrim