[JavaScript] 변수, 타입, 연산자, 제어문, 예외처리, 함수

[ 기본 문법 ]

• 문장 끝에 세미콜론(;) 권장
• 주석 : // (한줄), /* */ (여러 줄)

 

[ 변수 ]

1. 변수 선언

var a = 10;   // 함수 스코프, 재선언 가능 (비권장)
let b = 20;   // 블록 스코프, 재선언 불가 (권장)
const c = 30; // 블록 스코프, 재선언·재할당 불가

구분	var	let	const
재선언	✅	❌	❌
재할당	✅	✅	❌
스코프	함수	블록	블록let 과 const 권장

• let 과 const 사용 권장

⚠️ 변수 선언 없이 선언한다면?
- 함수 내부에서도 전역변수가 됨.

function method() {
  var a = 10;
  b = 20; // 전역변수!
}
console.log(b); // 20
console.log(a); // ReferenceError​

2.스코프 (Scope)

• 변수를 사용할 수 있는 유효 범위

1) 함수 스코프 (var)

• var는 함수 단위로 스코프가 결정
• if, for 같은 블록 { } 안에서 선언해도 블록 밖에서 접근 가능

function test() {
  if (true) {
    var x = 10;
  }
  console.log(x); // 10 (블록 밖에서도 접근 가능)
}

test();
console.log(x); // ReferenceError (함수 밖은 불가)

 

2)블록 스코프 (let, const)

• let과 const는 블록 { } 단위로 스코프가 결정
• 선언한 블록 밖에서는 접근 불가

if (true) {
  let y = 20;
  const z = 30;
}
console.log(y); // ReferenceError
console.log(z); // ReferenceError

 

[ 데이터 타입 ]

1. 기본 타입

• Number : 정수/실수 구분 없음. 특수값 Infinity, NaN 존재 → isFinite(), isNaN()으로 확인
• String : " " 또는 ' ' 사용. 문자/문자열 구분 없음
• Boolean : 0, "", null, undefined, NaN → false, 나머지 → true
• undefined : 변수 선언 후 값 미할당 시 초기값
• null : 값이 없음을 명시적으로 할당

 

2. 객체 타입

• Object → { }
• Array → [ ]
• Function → 함수도 객체

타입 확인은 typeof(), 숫자 변환은 parseInt() / parseFloat()

 

[ 연산자와 주의사항]

• JavaScript의 연산자는 다른 언어와 대부분 동일하지만, 몇 가지 주의할 점이 있음

구분	연산자
비교	== != === !== < > <= >=
산술	+ - * / % ++ --
논리	&& || !
비트	& | ^ ~ << >> >>>
대입	= += -= *= /= %=
기타	? : . , ; ( ) [ ] { }

1. ===와 !== 는 타입도 비교하는 연산자

10 == '10';  // true  (값만 비교)
10 === '10'; // false (값 + 타입 비교) ← 권장

 

2. &&와 || 는 결과가 true/false가 아니다

• 왼쪽 항 또는 오른쪽 항의 값 자체가 반환된다.

 

// &&: false로 판단되는 첫 번째 항 반환 (모두 true면 마지막 항)
10 && true && 0 && false // → 0
10 && true && 128 && 11  // → 11

// ||: true로 판단되는 첫 번째 항 반환 (모두 false면 마지막 항)
false || 0 || "" || "hi" // → "hi"

⚠️ false로 판별되는 값: false, null, undefined, "", 0, NaN

 

3. 삼항 연산자 (조건 연산자)

• 조건이 true면 값1, false면 값2를 반환

조건식 ? 값1 : 값2

// 예시
const result = age >= 18 ? "성인" : "미성년자";

 

[ 제어문]

1. 조건문

구분	문법	설명
if문	if(조건){ }	조건이 true일 때 실행
if-else문	if(조건){ } else { }	조건 true / false에 따라 실행
else if문	if(조건){ } else if(조건){ }	여러 조건을 순차적으로 검사
삼항 연산자	조건 ? 값1 : 값2	조건 true → 값1, false → 값2
switch문	switch(값){ case 값: break; }	여러 값을 비교하여 실행

// switch에 조건식 사용 가능 (Java와 차이점)
switch(true) {
  case a > 2:
    console.log("2보다 큼");
    break;
  case a == 2:
    console.log("2");
    break;
  default:
    console.log("그 외");
}

2. 반복문

반복문	문법	설명
for문	for(초기값; 조건; 증감){ }	정해진 횟수 반복
for/in문	for(변수 in 객체){ }	객체나 배열 순회 반복
while문	while(조건){ }	조건이 true 동안 반복
do while문	do{ } while(조건)	최소 1번 실행 후 반복

const arr = ["a", "b", "c"];

for (let i in arr) {
  console.log(i); // 0 1 2 (인덱스)
}

for (let v of arr) {
  console.log(v); // a b c (값)
}

 

[ 예외 처리 ]

try {
  console.log(a);
} catch(error) {
  console.error(error.message);
  console.error(error.name);
} finally {
  console.info("항상 실행");
}

// 예외 발생
throw new Error("예외 메시지");
throw "문자열도 던질 수 있음";

 

[ 함수 ]

1. 함수 정의

// 1. 함수 선언
function add(x, y) { return x + y; }

// 2. 함수 리터럴 (이벤트 핸들러 등에 주로 사용)
const add = function(x, y) { return x + y; }

// 3. Function 생성자
const add = new Function("x", "y", "return x + y");

⚠️ 재정의?
- JavaScript, python, R 은 타입을 지정하는 키워드가 없기 때문에 함수 재정의 불가

 

2. 함수 호출

// 매개변수보다 인자 수가 부족하면 나머지는 undefined
// 기본값 설정 가능 (Java는 불가, JS/Python은 가능)
const someFunc = function(a=0, b=0, c=0) {
  console.log(`${a} ${b} ${c}`);
}

someFunc(1, 2);       // 1 2 0
someFunc(a=10, c=30); // 10 30 0

템플릿 리터럴 방식
- 백틱(`)으로 감싸고 ${변수}로 문자열 안에 변수 삽입 가능 

let name = "Tom";
let age = 20;

//기존방식
let text = "이름: " + name + ", 나이: " + age;

//템플릿 리터럴 방식
let text = `이름: ${name}, 나이: ${age}`;​

3. arguments 객체

const add = function() {
  let sum = 0;
  for(let idx in arguments) {
    sum += arguments[idx];
  }
  return sum;
}
add(10, 20, 30, 40); // 100

 

[ 렉시컬(Lexical) ]

1) 렉시컬(Lexical)

• 코드가 어디에 작성되어 있는지를 기준으로 동작이 결정되는 것

2) 렉시컬 스코프 (Lexical Scope)

• 변수의 접근 범위가 함수가 선언된 위치에 의해 결정되는 것

var data = 10;

function print() {
  console.log(data);
}

function test() {
  var data = 20;
  print();
}

test(); //10

Global
 ├ data = 10
 ├ print()
 └ test()

→ print()는 Global에서 선언된 함수이므로 test() 안에서 호출되더라도 test의 data가 아니라 global의 data를 사용

 

var data = 10;

function outer() {
  var data = 20;

  function inner() {
    console.log(data);
  }

  inner();
}

outer(); //20

Global
 └ outer
     └ inner

→ inner 함수는 outer 안에서 선언됐기 때문에 outer의 data를 사용

 

[ 호이스팅(Hoisting) ]

• 변수나 함수 선언이 코드의 최상단으로 끌어올려진 것처럼 동작하는 JavaScript의 동작 방식
• 실제로 코드가 이동하는 것은 아니고 자바스크립트 엔진이 실행 전에 선언을 먼저 처리

1. 변수 호이스팅 

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

var a; 선언(var a) //→ 먼저 처리
console.log(a);
a = 10; //값 할당(a = 10) → 나중 실행

2. let / const 호이스팅

console.log(a); // ReferenceError
let a = 10;

→ TDZ (Temporal Dead Zone) 때문

 

1) TDZ (Temporal Dead Zone)란

• 변수가 선언되기 전까지 접근할 수 없는 구간
• 변수는 이미 스코프에 존재하지만 초기화되기 전까지 접근할 수 없음

// 실행 컨텍스트 생성 단계
let a; // 스코프에 등록되지만 초기화 안됨

// TDZ 구간
console.log(a); // 접근 시 에러

// 초기화
a = 10;

 

3. 함수 호이스팅

1) 함수 선언문 

hello(); // hello

function hello() {
  console.log("hello");
}

 

2) 함수 표현식 

hello(); // TypeError

var hello = function () {
  console.log("hello");
};

 

[ 클로저 (Closure) ]

• 내부 함수를 반환값으로 사용하는 패턴.
• 각 호출마다 독립된 변수 공간을 가진 인스턴스 반환

function outer() {
  var x = 0;
  return function() { return ++x; }
}

const f = outer();
const g = outer();

f(); // 1
f(); // 2
g(); // 1 (f와 독립적)