Javascript 기초 문법

이 글의 동영상 강의입니다.

https://youtu.be/mcq-cqnFJD0

 

* 이 글은 MDN Javascript 안내서를 참조하여 작성하였습니다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Introduction

Introduction - JavaScript | MDN

 

Javascript 실행 방법

Javascript 코드를 만들고 실행하는 방법은 다음과 같습니다.

• test.js 파일을 만들고 test.html에서 test.js를 선언해서 사용할 수 있습니다.

<script src="./test.js"></script>

• 크롬 브라우저 개발자 도구에서 콘솔에 javascript 코드를 입력하여 실행 할 수 있습니다.
  크롬 개발자 도구는 크롬 실행 후 F12 키를 눌러 실행 시킬 수 있습니다.

• nodejs를 설치한 후 node 명령을 통해 실행할 수 있습니다.
  아래는 nodejs로 test.js를 실행하는 명령입니다.

node test

여기서는 주로 3번째 방법인 nodejs를 설치하여 테스트 하도록 하겠습니다.

 

문법

• 대소문자를 구분합니다.

var name = "Spider Man";
var Name = "Iron Man";

console.log(name);
console.log(Name):

• 크롬 브라우저의 개발자도구에서 실행한 결과는 다음과 같습니다.
  크롬 개발자도구는 브라우저 실행 후 F12를 누르면 나타납니다.

• 주석은 다음과 같이 사용합니다.

// 한 줄 주석

/* 이건 더 긴,
 * 여러 줄 주석입니다.
 */

/* 그러나, /* 중첩된 주석은 쓸 수 없습니다 */ SyntaxError */

• 명령문(Statement)는 세미콜론( ; )으로 구분합니다.
  한줄로 명령문이 끝날 경우에는 세미콜론을 사용하지 않아도 됩니다.
  하지만 프로그램의 가독성을 위해 저는 사용하는 것을 권합니다.

var name = "Spider Man";

 

선언

• Javascript는 3가지 선언 방법이 있습니다.
  • var : 변수를 선언하고 동시에 값을 초기화 함.
  • let : 블록 범위 지역변수를 선언하고, 동시에 값을 초기화 함.
  • const : 블록 범위 읽기 전용 상수를 선언함. 
• var는 scope과 hoisting 문제가 있습니다. 이로 인해 ES6 이후부터 나온 let과 const의 사용을 권합니다. 
• 아래는 scope 문제의 예입니다.

var name = "Spider Man";
if (name) {
	var name = "Iron Man";
	console.log("I am " + name);
}
console.log("I am " + name);

실행 결과

• if문 block에서 변경한 name의 값이 block 외부에도 영향을 미치고 있습니다.
• 다음과 같이 let과 const를 사용하면 block scope을 갖게 됩니다.

let name = "Spider Man";
if (name) {
	let name = "Iron Man";
	console.log("I am " + name);
}
console.log("I am " + name);

실행결과

• 아래는 hoisting 문제의 예입니다.

console.log(name);
var name = "Iron Man";
console.log(name);

실행 결과

• name을 선언하지 않았지만 오류가 나지 않고 undefined라는 값을 출력했습니다.
• 아래와 같이 let과 const를 사용하면 에러가 발생하게 됩니다.

console.log(name);
let name = "Iron Man";
console.log(name);

실행 결과

변수

• 변수는 var와 let을 이용해 선언합니다.
• 초기값이 없을 경우 undefined 값을 갖습니다.

var a;
console.log("a 값은 " + a); // "a 값은 undefined"로 로그가 남음.

let x;
console.log('x 값은 ' + x); // x 값은 undefined​

• undefined를 갖는 변수는 if 문에서 false가 리턴됩니다.

var name;
if (name) {
	console.log("true");
}else {
   console.log("false");
}

 

상수

• 상수는 const를 사용하여 선언합니다.
• 상수는 초기에 설정된 값외에 다른 값으로 바꿀 수 없습니다.
• 상수는 재선언할 수 없습니다.

 

데이터형

Javascript는 7가지 데이터 형을 정의합니다.

• Boolean : true or false
• null : 값이 없음
• undefined : 값이 정의되지 않음
• Number : 정수 또는 실수형 숫자. 예:5 or 3.14159
• String : 문자열
• Symbol : 고유하고 불변인 데이터 형
• Object : 객체형

 

배열

Javascript에서 배열은 다음과 같이 []를 사용하여 선언합니다.

var coffees = ["French Roast", "Colombian", "Kona"];

 

Block

• Block 문은 코드의 묶음을 나타내고 중괄호 "{ }"로 표시합니다.

{
  statement_1;
  statement_2;
  .
  .
  .
  statement_n;
}

• Block 문은 일반적으로 제어문(if, for, while)과 함께 사용합니ㅏㄷ.

while (x < 10) {
  x++;
}

 

조건문

• 조건문은 참인 경우에 실행하는 명령의 집합입니다.
• javascript에서 조건문은 if...else와 switch 문이 있습니다.

if (condition) {
  statement_1;
} else {
  statement_2;
}

switch (expression) {
  case label_1:
    statements_1
    [break;]
  case label_2:
    statements_2
    [break;]
    ...
  default:
    statements_def
    [break;]
}

 

예외처리

• javascript의 예외처리는 throw와 try...catch...finally문을 사용합니다.

throw "Error2";   // String type
throw 42;         // Number type
throw true;       // Boolean type
throw {toString: function() { return "I'm an object!"; } };

try {
  writeMyFile(theData); //This may throw a error
} catch(e) {
  handleError(e); // If we got a error we handle it
} finally {
  closeMyFile(); // always close the resource
}

 

javascript 기초적인 문법은 반드시 알고 있어야 하므로 모르실때마다 꼭 확인하는 습관을 들이시기 바랍니다.