자바스크립트 기초 문법: 변수, 데이터 타입, 연산자, 조건문

 

 

안녕하세요 오늘은 자바스크립트 기본 문법에 대해 알아보겠습니다.

 

 

1. 변수: 변수는 값을 저장하는 데 사용되는 식별자입니다.

 

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

 

예를 들어, 

 

 var x = 5;

 

와 같이 변수 x에 값 5를 할당할 수 있습니다.

 

function example() {
  var x = 1;
  let y = 2;
  const z = 3;

  if (true) {
    var x = 10; // 함수 스코프 내에서 중복 선언
    let y = 20; // 블록 스코프 내에서 새로운 변수 선언
    const z = 30; // 블록 스코프 내에서 새로운 상수 선언

    console.log(x, y, z); // 출력: 10, 20, 30
  }

   console.log(x, y, z); // 출력:10,2,3
}

example();

 

var:
-. 함수 스코프(Function Scope)를 가집니다. 즉, 함수 내에서 선언된 변수는 해당 함수 내에서만 유효합니다.
-. 중복 선언이 가능하며, 재할당도 가능합니다.
-. 호이스팅(Hoisting) 현상이 발생하여 변수 선언문을 해당 스코프의 맨 위로 끌어올립니다.

 

변수 호이스팅의 예시

 

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

 

자바스크립트에서 변수 선언은 해당 스코프의 맨 위로 "끌어올려지는" 현상인 호이스팅에 의해 처리됩니다. 따라서 변수 x가 선언되기 전에 사용되더라도 오류가 발생하지 않고 undefined를 출력합니다.

 

 

let:

-. 블록 스코프(Block Scope)를 가집니다. 즉, 중괄호({})로 감싸진 코드 블록 내에서만 유효합니다.
-. 중복 선언은 허용되지 않습니다. 같은 이름으로 변수를 다시 선언하면 에러가 발생합니다.
-. 재할당은 가능하지만, 같은 이름으로 다시 선언하여 사용하는 것은 허용되지 않습니다.

const:

-. 불변(Immutable)한 상수 값을 할당하는 경우에 사용됩니다.
-. 상수로 선언된 값은 재할당이 금지됩니다.
-. const로 선언된 객체나 배열은 내부의 속성이나 요소를 수정하는 것은 가능합니다.

하지만 변수 자체에 다른 값을 할당하는 것은 불가능합니다.

 

최근에는 let, const를 주로 씁니다.

 

 

 

 

 

2. 데이터 타입: 자바스크립트에는 여러 가지 데이터 타입이 있습니다.

 

주요한 데이터 타입으로는 숫자(Number),

문자열(String), 불리언(Boolean), 배열(Array), 객체(Object), 함수(Function) 등이 있습니다.

 

 

*데이터 타입과 관련하여 자바스크립트의 특이한 경우를 살펴 보겠습니다.

 

 

NaN(Not a Number):

 

console.log(typeof NaN); // 'number'
console.log(NaN === NaN); // false

 

NaN은 숫자가 아님을 나타내는 특수한 값입니다. 

자바스크립트에서 typeof 연산자로 NaN의 타입을 확인하면 'number'를 반환합니다. 

또한, NaN은 자기 자신과도 일치하지 않으므로 비교 연산자(===)를 사용하여도 결과는 false입니다.

 

 

 

객체 리터럴과 중괄호:

 

 var obj = {
   x: 1,
   y: 2,
   z: {
     a: 3,
     b: 4
   }
 };

 console.log(obj.x);       // 1
 console.log(obj['y']);    // 2
 console.log(obj.z.a);     // 3
 console.log(obj['z']['b']); // 4

 var prop = 'x';
 console.log(obj[prop]);   // 1

 var emptyObj = {};
 console.log(emptyObj.__proto__); // undefined

 

객체 리터럴을 사용하여 객체를 생성할 수 있습니다. 

객체의 속성에 접근할 때는 . 또는 []를 사용합니다. 

속성 이름이 변수에 저장되어 있는 경우에는 대괄호([]) 표기법을 사용해야 합니다. 

또한, 빈 객체({})의 __proto__ 속성은 undefined입니다.

 

 

 

 

3. 연산자: 연산자는 값을 조작하거나 비교하기 위해 사용됩니다.

 

산술 연산자(+, -, *, / 등),

할당 연산자(=, +=, -= 등), 비교 연산자(==, ===, != 등)와 논리 연산자(&&, ||, ! 등)가 일반적으로 사용됩니다.

 

 

*연산자에 대한 자바스크립트의 특이한 경우를 살펴 보겠습니다.

 

 

다음은 동등연산자와 일치연산자입니다. ( ==, === )

 

console.log(1 == '1');  // true
console.log(1 === '1'); // false

 

동등 연산자(==)는 값의 타입을 비교하지 않고 값을 비교합니다. 

따라서 숫자 1과 문자열 '1'을 비교하면 값이 같으므로 true를 반환합니다. 

반면에 일치 연산자(===)는 값과 타입을 모두 비교하므로 숫자와 문자열의 타입이 다르기 때문에 false를 반환합니다.

 

 

 

 

4. 조건문: 조건문은 주어진 조건에 따라 다른 코드 블록을 실행하는 제어 구조입니다.

 

 

주요한 조건문으로는 if문과 switch문이 있습니다.

if문은 주어진 조건식의 결과에 따라 코드 블록을 실행하거나 건너뛸 수 있으며,

switch문은 여러 개의 조건을 비교하고 해당하는 코드 블록을 실행합니다.

 

 

*조건문에 대한 자바스크립트의 특이한 경우를 살펴 보겠습니다.

 

 

if ('false') {
  console.log('Truthy'); // 출력됨
} else {
  console.log('Falsy');
}

 

자바스크립트에서는 Truthy(참으로 평가되는)와 Falsy(거짓으로 평가되는) 값으로 조건식을 평가합니다.

'false'라는 문자열은 비어 있지 않으므로 Truthy 값으로 간주되어 첫 번째 블록이 실행됩니다.

 

 

 

 

5. 반복문: 반복문은 특정한 코드 블록을 반복적으로 실행하는 제어 구조입니다.

 

 

자바스크립트에서는 주로 for문과 while문이 사용됩니다.

for문은 초기화식, 조건식, 증감식을 이용하여 반복 횟수를 제어하며,

while문은 주어진 조건식이 참인 동안 반복합니다.

 

 

*반복문에 대한 자바스크립트의 특이한 경우를 살펴 보겠습니다.

 

 

for...in 루프와 객체 속성 순서:

 

const obj1 = { a: 1, b: 2, c: 3 };

for (const prop in obj1) {
  console.log(prop); // 출력 순서: 'a', 'b', 'c'
}

const obj2 = { b: 2, c: 3, a: 1 };

for (const prop in obj2) {
  console.log(prop); // 출력 순서: 'b', 'c', 'a'
}

 

for...in 루프를 사용하여 객체의 속성을 열거할 때, 속성의 순서가 보장되지 않습니다. 

객체의 속성은 일반적으로 삽입된 순서대로 열거되지만, 일부 구현에서는 다른 순서로 열거될 수도 있습니다.

 

 

 

for...of 루프와 이터러블 객체:

 

const arr = [1, 2, 3];

for (const item of arr) {
  console.log(item); // 출력: 1, 2, 3
}

 

for...of 루프를 사용하여 배열과 같은 이터러블(iterable) 객체의 요소를 열거할 수 있습니다. 

이터러블 객체는 Symbol.iterator 메서드를 구현하여 자체 반복 동작을 정의합니다.

 

 

 

 

배열 forEach()와 비동기 처리:

 

const arr = [1, 2, 3];

arr.forEach(function(item) {
  setTimeout(function() {
    console.log(item);
  }, 1000);
});

// 출력 순서: 1, 2, 3 (비동기적으로 출력됨)

 

배열의 forEach() 메서드 내에서 비동기 작업(예: setTimeout)을 수행하는 경우, 

비동기 작업이 완료되지 않은 상태에서도 다음 요소로 넘어갑니다. 

따라서 위 예시에서는 모든 숫자가 동일한 시간 간격으로 출력되지 않고 각각 지연된 시간 후에 비동기적으로 출력됩니다.

 

 

 

 

다음에는 자바스크립트의 함수와 객체에 대해 좀더 자세히 알아보겠습니다.

 

감사합니다.