3619 단어
18 분
JavaScript 01 기초 문법
2024-09-02
JavaScript
JavaScript
/
01
/
기초 문법

이제부터 총 12개편의 게시물을 통해 JavaScript를 알아보겠습니다. 저는 모든 것을 상세히 알려드리지 않을 것 입니다. (예를 들어 변수를 초기화 하는 방법 등) 따라서 코딩을 아에 처음 접해보시는 분이라면 제가 작성할 코딩 기초를 먼저 보고오는 것을 추천드립니다. 자 지금부터 JavaScript 첫번째 강의를 해보겠습니다.

JavaScript 개요#

JavaScript(줄여서 JS)는 웹 페이지를 동적으로 만들어주는 데 사용되는 고급 프로그래밍 언어입니다. 1995년에 Netscape의 Brendan Eich가 처음 개발했으며, 원래는 웹 페이지의 보조 역할로 만들어졌습니다. 하지만 시간이 지나면서 웹 개발에 필수적인 기술로 자리 잡았고, 현재는 HTML, CSS와 함께 웹 개발의 3대 축 중 하나로 사용되고 있습니다. 하지만 JavaScript는 웹 개발 외에도 서버 측 개발, 게임 개발, 모바일 애플리케이션 개발 등 다양한 분야에서 사용됩니다.

JavaScript는 객체 기반 언어로, 프로토타입 기반의 상속 모델을 사용합니다. 이는 클래스를 명시적으로 선언하지 않고도 객체 간 상속이 이루어질 수 있다는 의미로, 개발자는 필요에 따라 동적으로 객체를 생성하고, 이들 사이의 관계를 설정할 수 있습니다. 전통적인 객체지향 언어들과 달리 JavaScript는 동적 타이핑을 사용한다. 즉, 변수는 선언 시 특정 데이터 타입에 고정되지 않으며, 필요에 따라 언제든지 타입이 변경될 수 있습니다. 이로 인해 유연한 코딩이 가능하지만, 잘못된 타입 처리를 할 경우 런타임 에러가 발생할 가능성도 높고 실제로도 그래서 악명이 높죠.

또한 JavaScript는 이벤트 기반 프로그래밍을 지원합니다. 웹 페이지에서 사용자가 클릭하거나 키보드를 입력하는 등의 상호작용이 발생할 때, 이를 감지하고 적절히 대응할 수 있는 이벤트 핸들러를 쉽게 설정할 수 있습니다. 이를 통해 웹 페이지는 사용자와 실시간으로 소통하고, 동적으로 업데이트되며 반응형 웹사이트가 가능해집니다. 이러한 동적인 처리 외에도 JavaScript는 비동기 작업을 효율적으로 처리하기 위한 비동기 처리 개념을 가지고 있습니다. 기본적으로 JavaScript는 싱글 스레드에서 동작하지만, setTimeout이나 Promise, async/await와 같은 기능을 통해 비동기적으로 코드를 실행할 수 있어, 네트워크 요청이나 파일 읽기 등 시간이 오래 걸리는 작업을 수행하는 동안 다른 작업이 중단되지 않도록 합니다.

JavaScript의 또 다른 중요한 특징은 DOM(Document Object Model) 조작입니다. 웹 페이지는 HTML 문서로 구성되며, JavaScript는 DOM을 통해 이 문서를 프로그래밍적으로 수정하거나 탐색할 수 있습니다. 이를 통해 버튼 클릭 시 페이지의 내용이 변경되거나, 특정 데이터를 추가로 불러와 화면에 표시하는 등 동적인 웹 애플리케이션을 구축할 수 있습니다.

현재 설명해 놓은건 전부 웹과 관련된 js를 설명하였고 학습 로드맵에서도 웹을 기준으로 계획이 짜여 있습니다. 다른 서버, 디스코드 봇 등의 분야는 이후에 다른 게시물로 찾아오겠습니다.

이후 JavaScript에 익숙해 지면 타입과 단점등을 개선한 TypeScript를 공부하시는 것을 추천합니다.

기초 문법#

1. 변수와 상수#

변수 (Variables)#

변수는 데이터를 저장하기 위한 공간입니다. JavaScript에서 변수를 선언할 때는 var, let, const 키워드를 사용할 수 있습니다.

  • var: 초기 JavaScript에서 변수를 선언하는 데 사용되었습니다. 하지만 범위(scope)와 호이스팅(hoisting) 문제로 인해 현재는 거의 사용되지 않습니다.
  • let: 블록 범위를 가지는 변수를 선언할 때 사용됩니다. 변수를 재할당할 수 있습니다.
  • const: 상수를 선언하는 데 사용됩니다. 한 번 값이 할당되면 변경할 수 없습니다.
let age = 25; // 'let'으로 선언된 변수는 값을 변경할 수 있습니다.
var name = "John"; // 'var'는 'let'과 유사하지만, 함수 범위입니다.
const PI = 3.14; // 'const'로 선언된 상수는 값을 변경할 수 없습니다.
NOTE

js언어로 개발을 하면 가장 많이 쓰는 변수는 let입니다.

호이스팅 (Hoisting)#

JavaScript에서는 변수 선언이 코드의 상단으로 끌어올려지는 현상을 호이스팅(hoisting)이라고 합니다. 하지만 실제 값 할당은 호이스팅되지 않으므로 선언 전에 변수를 사용하려 하면 undefined를 반환합니다.

console.log(a); // undefined
var a = 10;
IMPORTANT

만약 undefined가 반환되면 js로 개발하면서 가장 많이 보게될 오류중 하나인 TypeError: Cannot read properties of undefined를 보게 되실 것 입니다. 이 오류가 발생한다면 코드의 위치와 함수를 불러오는 위치 등을 잘 살펴보시기 바랍니다.

2. 데이터 타입#

JavaScript에는 여러 가지 데이터 타입이 있으며, 크게 원시 타입과 객체 타입으로 나눌 수 있습니다.

원시 타입 (Primitive Types)#

원시 타입은 변경 불가능한 값들입니다.

  • String: 문자열을 나타냅니다. 예를 들어 "Hello, World!"는 문자열입니다.
  • Number: 숫자를 나타냅니다. 정수와 소수를 포함합니다. 예: 42, 3.14
  • Boolean: 논리값으로 true 또는 false만 가집니다.
  • Null: 값이 없음을 나타내는 특수한 데이터 타입입니다.
  • Undefined: 변수가 선언되었지만 값이 할당되지 않은 상태를 나타냅니다.
  • Symbol: 고유하고 변경 불가능한 값을 나타냅니다. 주로 객체의 속성 이름으로 사용됩니다.

객체 타입 (Object Types)#

객체 타입은 여러 개의 값을 가질 수 있는 복합적인 데이터 타입입니다.

  • Object: 키-값 쌍으로 구성된 데이터 집합입니다. 예: { name: "John", age: 30 }
  • Array: 순서가 있는 데이터 집합입니다. 예: [1, 2, 3]
  • Function: 특정 작업을 수행하는 코드 블록입니다. 예: function() { return 1 + 1; }
// 원시 타입 예시
let str = "Hello";
let num = 42;
let isTrue = true;
let noValue = null;
let notAssigned;

// 객체 타입 예시
let person = { name: "John", age: 30 };
let numbers = [1, 2, 3, 4, 5];
NOTE

다른 많은 언어들은 변수를 선언할 때 타입을 명시하거나, 타입이 한 번 정해지면 변경할 수 없습니다. 하지만 자바스크립트는 동적 타이핑 언어로서, 변수를 선언할 때 타입을 명시하지 않으며, 같은 변수에 다양한 타입의 값을 할당할 수 있습니다. 이는 때때로 코드에서 예상치 못한 오류를 일으킬 수 있습니다. 이러한 문제를 해결하기 위해 자바스크립트에 정적 타입을 추가한 TypeScript가 개발되었습니다.

3. 연산자#

연산자는 값과 변수를 결합하거나 조작하는 데 사용됩니다. JavaScript에서는 여러 종류의 연산자가 있습니다.

산술 연산자 (Arithmetic Operators)#

산술 연산자는 수학적 연산을 수행합니다.

  • +: 더하기 연산을 수행합니다.
  • -: 빼기 연산을 수행합니다.
  • *: 곱하기 연산을 수행합니다.
  • /: 나누기 연산을 수행합니다.
  • %: 나머지 연산을 수행합니다.
let sum = 10 + 5; // 15
let difference = 10 - 5; // 5
let product = 10 * 5; // 50
let quotient = 10 / 5; // 2
let remainder = 10 % 3; // 1

비교 연산자 (Comparison Operators)#

비교 연산자는 두 값을 비교하여 true 또는 false를 반환합니다.

  • ==: 값이 같은지 비교합니다. 타입은 무시합니다.
  • ===: 값과 타입이 모두 같은지 비교합니다.
  • !=: 값이 다른지 비교합니다.
  • !==: 값과 타입이 모두 다른지 비교합니다.
  • >: 왼쪽 값이 오른쪽 값보다 큰지 비교합니다.
  • <: 왼쪽 값이 오른쪽 값보다 작은지 비교합니다.
  • >=: 왼쪽 값이 오른쪽 값보다 크거나 같은지 비교합니다.
  • <=: 왼쪽 값이 오른쪽 값보다 작거나 같은지 비교합니다.
let isEqual = 5 == '5'; // true (값만 비교)
let isStrictEqual = 5 === '5'; // false (값과 타입 모두 비교)

논리 연산자 (Logical Operators)#

논리 연산자는 주로 조건문에서 사용되며, 논리적 AND, OR, NOT 연산을 수행합니다.

  • &&: 논리 AND 연산. 두 피연산자가 모두 true일 때 true를 반환합니다.
  • ||: 논리 OR 연산. 두 피연산자 중 하나라도 true이면 true를 반환합니다.
  • !: 논리 NOT 연산. 피연산자의 논리값을 반대로 뒤집습니다.
let isAdult = age > 18 && age < 65; // 둘 다 true일 때만 true
let isChildOrSenior = age < 18 || age > 65; // 둘 중 하나가 true면 true
let isNotAdult = !isAdult; // true -> false, false -> true

대입 연산자 (Assignment Operators)#

대입 연산자는 변수에 값을 할당하는 데 사용됩니다.

  • =: 기본 대입 연산자. 변수에 값을 할당합니다.
  • +=: 변수에 값을 더하고 결과를 변수에 다시 할당합니다.
  • -=: 변수를 값만큼 빼고 결과를 변수에 다시 할당합니다.
  • *=: 변수를 값만큼 곱하고 결과를 변수에 다시 할당합니다.
  • /=: 변수를 값만큼 나누고 결과를 변수에 다시 할당합니다.
let x = 10;
x += 5; // x = x + 5; 결과는 15
x -= 2; // x = x - 2; 결과는 13

4. 조건문#

조건문은 주어진 조건에 따라 코드의 실행 흐름을 제어하는 데 사용됩니다. JavaScript에서 가장 일반적인 조건문은 if, else if, else, 그리고 switch 문입니다.

if 문#

if 문은 주어진 조건이 true일 때만 코드를 실행합니다.

let age = 20;

if (age >= 18) {
    console.log("You are an adult."); // age가 18 이상일 때 실행
}

if-else 문#

if-else 문은 조건이 true일 때 if 블록을, false일 때 else 블록을 실행합니다.

let age = 16;

if (age >= 18) {
    console.log("You are an adult.");
} else {
    console.log("You are not an adult."); // age가 18 미만일 때 실행
}

if-else if-else 문#

if-else if-else 문은 여러 조건을 순차적으로 검사하며, 처음으로 true인 조건의 블록을 실행합니다.

let score = 85;

if (score >= 90) {
    console.log("Grade: A");
} else if (score >= 80) {
    console.log("Grade: B"); // score가 80 이상 90 미만일 때 실행
} else {
    console.log("Grade: C or below");
}

switch 문#

switch 문은 하나의 값을 여러 경우(case)와 비교하여, 해당하는 경우의 코드를 실행합니다.

let day = 3;

switch (day) {
    case 1:
        console.log("Monday");
        break;
    case 2:
        console.log("Tuesday

");
        break;
    case 3:
        console.log("Wednesday"); // day가 3일 때 실행
        break;
    default:
        console.log("Unknown day");
}

5. 반복문#

반복문은 특정 코드 블록을 여러 번 실행하고자 할 때 사용됩니다. JavaScript에서 주요 반복문으로는 for, while, do-while이 있습니다.

for 문#

for 문은 고정된 횟수만큼 반복하고자 할 때 사용됩니다. 일반적으로 반복 횟수를 제어하기 위해 카운터 변수를 사용합니다.

for (let i = 0; i < 5; i++) {
    console.log("i is: " + i); // i가 0에서 4까지 증가하며 실행
}

while 문#

while 문은 조건이 true인 동안 코드 블록을 반복 실행합니다. 조건이 false가 되면 반복이 종료됩니다.

let count = 0;

while (count < 5) {
    console.log("count is: " + count); // count가 5 미만일 때 반복
    count++;
}

do-while 문#

do-while 문은 while 문과 유사하지만, 조건을 검사하기 전에 코드를 최소 한 번 실행합니다.

let count = 0;

do {
    console.log("count is: " + count); // 최소 한 번 실행
    count++;
} while (count < 5);

6. 함수#

함수는 특정 작업을 수행하는 코드 블록입니다. 함수는 반복적인 코드를 줄이고, 재사용성을 높이기 위해 사용됩니다. JavaScript에서는 함수 선언 방식과 표현식 방식으로 함수를 정의할 수 있습니다.

함수 선언 (Function Declaration)#

함수 선언은 function 키워드를 사용하여 함수를 정의하는 방식입니다. 함수 선언은 호이스팅되기 때문에, 함수가 정의되기 전에 호출할 수 있습니다.

function greet(name) {
    return "Hello, " + name;
}

console.log(greet("Alice")); // "Hello, Alice"

함수 표현식 (Function Expression)#

함수 표현식은 함수를 변수에 할당하는 방식입니다. 함수 표현식은 호이스팅되지 않기 때문에, 정의된 후에만 호출할 수 있습니다.

const greet = function(name) {
    return "Hello, " + name;
};

console.log(greet("Bob")); // "Hello, Bob"

화살표 함수 (Arrow Function)#

화살표 함수는 간결한 문법을 제공하는 함수 표현식의 한 형태입니다. 특히 콜백 함수나 간단한 함수를 정의할 때 유용합니다.

const greet = (name) => "Hello, " + name;

console.log(greet("Charlie")); // "Hello, Charlie"

매개변수와 반환값 (Parameters and Return Values)#

함수는 외부로부터 입력 값을 받아들일 수 있으며, 그 입력 값을 기반으로 작업을 수행한 후 결과를 반환할 수 있습니다.

function add(a, b) {
    return a + b;
}

let sum = add(3, 5); // 8

기본값 매개변수 (Default Parameters)#

기본값 매개변수를 사용하면, 함수 호출 시 특정 매개변수가 전달되지 않았을 때 기본값을 사용할 수 있습니다.

function greet(name = "Guest") {
    return "Hello, " + name;
}

console.log(greet()); // "Hello, Guest"
Git 명령어 모음
Python 학습 로드맵