[Javascript] 자바스크립트 기초 개념 및 코딩 테스트 준비 | 변수, 스코프, 그리고 블록 스코프

안뇽하세요

이번 포스트에서는 자바스크립트의 기초 개념인

변수, 스코프, 그리고 블록 스코프에 대해 알아보겠습니다.

 

왜 하필 자바스크립트냐,,

그것은 제가 주로 사용하는 Google Apps script와 유사하기 때문입니다.

일석이조😝

 

1. 변수와 데이터 타입

자바스크립트에서는 변수를 선언할 때 `var`, `let`, `const` 키워드를 사용합니다. 변수는 숫자, 문자열, 불린, 객체, 배열, 함수 등 다양한 데이터 타입을 가질 수 있습니다.

var age = 25;
const name = "John";
let isStudent = true;
let person = { name: "Alice", age: 30 };
let numbers = [1, 2, 3];
function greet() { console.log("Hello!"); }

 

이때 각 변수에 대해서 더 알아보자면

 

자바스크립트에서 변수를 선언할 때 사용되는 키워드로는 var, let, const가 있습니다.

 

var: ES5까지 사용되던 키워드로, 함수 스코프를 갖습니다.

최근에는 let과 const가 블록 스코프를 갖는다는 점에서 대체되고 있습니다.

let: 블록 스코프를 갖는 변수를 선언할 때 사용됩니다. 변수의 값을 변경할 수 있습니다.

const: 블록 스코프를 갖는 상수를 선언할 때 사용됩니다. 한 번 할당된 값은 변경할 수 없습니다.

 

변수의 스코프:

스코프는 변수의 유효 범위를 나타냅니다.

함수 스코프: var로 선언한 변수는 함수 내에서만 유효합니다.

블록 스코프: let과 const로 선언한 변수는 해당 블록 내에서만 유효합니다.

if (true) {
  var functionScoped = "I'm a function-scoped variable";
  let blockScoped = "I'm a block-scoped variable";
}

console.log(functionScoped);  // 정상 동작
console.log(blockScoped);     // 에러 발생: blockScoped는 정의되지 않음

 

그럼 블록 스코프의 장점은 무엇이길래 var 대신 let이나 const를 지향해야 하는 것일까요?

 

변수 스코프는 변수가 어디에서 접근 가능한지를 결정하는 규칙입니다.

스코프는 크게 전역 스코프(Global Scope)와 지역 스코프(Local Scope)로 나눌 수 있습니다.

 

전역 스코프(Global Scope):

코드 어디에서든 접근할 수 있는 최상위 스코프를 의미합니다.

전역 스코프에서 선언된 변수는 어디서든 사용할 수 있습니다.

var globalVar = "I'm a global variable";

function exampleFunction() {
  console.log(globalVar);  // 전역 스코프에서 선언된 변수 사용 가능
}

 

지역 스코프(Local Scope):

지역 스코프는 특정한 블록 내에서 선언된 변수가 해당 블록 내에서만 유효한 스코프를 의미합니다.

함수 내에서 선언된 변수는 그 함수의 지역 스코프에 속하며, 블록 내에서 선언된 변수는 해당 블록의 지역 스코프에 속합니다.

function exampleFunction() {
  var localVar = "I'm a local variable";  // exampleFunction의 지역 스코프에 속함
  console.log(localVar);  // 지역 스코프에서 선언된 변수 사용 가능
}

console.log(localVar);  // 에러 발생: localVar는 지역 스코프 외부에서 접근 불가

 

블록 스코프(Block Scope):

블록 스코프는 let과 const로 선언된 변수가 해당 블록 내에서만 유효한 스코프를 갖는 것을 의미합니다.

if, for, while 등의 블록 내에서 선언된 변수는 블록 스코프를 갖습니다.

if (true) {
  var blockScopedVar = "I'm a block-scoped variable";  // 블록 스코프 외부에서도 접근 가능
  let blockScopedLet = "I'm a block-scoped let variable";  // 블록 스코프 내에서만 접근 가능
}

console.log(blockScopedVar);  // 정상 동작
console.log(blockScopedLet);  // 에러 발생: blockScopedLet은 블록 외부에서 접근 불가

 

변수 스코프를 이해하는 것은 변수의 생명주기 및 코드의 예측 가능성을 높이는 데 도움이 됩니다!

 

변수 호이스팅:

자바스크립트는 코드 실행 전에 변수 선언을 끌어올리는 동작을 합니다. 이를 호이스팅이라고 합니다.

var 변수는 선언과 초기화가 함께 이루어지지만, let과 const는 선언과 초기화가 분리됩니다. 따라서 블록 스코프 내에서 변수가 선언되기 전에 접근하면 에러가 발생합니다.

console.log(a);  // undefined
var a = 5;

console.log(b);  // ReferenceError: Cannot access 'b' before initialization
let b = 10;

 

 

2. 연산자

자바스크립트에서는 다양한 연산자를 활용해 산술 연산, 비교 연산, 논리 연산을 수행할 수 있습니다.

let x = 5;
let y = 10;
let sum = x + y;
let isEqual = x === y;
let isTrue = true && false;

3. 조건문과 반복문

`if`, `else if`, `else`를 사용하여 조건문을 작성하고, `for`, `while`, `do-while`을 사용하여 반복문을 구현할 수 있습니다.

let grade = 85;

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

for (let i = 0; i < 5; i++) {
  console.log(i);
}

4. 함수

함수는 코드를 모듈화하여 재사용 가능하게 만듭니다. `function` 키워드를 사용하여 함수를 선언할 수 있습니다.

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

let result = add(3, 4);

 

5. 마무리 하며

전역 변수를 최소화하고 블록 스코프를 사용하는 것은 코드의 가독성, 유지보수성, 충돌 방지, 메모리 관리, 보안 측면에서의 이점이 있습니다. 이로써 코드의 예측성을 높이고 안전하며 효율적인 코드를 작성할 수 있습니다.

쓰다보니 내용이 길어졌네요

그럼 앙뇽