반응형
이 글의 동영상 강의입니다.
* 이 글은 MDN Javascript 안내서를 참조하여 작성하였습니다.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Introduction
Introduction - JavaScript | MDN
이 장은 JavaScript를 소개하고 그 일부 기초 개념을 다룹니다.
developer.mozilla.org
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 기초적인 문법은 반드시 알고 있어야 하므로 모르실때마다 꼭 확인하는 습관을 들이시기 바랍니다.
반응형
'자바스크립트' 카테고리의 다른 글
| JSON 기초 (feat. Live Server) (0) | 2021.10.16 |
|---|
