elex/javascript-examples

Fork 0

Files

Elex 342a843ce6 2024-06-21

2024-06-21 14:34:12 +09:00

6.1 KiB

Raw Blame History

기본 문법과 자료형

기본 구문

자바스크립트의 구문은 자바, C, C++ 등과 매우 비슷합니다.

let a = "Hello";
let 안녕 = "안녕";

자바스크립트는 대소문자를 구분합니다. 또한, 유니코드를 사용하므로 변수 이름에 한글을 사용해도 됩니다.

자바와 마찬가지로, 하나의 명령문이 끝나면 세미콜론을 붙입니다. 하지만, 줄 바꿈이 있는 때에는 세미콜론을 생략해도 됩니다.

C 스타일의 한줄 주석과, C++ 스타일의 블록 주석 모두 사용할 수 있습니다.

변수의 선언

var

변수를 선언합니다. 선언과 동시에 값을 할당할 수도 있습니다. 하위호환성 문제가 없다면 let과 const를 사용하세요.
let

변수를 선언합니다. var의 단점을 보완하고자, ECMAScript 2015에서 추가되었습니다.
const

상수를 선언합니다. ECMAScript 2015에서 추가되었습니다.

상수의 값은 변경할 수 없지만, 상수로 선언된 객체의 멤버나 상수로 정의된 배열의 항목은 변경할 수 있습니다.

선언만하고 초기화되지 않은 변수는 undefined라는 값을 갖습니다.

let a;
console.log("a = " + a); // a = undefined

const PI = 3.141592;

var와 let

변수의 범위

var로 선언된 변수는 블록 범위라는 개념이 없습니다.

if (true) {
    var a = "Hello";
}
console.log(a); // Hello

let으로 선언된 변수는 블록 범위 내에서만 유효합니다.

if (true) {
    let a = "Hello";
}
console.log(a); // ReferenceError: a is not defined

변수 호이스팅

var로 선언된 변수는 맨 위로 끌어 올려집니다.

console.log(a === undefined); // 나중에 선언된 변수도 사용할 수 있다.
var a = 3;

/* 위 코드는 아래와 같이 작동합니다. */
var a;
console.log(a === undefined);
a = 3;

console.log(a === undefined); // ReferenceError: Cannot access 'a' before initialization
let a = 3;

함수 호이스팅

fun1(); // 아직 정의되지 않은 함수도 맨 위로 끌어 올려집니다.

function fun1() {
    console.log("Function 1");
}

fun2(); // Error

var fun2 = function () { // 함수 표현식 형태로 정의된 경우에는 끌어 올려지지 않습니다.
    console.log("Function 2");
}

데이터 구조와 타입

Boolean

true 또는 false 중 하나입니다.
Number

정수형 또는 실수형 숫자입니다.
String

문자열입니다.
Symbol

인스턴스가 고유하고 불변인 데이터 형입니다. ECMAScript 2015에서 추가되었습니다.
Object

자바스크립트 객체입니다.

undefined

undefined는 수치 문맥에서는 NaN으로, boolean 문맥에서는 false로 동작합니다.

let a; // a = undefined
if (a) {
    console.log("a = " + a); 
} else {
    console.log("a is undefined.");
}

console.log(a + 34); // NaN

null

자바스크립트는 대소문자를 구분하므로 null은 Null, NULL 등과 다릅니다.

null은 수치 문맥에서는 0으로, boolean 문맥에서는 false로 동작합니다.
```
let a = null;
if (a) {
    console.log("a = " + a);
} else {
    console.log("a is null.");
}

console.log(a + 34); // 34
```

동적 자료형

자바스크립트는 동적 타이핑 언어로써 변수에 자료형을 지정하지 않습니다.

let a = 43;
a = "Hello"; // 숫자나 문자열이나 상관없이 어떤 값이라도 할당할 수 있습니다.

문자열과 숫자를 + 연산하면 숫자는 문자열로 변환됩니다. 그러나, - 연산의 경우에는 문자열형 숫자가 숫자로 변환됩니다.

console.log("The number is " + 42); // The number is 42
console.log(42 + " is the number"); // 42 is the number
console.log("The number is " - 42); // NaN

console.log("3" + 2); // 32
console.log(3 + "2"); // 32
console.log("3" + "2"); // 32
console.log("3" - 2); // 1
console.log(3 - "2"); // 1
console.log("3" - "2"); // 1

문자열형 숫자를 숫자로 변환

전역 함수 parseInt()와 parseFloat()를 사용해서 문자열형 숫자를 숫자로 바꿀 수 있습니다.

parseInt(numStr, radix) // 진법도 지정해야 합니다. 
parseFloat(numStr)

let a = "3.9";
console.log(parseInt(a, 10)); // 3
console.log(parseFloat(a)); // 3.9

리터럴

숫자

43, -365 // 10진수
0xff0d, 0x1234 // 16진수. 0x로 시작한다.
0b0011, -0b11 // 2진수. 0b로 시작한다.
3.141592 // 실수
-.1234
-3.1E+12 // 실수의 지수 표현
.1e-23

문자열

문자열은 큰 따옴표("") 또는 작은 따옴표('')로 감싸서 표현합니다.

let str = "Hello, World!";

템플릿 리터럴

템플릿 리터럴은 ECMAScript 2015에서 추가되었습니다. 템플릿 문자열은 백틱(`)으로 감쌉니다. 템플릿 문자열에서는 줄 바꿈이 유지됩니다.

let name = "Charlie";
let age = 14;
let template = `My name is ${name}. I'm ${age}-year-old.`;
console.log(template);

배열

배열은 대괄호를 사용해서 표현합니다.

let array = ["a", "b", "c"];

배열 요소 가운데에 쉼표만 있으면 해당 요소는 undefined가 됩니다. 맨 끝의 쉼표는 무시됩니다만, 브라우저에 따라 다르게 구현되어 있습니다.

let array = ["a", "b", , "c",];

for (const element of array) {
    console.log(element);
}
/*
    a
    b
    undefined
    c
*/

객체

객체는 중괄호를 사용해서 키/값 쌍을 표현합니다.

let charlie = {
    age: 14,
    name:"Charlie"
};

console.log(charlie.age); // C의 구조체처럼 .으로 접근할 수도 있고,
console.log(charlie["age"]); // 배열처럼 []로 접근할 수도 있습니다.

정규식

정규식은 슬래시로 감싸서 표현합니다.

let regex = /[a-z0-9]*/;

6.1 KiB Raw Blame History