자바스크립트 기본 정복: 변수부터 함수까지, 핵심 가이드

프로그래밍/Javascript

자바스크립트 기본 정복: 변수부터 함수까지, 핵심 가이드

shimdh 2025. 2. 10. 11:04

728x90

1. 변수와 상수: 데이터를 저장하는 공간

변수와 상수는 데이터를 저장하는 공간입니다. 변수는 값이 변할 수 있는 반면, 상수는 한 번 할당된 값을 변경할 수 없습니다. 자바스크립트에서 변수를 선언할 때는 var, let, const 키워드를 사용합니다.

1.1 변수 (Variables)

var: ES5 이전 방식, 함수 스코프(function scope)를 가집니다. 즉, 함수 내에서 선언된 var 변수는 해당 함수 내에서만 유효합니다.
```
function varExample() {
  var x = 10;
  if (true) {
    var x = 20; // 함수 스코프이기 때문에, 위의 x와 동일한 변수
    console.log(x); // 20 출력
  }
  console.log(x); // 20 출력
}
varExample();

function varExample2() {
  console.log(z); // undefined 출력 (hoisting)
  var z = 30;
  console.log(z); // 30 출력
}
varExample2();
```
함수 스코프: 함수 내에서 어디에 선언되든 함수 전체에서 접근 가능합니다.
호이스팅(Hoisting): var 변수는 선언 전에 사용해도 오류가 발생하지 않고 undefined로 초기화됩니다. 이는 자바스크립트 엔진이 코드 실행 전에 변수 선언을 함수의 최상단으로 끌어올리기 때문입니다.

let: ES6 도입, 블록 스코프(block scope)를 가집니다. 즉, if, for 등의 코드 블록 {} 내에서 선언된 let 변수는 해당 블록 내에서만 유효합니다. 이로 인해 코드의 가독성과 유지보수가 향상됩니다.

function letExample() {
  let y = 10;
  if (true) {
    let y = 20; // 블록 스코프이기 때문에, 위의 y와 다른 별개의 변수
    console.log(y); // 20 출력
  }
  console.log(y); // 10 출력
}
letExample();

function letExample2() {
  // console.log(a); // ReferenceError: Cannot access 'a' before initialization (let은 hoisting되지만, 초기화 전에는 접근 불가)
  let a = 40;
  console.log(a); // 40 출력
}
letExample2();

블록 스코프: 변수가 선언된 블록 {} 내에서만 유효합니다.
let은 호이스팅되지만, 선언 전에 사용하면 ReferenceError가 발생합니다.

const: ES6 도입, 블록 스코프를 가지며 값을 변경할 수 없는 상수를 선언합니다. const로 선언된 변수는 반드시 선언과 동시에 초기화해야 합니다.

const PI = 3.14159;
// PI = 3.14; // 오류: const로 선언된 변수는 재할당 불가
console.log(PI); // 3.14159 출력

const MY_OBJECT = { key: "value" };
// MY_OBJECT = { newKey: "newValue" }; // 오류: 객체 자체를 재할당하는 것은 불가능
MY_OBJECT.key = "newValue"; // 객체 내부의 속성을 변경하는 것은 가능
console.log(MY_OBJECT); // { key: "newValue" } 출력

const로 객체를 선언하더라도 객체 내부의 속성 값은 변경할 수 있습니다.

1.2 상수 (Constants)

상수는 const 키워드로 선언하며, 코드의 안정성과 가독성을 높이는 데 유용합니다.

코드 안정성: 코드 내에서 실수로 중요한 값을 변경하는 것을 방지합니다.
가독성 향상: 상수를 사용하면 코드의 의도를 명확하게 전달할 수 있습니다. (예: MAX_USERS와 같이 변수 이름을 대문자로 작성하여 상수임을 명확히 함)

const MAX_USERS = 100; // 최대 사용자 수
console.log(MAX_USERS); // 100 출력

// MAX_USERS = 200; // 오류: 상수에는 값을 재할당할 수 없음

const DAYS_IN_WEEK = 7; // 일주일의 날 수
const HOURS_IN_DAY = 24; // 하루의 시간 수

function calculateTotalHours(weeks) {
  return weeks * DAYS_IN_WEEK * HOURS_IN_DAY;
}

console.log(calculateTotalHours(2)); // 336 출력 (2주 동안의 총 시간)

2. 데이터 타입: 값의 종류

자바스크립트는 다양한 데이터 타입을 지원하며, 크게 원시 타입(primitive type) 과 객체(object) 로 나뉩니다.

2.1 원시(Primitive) 데이터 타입

원시 데이터 타입은 단일 값을 저장하며, 변경 불가능(immutable) 합니다. 즉, 원시 타입의 값은 생성 후 변경할 수 없습니다.

숫자(Number): 정수와 부동 소수점을 모두 포함합니다.

let age = 30; // 정수
let temperature = 25.5; // 부동 소수점
let negativeNumber = -10;
let largeNumber = 1e6; // 1000000 (지수 표기법)

문자열(String): 텍스트 데이터를 표현합니다. 작은따옴표('') 또는 큰따옴표("")로 묶습니다.
```
let name = "Alice";
let message = 'Hello, world!';
let emptyString = "";
let stringWithQuotes = 'He said, "Hello!"';
```
문자열은 변경 불가능합니다. 예를 들어, name[0] = 'B';와 같이 문자열의 특정 문자를 변경할 수 없습니다.

불리언(Boolean): true 또는 false 값을 가집니다.

let isAdult = true;
let isStudent = false;
let isGreater = 10 > 5; // true

undefined: 변수가 선언되었지만 값이 할당되지 않은 상태를 나타냅니다.

let address; // address는 undefined
console.log(address); // undefined 출력
let city;
console.log(city === undefined); // true

null: 의도적으로 값이 없음을 나타냅니다. undefined와 비슷하지만, null은 개발자가 명시적으로 값이 없음을 나타내기 위해 사용합니다.
```
let emptyValue = null; // 의도적으로 값이 없음을 나타냄
let userObject = null;
console.log(emptyValue === null); // true
```

심볼(Symbol): ES6에서 도입된 고유하고 변경 불가능한 값입니다. 주로 객체의 속성 키로 사용됩니다.

const mySymbol = Symbol("description");
console.log(mySymbol); // Symbol(description) 출력
const id = Symbol("id");
const user = {
  name: "John",
  [id]: 123, // 심볼을 객체의 키로 사용
};
console.log(user[id]); // 123

심볼은 항상 고유합니다. Symbol('desc') === Symbol('desc')는 false를 반환합니다.

2.2 객체(Object)

객체는 여러 개의 원시 데이터 또는 다른 객체를 묶어서 하나의 단위로 취급할 수 있는 복합 데이터 타입입니다. 객체는 키(key)와 값(value)의 쌍으로 구성됩니다.

객체 생성:

const person = {
  firstName: "John", // firstName은 키, "John"은 값
  lastName: "Doe",
  age: 30,
  isStudent: false,
  address: { // 객체 안에 객체를 포함할 수 있음
    street: "123 Main St",
    city: "Anytown",
  },
};

객체 접근: 객체의 속성에 접근할 때는 점 표기법(.) 또는 대괄호 표기법([])을 사용합니다.
```
console.log(person.firstName); // "John" 출력 (점 표기법)
console.log(person["lastName"]); // "Doe" 출력 (대괄호 표기법)
console.log(person.address.city); // "Anytown" 출력
console.log(person["address"]["street"]); // "123 Main St" 출력
```
대괄호 표기법은 키가 변수이거나 유효한 식별자가 아닌 경우에 유용합니다. 예를 들어, person["first-name"]과 같이 키에 하이픈(-)이 포함된 경우 대괄호 표기법을 사용해야 합니다.

객체 수정:

person.age = 31; // 값 수정
person.email = "john.doe@example.com"; // 새로운 속성 추가
delete person.isStudent; // 속성 삭제
console.log(person);

3. 연산자: 데이터를 다루는 도구

연산자는 데이터를 처리하고 조작하는 데 사용됩니다.

3.1 산술 연산자

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

+ (덧셈), - (뺄셈), * (곱셈), / (나눗셈), % (나머지)

let a = 10;
let b = 3;
console.log(a + b); // 13
console.log(a - b); // 7
console.log(a * b); // 30
console.log(a / b); // 3.3333333333333335
console.log(a % b); // 1 (나머지)

let c = 7;
let d = 4;
console.log(c % d); // 3
console.log(d ** 2); // 16 (거듭제곱, ES7 도입)

3.2 비교 연산자

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

== (동등, 값만 비교), === (일치, 값과 타입 모두 비교), != (부등), !== (불일치), > (큼), < (작음), >= (크거나 같음), <= (작거나 같음)

let x = 5;
let y = "5";
console.log(x == y); // true (값만 비교)
console.log(x === y); // false (값과 타입 모두 비교)
console.log(x != y); // false
console.log(x !== y); // true
console.log(x > 3); // true

let z = 10;
console.log(x < z); // true
console.log(z >= 10); // true

3.3 논리 연산자

논리 연산자는 논리적인 연산을 수행합니다.

&& (AND, 두 조건이 모두 참일 때 true), || (OR, 두 조건 중 하나 이상이 참일 때 true), ! (NOT, 조건을 반전)

let isRaining = true;
let hasUmbrella = false;

if (isRaining && hasUmbrella) {
  console.log("우산을 쓰고 외출하세요.");
} else if (isRaining && !hasUmbrella) {
  console.log("비를 맞을 수 있으니 주의하세요.");
}

console.log(!isRaining); // false (isRaining이 true이므로 !isRaining은 false)

let isWeekend = false;
let isHoliday = true;
if (isWeekend || isHoliday) {
  console.log("오늘은 휴일입니다.");
}

let age = 20;
let isAdult = age >= 18;
console.log(!isAdult); // false

3.4 할당 연산자

할당 연산자는 변수에 값을 할당합니다.

= (단순 할당), += (더해서 할당), -= (빼서 할당), *= (곱해서 할당), /= (나눠서 할당)

let num = 10;
num += 5; // num = num + 5와 동일, num은 15가 됨
console.log(num); // 15

let price = 50;
price *= 2; // price = price * 2와 동일, price는 100이 됨
console.log(price); // 100

let count = 20;
count /= 4; // count = count / 4와 동일, count는 5가 됨
console.log(count); // 5

3.5 기타 연산자

문자열 연결 연산자 (+): 문자열을 연결합니다.

let str1 = "Hello";
let str2 = "World";
console.log(str1 + " " + str2); // "Hello World" 출력

let firstName = "John";
let lastName = "Doe";
let fullName = firstName + " " + lastName;
console.log(fullName); // "John Doe" 출력

삼항 연산자 (? :): 조건에 따라 값을 선택합니다.

let age = 20;
let message = age >= 18 ? "성인입니다." : "미성년자입니다.";
console.log(message); // "성인입니다." 출력

let score = 75;
let grade = score >= 90 ? "A" : score >= 80 ? "B" : "C";
console.log(grade); // "C"

age >= 18이 true이면 "성인입니다."가, false이면 "미성년자입니다."가 message에 할당됩니다.

typeof 연산자: 피연산자의 데이터 타입을 문자열로 반환합니다.

console.log(typeof 42); // "number"
console.log(typeof "hello"); // "string"
console.log(typeof true); // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof null); // "object" (null은 원시 타입이지만, 역사적인 이유로 object를 반환함)
console.log(typeof {}); // "object"
console.log(typeof function(){}); // "function"

let num = 10;
let str = "20";
console.log(typeof num); // "number"
console.log(typeof (num + str)); // "string" (숫자와 문자열을 더하면 문자열 연결이 됨)

4. 제어문: 코드의 흐름을 제어

제어문은 프로그램의 실행 흐름을 제어합니다.

4.1 조건문

조건문은 특정 조건에 따라 코드를 실행하거나 건너뜁니다.

if 문: 조건이 참일 때 코드 블록을 실행합니다.

let score = 85;
if (score >= 90) {
  console.log("A");
} else if (score >= 80) {
  console.log("B");
} else {
  console.log("C");
}

let temperature = 28;
if (temperature > 30) {
  console.log("매우 더움");
} else if (temperature > 25) {
  console.log("더움");
} else {
  console.log("적당함");
}

switch 문: 여러 조건 중 하나를 선택하여 코드를 실행합니다.

let day = "Monday";
switch (day) {
  case "Monday":
    console.log("월요일");
    break;
  case "Tuesday":
    console.log("화요일");
    break;
  default:
    console.log("다른 요일");
}

let fruit = "apple";
switch (fruit) {
  case "apple":
  case "banana":
    console.log("과일입니다.");
    break;
  case "carrot":
    console.log("채소입니다.");
    break;
  default:
    console.log("알 수 없습니다.");
}

break 문을 사용하지 않으면, 해당 case의 코드를 실행한 후 다음 case의 코드도 연달아 실행됩니다.

4.2 반복문

반복문은 특정 코드 블록을 여러 번 반복하여 실행합니다.

for 문: 정해진 횟수만큼 반복합니다.

for (let i = 0; i < 5; i++) {
  console.log(i); // 0, 1, 2, 3, 4 출력
}

for (let j = 1; j <= 3; j++) {
  console.log("Outer loop:", j);
  for (let k = 1; k <= 2; k++) {
    console.log("  Inner loop:", k);
  }
}

while 문: 조건이 참인 동안 반복합니다.

let count = 0;
while (count < 3) {
  console.log(count); // 0, 1, 2 출력
  count++;
}

let num = 5;
while (num > 0) {
  console.log("Countdown:", num);
  num--;
}

do...while 문: 코드 블록을 먼저 실행한 후 조건을 검사하여 반복 여부를 결정합니다. 즉, 코드 블록이 최소 한 번은 실행됩니다.

let i = 5;
do {
  console.log(i); // 5 출력
  i++;
} while (i < 5);

let input;
do {
  input = prompt("Enter a number greater than 10:");
} while (input <= 10);
console.log("You entered:", input);

5. 함수: 코드의 재사용

함수는 특정 작업을 수행하는 코드 블록을 묶어 재사용 가능하게 만든 것입니다.

5.1 함수 정의

함수는 function 키워드로 정의합니다.

함수 선언식:

function add(a, b) { // a와 b는 매개변수(parameter)
  return a + b;
}

function greet(name) {
  console.log("Hello, " + name + "!");
}

함수 표현식:

const multiply = function(x, y) {
  return x * y;
};

const square = function(num) {
  return num * num;
};

화살표 함수:
```
const subtract = (x, y) => x - y;

const cube = (num) => num * num * num;

const isEven = (num) => num % 2 === 0;
```
화살표 함수는 간결한 문법을 제공하며, 특히 콜백 함수로 사용할 때 유용합니다.

5.2 함수 호출

함수를 정의한 후에는 함수 이름과 괄호 ()를 사용하여 호출합니다.

let sum = add(3, 5); // 3과 5는 인자(argument)
console.log(sum); // 8 출력

greet("Alice"); // "Hello, Alice!" 출력

let product = multiply(4, 6);
console.log(product); // 24 출력

5.3 매개변수와 인자

매개변수(Parameter): 함수를 정의할 때 사용되는 변수입니다.
인자(Argument): 함수를 호출할 때 전달하는 값입니다.

5.4 기본 매개변수

ES6부터는 함수 매개변수에 기본값을 설정할 수 있습니다.

function greet(name = "Guest") {
  console.log("Hello, " + name + "!");
}

greet(); // "Hello, Guest!" 출력 (인자가 전달되지 않았으므로 기본값 사용)
greet("Alice"); // "Hello, Alice!" 출력

function power(base, exponent = 2) {
  return base ** exponent;
}

console.log(power(3)); // 9 (3의 제곱)
console.log(power(2, 3)); // 8 (2의 세제곱)

5.5 반환값

함수는 return 문을 사용하여 값을 반환할 수 있습니다. return 문이 없는 함수는 undefined를 반환합니다.

function noReturn() {
  console.log("This function does not return a value.");
}

let result = noReturn();
console.log(result); // undefined 출력

function getMessage() {
  return "Hello from a function!";
}

let message = getMessage();
console.log(message); // "Hello from a function!" 출력

5.6 고차 함수 (Higher-Order Functions)

고차 함수는 다른 함수를 인자로 받거나 함수를 반환하는 함수입니다.

function operate(func, a, b) { // operate 함수는 func 함수를 인자로 받음
  return func(a, b);
}

function add(x, y) {
  return x + y;
}

let result = operate(add, 5, 3); // operate 함수에 add 함수를 전달
console.log(result); // 8 출력

function multiplyBy(factor) {
  return function(number) {
    return number * factor;
  };
}

const double = multiplyBy(2);
console.log(double(5)); // 10

const triple = multiplyBy(3);
console.log(triple(4)); // 12

결론

이 가이드에서는 자바스크립트의 기본 문법인 변수와 상수, 데이터 타입, 연산자, 제어문, 함수에 대해 자세히 알아보았습니다. 이러한 기본 개념을 숙지하면 더욱 복잡한 자바스크립트 코드를 이해하고 작성하는 데 큰 도움이 될 것입니다. 꾸준한 연습과 다양한 예제를 통해 자바스크립트 실력을 향상시키세요!

728x90

'프로그래밍 > Javascript' 카테고리의 다른 글

DOM (Document Object Model): 웹 페이지의 구조와 상호작용을 위한 모든 것 (0)	2025.02.11
자바스크립트 배열 정복: 개념부터 다차원 배열, 유용한 메소드까지 총정리! (0)	2025.02.10
자바스크립트 함수 완전 정복: 표현식, 클로저, 콜백까지 파헤치기 (0)	2025.02.10
자바스크립트 객체의 모든 것: 기초부터 활용까지 (0)	2025.02.10
자바스크립트: 웹 세상을 움직이는 마법의 언어 (0)	2025.02.10

현재글자바스크립트 기본 정복: 변수부터 함수까지, 핵심 가이드

shimdh 님의 블로그

shimdh 님의 블로그 입니다.

250x250

HTTP, udp, auto_hotkey, jquery, intermediate_nest.js, ASP, c++, advanced_nest.js, intro_typescript, node.js, javascript, intro_nest.js, ASP.NET, sql_server, sql, tcp, python, intermediate_typescript,

Today :
Yesterday :

shimdh 님의 블로그