자바스크립트 기본문법 (변수,상수,데이터타입,연산자,주석처리,템플릿 리터럴)

2. 기본 문법

자바스크립트는 웹 개발에서 가장 많이 사용되는 프로그래밍 언어 중 하나로, 기본 문법을 익히는 것이 매우 중요합니다. 이 장에서는 자바스크립트에서 변수를 선언하고, 데이터를 다루고, 연산을 수행하는 방법 등 기본적인 문법을 다룹니다. 예시와 함께 설명하므로 실습하면서 이해할 수 있습니다.

자바스크립트 기본문법 변수,상수,데이터타입,연산자,주석처리,템플릿 리터럴

2.1 변수와 상수 (var, let, const)

자바스크립트에서 변수를 선언하는 방법은 3가지가 있습니다: var, let, const. 이들은 각각 서로 다른 특성과 용도를 가지고 있습니다. 변수를 선언한다는 것은 데이터를 저장할 공간을 확보하고 그 공간에 값을 할당하는 것을 의미합니다.

2.1.1 `var`

var는 자바스크립트의 초기 버전부터 사용되던 변수 선언 방식입니다. 그러나 var는 몇 가지 문제가 있어 최근에는 잘 사용되지 않으며, let과 const로 대체되고 있습니다.

특히 var는 함수 범위(function scope)를 따릅니다. 즉, var로 선언된 변수는 함수 내부에서만 유효하지만, 함수 밖에서 선언된 경우 전역 범위로 인식됩니다.

또한 var는 호이스팅(hoisting)이라는 개념에 의해 변수가 선언되기 전에 사용할 수 있는 문제를 가지고 있습니다. 호이스팅은 자바스크립트가 변수 선언을 스코프의 맨 위로 끌어올리는 현상을 의미합니다.

예시:

javascript
function exampleVar() {
  console.log(myVar); // undefined
  var myVar = 10;
  console.log(myVar); // 10
}
exampleVar();

위 코드에서 myVar는 선언 전에 사용되었음에도 불구하고 에러가 발생하지 않으며, 대신 undefined가 출력됩니다. 이는 자바스크립트가 var myVar 선언을 함수 스코프의 맨 위로 끌어올렸기 때문입니다.

2.1.2 `let`

let은 ES6(ECMAScript 2015)에서 도입된 변수 선언 방법으로, 블록 범위(block scope)를 따릅니다. 즉, let으로 선언된 변수는 {}로 감싸진 블록 내부에서만 유효합니다. let은 var와 달리 호이스팅 문제도 없으며, 같은 스코프 내에서 중복 선언이 허용되지 않습니다.

예시:

javascript
function exampleLet() {
  let x = 1;
  if (true) {
    let x = 2; // 다른 블록의 x
    console.log(x); // 2
  }
  console.log(x); // 1
}
exampleLet();

위 코드에서 let x는 두 번 선언되었지만, 서로 다른 블록 내에 있기 때문에 서로 다른 변수로 인식됩니다.

2.1.3 `const`

const는 상수를 선언할 때 사용됩니다. 상수(constant)란 한 번 할당되면 다시 변경할 수 없는 변수를 의미합니다. 상수는 재할당이 불가능하지만, 객체나 배열의 경우 참조 값이 고정될 뿐 객체 내부의 속성은 변경될 수 있습니다. const 역시 let과 마찬가지로 블록 범위를 따릅니다.

예시:

javascript
const PI = 3.14;
console.log(PI); // 3.14

// PI = 3.14159; // Error: Assignment to constant variable

const myArray = [1, 2, 3];
myArray.push(4);
console.log(myArray); // [1, 2, 3, 4]

위 코드에서 PI는 상수이므로 재할당이 불가능하지만, myArray는 배열 객체이므로 배열 내부 값은 변경할 수 있습니다.

2.2 데이터 타입

자바스크립트는 동적 타이핑(dynamically typed)을 지원하는 언어입니다. 즉, 변수의 데이터 타입이 고정되지 않고, 코드가 실행되는 동안 언제든지 변경될 수 있습니다. 자바스크립트의 데이터 타입은 크게 원시 타입(Primitive Types)과 객체 타입(Object Types)으로 나뉩니다.

2.2.1 원시 타입 (Primitive Types)

숫자(Number): 자바스크립트에서 숫자는 정수와 소수 구분 없이 모두 number 타입으로 처리됩니다.

예시:
```
javascript
let age = 30;
let pi = 3.14159;
```
문자열(String): 문자열은 작은 따옴표(' ') 또는 큰 따옴표(" ")로 감쌉니다. 자바스크립트에서 문자열은 변경 불가능(immutable)한 타입입니다.

예시:
```
javascript
let name = "John";
let greeting = 'Hello, world!';
```
불리언(Boolean): 불리언은 true 또는 false 값만 가질 수 있습니다. 주로 조건문에서 사용됩니다.

예시:
```
javascript
let isAdult = true;
let hasLicense = false;
```
null: null은 "값이 없다"는 것을 의미하는 특별한 데이터 타입입니다. 개발자가 의도적으로 변수에 "비어 있음"을 명시할 때 사용합니다.

예시:
```
javascript
let emptyValue = null;
```
undefined: undefined는 변수가 선언되었지만 값이 할당되지 않은 상태를 나타냅니다. 또한, 함수에서 명시적으로 반환하지 않은 값은 undefined를 반환합니다.

예시:
```
javascript
let notAssigned;
console.log(notAssigned); // undefined
```
심볼(Symbol): symbol은 고유하고 변경 불가능한 값입니다. 주로 객체의 고유한 속성 키로 사용됩니다.

예시:
```
javascript
let sym1 = Symbol("description");
let sym2 = Symbol("description");
console.log(sym1 === sym2); // false
```

2.2.2 객체 타입 (Object Types)

객체는 키-값 쌍으로 이루어진 데이터 타입입니다. 객체는 자바스크립트의 핵심 요소로, 배열, 함수, Date, RegExp 등의 데이터 구조도 객체입니다.

예시:

javascript
let person = {
  name: "Alice",
  age: 25,
  isStudent: true
};
console.log(person.name); // Alice

배열도 객체의 일종으로, 데이터를 순서대로 저장하는 리스트입니다.

예시:

javascript
let fruits = ["apple", "banana", "cherry"];
console.log(fruits[1]); // banana

2.3 연산자 (산술, 비교, 논리 연산자)

연산자는 값을 계산하거나 비교하고, 논리적인 판단을 수행하는 데 사용됩니다. 자바스크립트는 다양한 연산자를 제공하며, 이를 통해 복잡한 로직을 처리할 수 있습니다.

2.3.1 산술 연산자 (Arithmetic Operators)

산술 연산자는 숫자를 계산할 때 사용됩니다.

+: 더하기
-: 빼기
*: 곱하기
/: 나누기
%: 나머지
**: 거듭제곱 (ES6에서 도입)

예시:

javascript
let x = 10;
let y = 3;
console.log(x + y);  // 13
console.log(x - y);  // 7
console.log(x * y);  // 30
console.log(x / y);  // 3.333...
console.log(x % y);  // 1
console.log(x ** y); // 1000 (10의 3제곱)

2.3.2 비교 연산자 (Comparison Operators)

비교 연산자는 두 값을 비교하여 참(true) 또는 거짓(false)을 반환합니다.

==: 동등 (값만 비교)
===: 엄격한 동등 (값과 타입 모두 비교)
!=: 같지 않음
!==: 엄격하게 같지 않음
>: 크다
<: 작다
>=: 크거나 같다
<=: 작거나 같다

예시:

javascript
let a = 5;
let b = "5";
console.log(a == b);   // true (값만 비교)
console.log(a === b);  // false (값과 타입을 모두 비교)
console.log(a != b);   // false
console.log(a !== b);  // true

2.3.3 논리 연산자 (Logical Operators)

논리 연산자는 주로 조건문에서 참과 거짓을 조합하여 복잡한 조건을 만들 때 사용됩니다.

&&: 논리 AND (두 조건이 모두 참일 때 참)
||: 논리 OR (두 조건 중 하나라도 참이면 참)
!: 논리 NOT (참을 거짓으로, 거짓을 참으로 바꿈)

예시:

javascript
let isAdult = true;
let hasLicense = false;
console.log(isAdult && hasLicense);  // false (둘 다 참이 아니므로)
console.log(isAdult || hasLicense);  // true (하나가 참이므로)
console.log(!isAdult);               // false (논리 부정)

2.4 주석 처리하기

주석은 코드에 설명을 추가하는 방법입니다. 주석은 실행되지 않으며, 코드를 이해하기 쉽게 만드는데 사용됩니다. 자바스크립트에서 주석은 한 줄 주석과 여러 줄 주석 두 가지 방식이 있습니다.

한 줄 주석: //를 사용하여 한 줄을 주석 처리합니다.

예시:

javascript
// 이 코드는 두 수를 더하는 함수입니다.
function add(a, b) {
  return a + b;
}

여러 줄 주석: /* */를 사용하여 여러 줄을 주석 처리합니다.

예시:

javascript
/*
  이 함수는 두 수를 더하는 함수입니다.
  a와 b는 숫자여야 합니다.
*/
function add(a, b) {
  return a + b;
}

주석은 코드를 유지보수하거나, 협업하는 개발자들이 코드의 의도를 쉽게 파악할 수 있도록 도와줍니다.

2.5 템플릿 리터럴 (Template Literals)

템플릿 리터럴은 ES6에서 도입된 기능으로, 문자열을 보다 쉽게 조합하거나 다룰 수 있게 해줍니다. 기존의 문자열 연결 방식보다 간결하고, 가독성도 높습니다.

템플릿 리터럴은 백틱(backtick, `)을 사용하여 선언하며, 문자열 내부에 변수를 삽입하거나, 여러 줄의 문자열을 쉽게 표현할 수 있습니다.

2.5.1 변수 삽입 (Interpolation)

템플릿 리터럴을 사용하면 ${}를 통해 문자열 내에 변수나 표현식을 삽입할 수 있습니다.

예시:

javascript
let name = "Alice";
let age = 25;
let message = `My name is ${name} and I am ${age} years old.`;
console.log(message);  // My name is Alice and I am 25 years old.

2.5.2 여러 줄 문자열 (Multiline Strings)

템플릿 리터럴은 여러 줄에 걸쳐 문자열을 작성할 수 있습니다. 기존에는 줄바꿈을 위해 \n을 사용해야 했지만, 템플릿 리터럴을 사용하면 더 직관적으로 작성할 수 있습니다.

예시:

javascript
let multiline = `
  This is the first line.
  This is the second line.
  This is the third line.
`;
console.log(multiline);

출력:

arduino
This is the first line.
This is the second line.
This is the third line.

템플릿 리터럴을 통해 가독성이 높은 코드를 작성할 수 있으며, 문자열을 동적으로 구성할 때 특히 유용합니다.

자바스크립트 기본문법 (변수,상수,데이터타입,연산자,주석처리,템플릿 리터럴)

2. 기본 문법

2.1 변수와 상수 (var, let, const)

2.1.1 `var`

2.1.2 `let`

2.1.3 `const`

2.2 데이터 타입

2.2.1 원시 타입 (Primitive Types)

2.2.2 객체 타입 (Object Types)

2.3 연산자 (산술, 비교, 논리 연산자)

2.3.1 산술 연산자 (Arithmetic Operators)

2.3.2 비교 연산자 (Comparison Operators)

2.3.3 논리 연산자 (Logical Operators)

2.4 주석 처리하기

2.5 템플릿 리터럴 (Template Literals)

2.5.1 변수 삽입 (Interpolation)

2.5.2 여러 줄 문자열 (Multiline Strings)

작성자: 비밀스런체셔

댓글 쓰기

0 댓글

많이 본 글

배당 황제주 귀족주 44종목 총정리

유튜브 항소 영상 만들기 (재사용된 콘텐츠로 수익 제한 항소 후기)

유니티 에러 Assertion failed on expression: '!(o->TestHideFlag(Object::kDontSaveInEditor) && (options & kAllowDontSaveObjectsToBePersistent) == 0)' 해결

Tags

인기 글

배당 황제주 귀족주 44종목 총정리

유튜브 항소 영상 만들기 (재사용된 콘텐츠로 수익 제한 항소 후기)

리뷰

재테크콘텐츠

자바스크립트 기본문법 (변수,상수,데이터타입,연산자,주석처리,템플릿 리터럴)

2. 기본 문법

2.1 변수와 상수 (var, let, const)

2.1.1 var

2.1.2 let

2.1.3 const

2.2 데이터 타입

2.2.1 원시 타입 (Primitive Types)

2.2.2 객체 타입 (Object Types)

2.3 연산자 (산술, 비교, 논리 연산자)

2.3.1 산술 연산자 (Arithmetic Operators)

2.3.2 비교 연산자 (Comparison Operators)

2.3.3 논리 연산자 (Logical Operators)

2.4 주석 처리하기

2.5 템플릿 리터럴 (Template Literals)

2.5.1 변수 삽입 (Interpolation)

2.5.2 여러 줄 문자열 (Multiline Strings)

작성자: 비밀스런체셔

관심 있을 만한 글

댓글 쓰기

0 댓글

많이 본 글

배당 황제주 귀족주 44종목 총정리

유튜브 항소 영상 만들기 (재사용된 콘텐츠로 수익 제한 항소 후기)

유니티 에러 Assertion failed on expression: '!(o->TestHideFlag(Object::kDontSaveInEditor) && (options & kAllowDontSaveObjectsToBePersistent) == 0)' 해결

Tags

인기 글

배당 황제주 귀족주 44종목 총정리

유튜브 항소 영상 만들기 (재사용된 콘텐츠로 수익 제한 항소 후기)

리뷰

재테크콘텐츠

2.1.1 `var`

2.1.2 `let`

2.1.3 `const`