자바스크립트 기초

이 기사는 자바스크립트의 기본 사항을 설명합니다.

YouTube Video

Hello World! 실행하기

자바스크립트 개요

자바스크립트는 웹 개발에서 가장 널리 사용되는 프로그래밍 언어 중 하나입니다. 주로 웹 페이지에 동적 요소를 추가하여 사용자 인터페이스 조작, 데이터 전송, 애니메이션 생성 등을 가능하게 합니다. 클라이언트 측(브라우저 내)과 Node.js와 같은 기술을 사용한 서버 측에서도 작동할 수 있습니다. 간단하고 유연하기 때문에 초보자가 배우기 쉽고, 전문 개발자들에게도 널리 사용됩니다.

JavaScript의 변수

JavaScript의 변수는 데이터를 저장하고 재사용하기 위한 컨테이너와 같습니다. 변수를 사용하면 프로그램에서 값을 유지하고 조작할 수 있습니다.

변수 선언

JavaScript에서는 변수를 선언하기 위한 세 가지 키워드가 있습니다.

• var: 변수를 선언하는 오래된 방법이지만, 범위를 처리하는 것이 복잡하고 주의가 필요합니다. 함수 범위를 기반으로 합니다.

1var x = 10;

• let: ES6에서 도입된 블록 범위를 가진 변수를 선언하는 방법입니다. 같은 범위에서 재선언할 수는 없지만 다시 할당할 수 있습니다.

1let y = 20;

• const: 변경할 수 없는 변수(상수)를 선언하는 데 사용됩니다. 블록 스코프를 가지며, 선언 후 다시 할당하거나 재선언할 수 없습니다.

1const z = 30;

스코프

변수는 스코프라는 개념을 가집니다.

전역 스코프

1var globalVar = 'This is global'; // Global scope
2
3function accessGlobal() {
4    console.log(globalVar); // Able to access global variable
5}
6
7accessGlobal(); // Outputs "This is global"

• 전역 스코프 변수는 어디에서든 접근할 수 있습니다. var로 선언된 변수는 전역 또는 함수 스코프를 가지지만, let과 const는 블록 스코프를 가집니다.

블록 스코프

1if (true) {
2    let localVar = "This is a block-scoped variable";
3
4    // Accessible inside the brackets
5    console.log(localVar);
6}
7
8// Error: localVar cannot be used outside of this scope
9console.log(localVar);

• 블록 스코프: let 또는 const로 선언된 변수는 {}(중괄호) 내에서만 유효합니다.

• {} (중괄호) 바깥에서 접근하려고 할 때 오류가 발생합니다.

함수 스코프

 1function myFunction() {
 2    var functionScoped = 'This is function scope';
 3    // Accessible inside the function
 4    console.log(functionScoped);
 5
 6    if (true) {
 7        var functionVar = 'This is also function scope';
 8    }
 9    // functionVar can be used inside of the fucntion
10    console.log(functionVar);
11}
12
13myFunction(); // Outputs "This is function scope"
14
15// Error: functionScoped is not defined
16console.log(functionScoped);

• 함수 스코프: 함수 내부에서 정의된 변수와 함수는 함수 외부에서 접근할 수 없습니다. 함수 내부에서 var로 선언된 변수는 이 스코프에 속합니다.

• 이 예에서 변수 functionVar는 함수 범위 내에 있는 한 {} (중괄호) 바깥에서도 접근할 수 있습니다. 반면에, 함수 범위 밖에서 변수 functionScoped에 접근하려고 하면 오류가 발생합니다.

따라서, var로 선언된 변수는 오직 함수 스코프만 가지며 블록 스코프는 가지지 않기 때문에, 예상치 못한 범위에서 사용될 위험이 있습니다. 변하지 않는 변수에는 const를 사용하는 것이 바람직하며, 일반적으로 let을 사용하고 var의 사용은 가능한 한 피하는 것이 좋습니다.

데이터 타입

JavaScript 변수는 다양한 데이터 타입의 값을 저장할 수 있습니다. 텍스트를 처리하는 string과 숫자 값을 처리하는 number가 있습니다.

주요 데이터 타입은 다음과 같습니다:.

 1// Number: Numeric type (integer and floating point number)
 2let integerNumber = 42;
 3let floatNumber = 3.14;
 4console.log("Number (Integer):", integerNumber);
 5console.log("Number (Float):", floatNumber);
 6
 7// String: String type
 8let text = "Hello, JavaScript!";
 9console.log("String:", text);
10
11// Boolean: Boolean type (true or false)
12let isJavaScriptFun = true;
13let isError = false;
14console.log("Boolean (true):", isJavaScriptFun);
15console.log("Boolean (false):", isError);
16
17// Null: Explicitly represents "nothing"
18let emptyValue = null;
19console.log("Null:", emptyValue);
20
21// Undefined: The default value assigned to an uninitialized variable
22let notDefined;
23console.log("Undefined:", notDefined);
24
25// Symbol: A data type for creating unique values
26let uniqueKey = Symbol("id");
27console.log("Symbol:", uniqueKey);

• 기본 타입:
  • number: 숫자 값을 처리합니다 (정수와 부동소수점 숫자).
  • string: 문자열(문자의 나열)을 처리합니다.
  • boolean: 불리언 값인 true 또는 false를 처리합니다.
  • null: 명시적으로 '없음'의 값을 나타냅니다.
  • undefined: 초기화되지 않은 변수에 자동으로 할당되는 값.
  • Symbol: 고유한 값을 생성하는 데 사용되는 데이터 타입.

 1// Object: A data structure that holds multiple properties
 2let person = {
 3    name: "Alice",
 4    age: 25,
 5    isStudent: false
 6};
 7console.log("Object:", person);
 8console.log("Object Property (name):", person.name);
 9console.log("Object Property (age):", person.age);
10
11// Array: A list that holds multiple values
12let numbers = [10, 20, 30, 40];
13console.log("Array:", numbers);
14console.log("Array Element (index 0):", numbers[0]);
15
16// Function: A function object
17function greet(name) {
18  return "Hello, " + name + "!";
19}
20console.log("Function Output:", greet("Bob"));
21
22// Another way to define a function using arrow syntax
23let add = (a, b) => a + b;
24console.log("Arrow Function Output (3 + 5):", add(3, 5));

• 객체 유형:
  • Object: 여러 속성을 가진 데이터 구조체.
  • Array: 여러 값을 포함하는 목록.
  • Function: 함수 객체.

변수에 값 할당 및 재할당

let 또는 var로 선언된 변수는 재할당이 가능하지만, const로 선언된 변수는 한 번 선언하면 재할당이 불가능합니다.

1let score = 100;
2score = 150; // Correct
3
4const pi = 3.14;
5pi = 3.14159; // Error

변수 호이스팅

JavaScript에서는 변수 선언이 스코프의 최상단으로 '호이스팅' 되는 현상이 있습니다. var로 선언된 변수는 호이스팅되지만, let 또는 const를 선언 전에 사용하면 오류가 발생합니다.

1console.log(a); // undefined
2var a = 10;
3console.log(a); // 10

• 이 경우, var로 선언된 변수는 호이스팅되며 그 값이 출력됩니다.

1console.log(b); // ReferenceError
2let b = 20;

• let으로 선언된 변수는 호이스팅되지 않아 에러가 발생합니다.

변수의 적절한 사용

변수를 적절히 사용하려면 다음 사항을 고려하십시오.

• const를 사용하는 것을 선호하고, var 사용은 피하십시오.
• 변수 명명 규칙을 따르십시오.
  • userName 또는 totalPrice와 같은 camelCase를 사용하십시오.
  • data 또는 value와 같은 애매한 이름을 피하고, 읽기 편하도록 의미 있는 이름을 사용하십시오.
  • 변수 이름은 숫자로 시작할 수 없으므로 1variable과 같은 이름은 허용되지 않습니다.
• 전역 변수를 과도하게 사용하면 범위의 모호성이 발생하고 버그로 이어질 수 있으므로 가능한 한 사용을 피하십시오.

요약

• var: 함수 스코프를 가지는 기존 변수 선언 방식.
• let: 블록 스코프를 가지며 재할당이 가능한 변수.
• const: 블록 스코프를 가지며 재할당이 불가능한 변수(상수).
• 데이터 타입에 맞는 변수를 사용하고, 스코프를 신경 쓰는 것이 중요합니다.

JavaScript에서 이스케이프 문자란 무엇인가요?

이스케이프 문자는 일반 문자열 리터럴 내에서 특별한 의미를 가지는 문자를 표현하는 데 사용되는 방법입니다. JavaScript에서는 이스케이프 문자가 백슬래시 \로 시작하여 문자열에 특별한 효과를 주거나 제어 문자를 포함하도록 합니다. 이스케이프 문자는 문자열에 줄 바꿈, 탭, 따옴표 등 요소를 포함하는 데 유용합니다.

이스케이프 문자 사용 예제

아래는 이스케이프 문자를 활용한 샘플 코드들입니다.

큰따옴표와 작은따옴표 이스케이프 처리

이스케이프 문자를 사용하여 문자열 내에서 큰따옴표나 작은따옴표를 표현하세요.

1const singleQuote = 'It\'s a beautiful day!';
2console.log(singleQuote); // Output: It's a beautiful day!
3
4const doubleQuote = "He said, \"Hello there!\"";
5console.log(doubleQuote); // Output: He said, "Hello there!"

백슬래시 이스케이프 처리

문자열에 백슬래시를 포함하려면 \로 이스케이프 처리하세요.

1const path = "C:\\Program Files\\MyApp";
2console.log(path); // Output: C:\Program Files\MyApp

줄 바꿈 및 탭 이스케이프 처리

긴 문자열을 더 읽기 쉽게 만들기 위해 줄 바꿈 및 탭을 삽입할 수 있습니다.

1const multiline = "First line\nSecond line\nThird line";
2console.log(multiline);
3// Output:
4// First line
5// Second line
6// Third line
7
8const tabbed = "Column1\tColumn2\tColumn3";
9console.log(tabbed); // Output: Column1  Column2  Column3

유니코드 문자 이스케이프 처리

유니코드 이스케이프 시퀀스를 사용하면 특정 문자를 16진수 코드로 표현할 수 있습니다.

1const smiley = "\u263A";  // Copyright Mark
2console.log(smiley);

노트

이스케이프 문자의 과도한 사용은 가독성을 해칠 수 있습니다

이스케이프 문자를 과도하게 사용하면 코드의 가독성이 떨어질 수 있습니다. 특히 긴 문자열에서는 이스케이프 문자를 신중하게 사용하는 것이 중요합니다.

템플릿 리터럴 사용을 고려하세요

JavaScript에서는 백틱 을 사용하는 템플릿 리터럴을 통해 이스케이프 문자 없이 줄 바꿈이나 내장 표현식을 포함할 수 있습니다.

1const message = `This is a message
2that spans multiple lines`;
3console.log(message);
4// Output:
5// This is a message
6// that spans multiple lines

요약

이스케이프 문자는 문자열 내에서 특수 문자 또는 제어 문자를 표현하는 데 필수적입니다. 작은따옴표나 큰따옴표를 이스케이프 처리하고 줄 바꿈이나 탭을 추가하여 더욱 유연한 문자열을 만들 수 있습니다. 그러나 이스케이프 문자를 과도하게 사용하면 코드 가독성이 떨어질 수 있으므로 적절한 경우 템플릿 리터럴 사용을 고려하세요.

자바스크립트 버전

자바스크립트는 ECMAScript(ES)라고 하는 표준 사양을 가지고 있습니다. 자바스크립트는 이 표준을 기반으로 발전해 왔습니다. 다음은 주요 버전에 대한 간략한 설명입니다.

• ES3 (1999)

  널리 채택된 첫 번째 버전. 기본 문법과 기능이 구축되었습니다.

• ES5 (2009)

  strict mode가 도입되었고, Array.prototype.forEach, Object.keys 등의 새로운 기능이 추가되었습니다.

• ES6 / ES2015 (2015)

  JavaScript에 대한 주요 업데이트가 이루어졌습니다. let, const, arrow functions, classes, promises, modules 등 현대 JavaScript의 기초가 되는 많은 기능이 도입되었습니다.

• ES7 / ES2016 (2016)

  Array.prototype.includes와 지수 연산자 (**)가 추가되었습니다.

• ES8 / ES2017 (2017)

  async/await가 도입되어 비동기 프로세스를 더 간단하게 작성할 수 있게 되었습니다.

• ES9 / ES2018 (2018)

  비동기 반복자와 Rest/Spread Properties가 추가되었습니다.

• ES10 / ES2019 (2019)

  flatMap과 Object.fromEntries가 추가되었습니다.

• ES11 / ES2020 (2020)

  Optional Chaining (?.)과 Nullish Coalescing Operator (??)가 추가되어 코드를 더 간단하고 안전하게 작성할 수 있게 되었습니다.

• ES12 / ES2021 (2021)

  String.prototype.replaceAll 및 Promise.any 등이 추가되었습니다.

• ES13 / ES2022 (2022)

  Array.prototype.at 및 클래스 private 필드(#field) 등이 추가되었습니다.

• ES14 / ES2023 (2023)

  Array.prototype.toSorted 및 Symbol.prototype.description 등이 추가되었습니다.

• ES15 / ES2024 (2024)

  Promise 관리를 더 쉽게 할 수 있는 Promise.withResolvers 및 조정 가능한 ArrayBuffer 등이 추가되었습니다.

현재 JavaScript는 매년 업데이트되며 최신 버전에도 새로운 기능이 추가되고 있습니다.

위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.

YouTube Video