기록

조건문 (Conditional Statements)

조건문은 특정 조건에 따라 코드 블록을 실행하거나 건너뛰는 방식으로 동작한다.

if, else if, else 

let x = 10;

if (x > 5) {
    console.log("x는 5보다 크다.");
} else if (x === 5) {
    console.log("x는 5이다.");
} else {
    console.log("x는 5보다 작다.");
}

switch

하나의 변수를 다양한 값과 비교하여 코드 블록을 실행한다.

let day = 3;
let dayName;

switch (day) {
    case 0:
        dayName = 'Sunday';
        break;
    case 1:
        dayName = 'Monday';
        break;
    case 2:
        dayName = 'Tuesday';
        break;
    case 3:
        dayName = 'Wednesday';
        break;
    case 4:
        dayName = 'Thursday';
        break;
    case 5:
        dayName = 'Friday';
        break;
    case 6:
        dayName = 'Saturday';
        break;
    default:
        dayName = 'Invalid day';
}

console.log(dayName); // "Wednesday"

break는 해당 조건에 해당하면 더 이상 다음 조건을 확인하지 않고 조건문을 종료시키는 기능을 한다.

case는 순서대로 모든 케이스를 확인하기 때문에 break가 없다면 swich의 모든 조건을 확인한다.

반복문 (Loops)

반복문은 특정 코드 블록을 여러 번 실행하는 데 사용된다. 

for

일반적인 반복문이다.

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

while

조건이 참인 동안 코드 블록을 반복한다.

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

do-while

코드 블록을 최소 한 번 실행하고, 그 후 조건이 참인 동안 반복한다.

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

break

break는 반복문을 종료시키는 기능을 한다.

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

continue

continue 문은 현재 반복을 종료하고 다음 반복으로 넘어간다.

for (let i = 0; i < 10; i++) {
    if (i === 5) {
        continue;
    }
    console.log(i); // 0, 1, 2, 3, 4, 6, 7, 8, 9
}

기본 데이터 타입

숫자(Number) 

정수 및 부동 소수점 숫자를 포함한다.

let integer = 42;
let float = 3.14;

숫자 조작

산술 연산자를 사용해 숫자를 조작할 수 있다.

let sum = 10 + 5; // 15
let difference = 10 - 5; // 5
let product = 10 * 5; // 50
let quotient = 10 / 5; // 2
let remainder = 10 % 5; // 0

문자열(String)

텍스트 데이터를 나타낸다.

let singleQuoteString = 'Hello, world!';
let doubleQuoteString = "Hello, world!";
let templateString = `Hello, ${name}!`;

문자열 조작

연결 연산자를 사용해 문자열을 조작할 수 있다.

let greeting = 'Hello' + ' ' + 'world'; // "Hello world"

템플릿 리터럴

let name = 'Alice';
let message = `Hello, ${name}!`; // "Hello, Alice!"

불리언(Boolean)

참 또는 거짓 값을 가진다.

let isTrue = true;
let isFalse = false;

값과 조건 판단

let isAdult = true;
if (isAdult) {
    console.log('You are an adult.');
} else {
    console.log('You are not an adult.');
}

null

값이 비어 있음을 나타낸다.

let emptyValue = null;

undefiend

값이 정의되지 않았음을 나타낸다.

let undefinedValue;

null과 undefined의 차이

null : 명시적으로 값이 없음을 나타내기 위해 사용된다.

undefined : 변수가 선언되었지만 값이 할당되지 않았을 때의 초기 상태를 나타낸다.

let a = null;
let b;

console.log(a); // null
console.log(b); // undefined

객체(Object)

키-밸류 쌍의 집합, 배열도 객체의 일종이다.

let person = {
    name: 'John',
    age: 30
};
let array = [1, 2, 3];

객체와 배열의 초기화 및 조작

객체 초기화

let car = {
    make: 'Toyota',
    model: 'Camry',
    year: 2020
};

배열 초기화

let numbers = [1, 2, 3, 4, 5];

객체 속성 접근 및 조작

console.log(car.make); // "Toyota"
car.year = 2021;
console.log(car.year); // 2021

데이터 타입 확인

typeof 연산자를 사용하여 데이터 타입을 확인할 수 있다.

console.log(typeof 42); // "number"
console.log(typeof 'Hello'); // "string"
console.log(typeof true); // "boolean"
console.log(typeof null); // "object" (자바스크립트의 역사적 이유로)
console.log(typeof undefined); // "undefined"
console.log(typeof {name: 'John'}); // "object"

데이터 타입 간의 변환

자바스크립트에서는 데이터 타입 간의 변환이 자주 발생한다. 이를 명시적 변환과 암시적 변환으로 나눌 수 있다.

명시적 변환(Explicit Conversion)

숫자로 변환 

Number(), parseInt(), parseFloat()

let str = "123";
let num = Number(str); // 123
let int = parseInt("123.45"); // 123
let float = parseFloat("123.45"); // 123.45

문자열로 변환

String()

let num = 123;
let str = String(num); // "123"

불리언으로 변환

Boolean()

let str = "";
let bool = Boolean(str); // false

암시적 변환(Implicit Conversion)

숫자와 문자열의 연산에서 발생

let result = 123 + "456"; // "123456" (숫자가 문자열로 변환됨)

클로저

클로저는 자바스크립트의 중요한 개념 중 하나로 함수와 그 함수가 선언된 렉시컬 환경(Lexical Environment)의 조합을 의미한다. 클로저는 함수가 선언될 때 그 함수의 스코프에 있는 변수들을 기억하고, 함수가 호출될 때에도 그 변수를 참조할 수 있게 한다.

렉시컬 환경(Lexical Environment)

자바스크립트의 실행 컨텍스트에서 변수와 함수 선언의 스코프를 관리하는 내부 구조를 의미한다. 렉시컬 환경은 코드가 작성된 위치에 따라 스코프를 결정하는데, 이는 코드가 실행될 때가 아니라 작성될 때의 구조에 따라 스코프가 결정된다는 점이 중요하다.

렉시컬 환경의 구성 요소

렉시컬 환경은 두 가지 구성 요소로 이루어져 있다.

1. 환경 레코드(Environment Record)

현재 스코프에서 정의된 모든 변수와 함수 선언을 저장한다.

2. 외부 렉시컬 환경 참조(Outer Lexical Environment Reference)

외부 스코프에 대한 참조를 가진다. 이는 중첩된 함수에 내부 함수가 외부 함수의 변수에 접근할 수 있게 한다.

렉시컬 환경의 동작

function outerFunction() {
  let outerVariable = "I am an outer variable";

  function innerFunction() {
    let innerVariable = "I am an inner variable";
    console.log(outerVariable); // "I am an outer variable"
    console.log(innerVariable); // "I am an inner variable"
  }

  return innerFunction;
}

const closureFunction = outerFunction();
closureFunction();

outerFunction 실행 시

환경 레코드 : { outerVariable: "I am an outer variable" }

외부 렉시컬 환경 참조 : 전역 환경

innerFunction 실행 시

환경 레코드 : { innerVariable : "I am an inner variable" }

외부 렉시컬 환경 참조 : outerFunction의 렉시컬 환경

렉시컬 환경의 예제

let globalVariable = "I am a global variable";

function exampleFunction() {
  let localVariable = "I am a local variable";

  function innerFunction() {
    console.log(globalVariable); // "I am a global variable"
    console.log(localVariable); // "I am a local variable"
  }

  innerFunction();
}

exampleFunction();

전역 렉시컬 환경

환경 레코드 : { globalVariable : "I am a global variable" }

외부 렉시컬 환경 참조 : 없음

exampleFunction 실행 시 

환경 레코드 : { localVariable : "I am a local variable" }

외부 렉시컬 환경 참조 : 전역 환경

innerFunction 실행 시 

환경 레코드 : 비어 있음 (현재 함수에서 변수를 선언하지 않음)

외부 렉시컬 환경 참조 : exampleFunction의 렉시컬 환경

렉시컬 환경은 자바스크립트의 변수와 함수 스코프를 관리하는 내부 구조로 코드가 작성된 위치에 따라 스코프가 결정된다. 렉시컬 환경은 환경 레코드와 외부 렉시컬 환경 참조로 구성되어 있으며 이를 통해 함수가 선언된 위치의 변수에 접근할 수 있다. 클로저는 이러한 렉시컬 환경을 활용하여 함수가 실행된 이후에도 외부 변수에 접근할 수 있게 하는 개념이다.

클로저의 동작 원리

클로저는 함수가 정의된 시점의 외부 스코프의 변수에 접근할 수 있는 기능을 제공하는 함수이다. 

즉, 클로저는 함수가 생성될 때 외부 환경의 변수를 캡처하여 함수가 실행될 때에도 그 변수에 접근할 수 있게 한다.

자바스크립트에서 함수는 선언될 때마다 자신이 선언된 환경을 기억한다. 이 환경은 함수가 생성된 시점의 스코프와 변수를 포함하며 클로저는 함수가 실행된 이후에도 해당 환경을 유지하므로, 함수가 반환된 이후에도 그 환경에 접근할 수 있다.

function outerFunction() {
  let outerVariable = "I am an outer variable";

  function innerFunction() {
    console.log(outerVariable); // "I am an outer variable"
  }

  return innerFunction;
}

const closureFunction = outerFunction();
closureFunction(); // "I am an outer variable"

innerFunction은 outerFunction 내부에서 선언되었으며 outerFunction의 스코프에 접근할 수 있다. outerFunction이 반환된 이후에도 innerFunction은 outerVariable에 접근할 수 있으며 이 경우 innerFunction은 클로저를 형성한다.

클로저의 주요 특징

함수가 생성될 때의 스코프를 기억

함수가 정의된 위치의 외부 변수를 기억하고, 함수가 호출될 때 해당 변수에 접근할 수 있다.

은닉화(Encapsulation)

클로저를 사용하여 함수 외부에서 접근할 수 없는 프라이빗 변수를 만들 수 있다.

고차 함수

클로저는 함수를 반환하거나 함수의 인수로 함수를 받을 수 있는 '고차 함수'와 함께 자주 사용된다.

프라이빗 변수(Private Variable)

변수를 캡슐화하여 외부에서 변수에 직접 접근할 수 없도록 만드는 패턴이다.

예제 1)

function createCounter() {
  let count = 0;

  return {
    increment: function() {
      count++;
      console.log(count);
    },
    decrement: function() {
      count--;
      console.log(count);
    },
    getCount: function() {
      return count;
    }
  };
}

const counter = createCounter();
counter.increment(); // 1
counter.increment(); // 2
counter.decrement(); // 1
console.log(counter.getCount()); // 1

count 변수는 createCounter 함수 내에 선언되어 있으며, createCounter 함수 외부에서도 직접 접근할 수 없으며, increment, decrement, getCount 메서드만이 count 변수에 접근할 수 있다.

예제 2)

function factory_game(title) {
  return
   {
   
    get_title : function () {
      return title;
    },
    
    set_title : function(_title) {
      title = _title 
    }
  }
}

factorty_game 함수는 내부에 get_title, set_title 두 개의 내부 함수를 가지고 있다.

외부함수의 인수 title은 함수 안에서 지역변수로 사용되며 첫 번째 속성인 get_title 메서드가 반환하는 title은 인수의 값이 된다.

set_title은 매개변수로 _title을 가지며 이 매개변수를 가지고 title = _title로 저장하여 외부함수의 인수가 title이 된다.

elder_scroll = factory_movie('The Elder Scrolls V: Skyrim');
fallout = factory_movie('Fallout: New Vegas');

console.log(elder_scroll.get_title());
// 'The Elder Scrolls V: Skyrim' 출력
console.log(fallout.get_title());
// 'Fallout: New Vegas' 출력

부분 적용 함수(Partial Application)

클로저를 사용하여 함수의 일부 인수를 고정한 새로운 함수를 생성할 수 있으며, 이는 함수의 재사용성을 높이고, 코드의 간결성을 유지하는 데 유용하다.

function multiply(a) {
  return function(b) {
    return a * b;
  };
}

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

const triple = multiply(3);
console.log(triple(5)); // 15

주의사항

메모리 관리

클로저는 함수가 참조하는 변수들을 계속 유지하므로, 과도하게 사용하면 메모리 누수가 발생할 수 있다. 불필요한 클로저 사용을 피하고 필요하지 않은 참조는 명시적으로 제거하는 것이 좋다.

성능

클로저를 사용할 때는 성능에 주의가 필요하다. 특히 큰 데이터 구조를 포함하는 클로저는 메모리 사용량을 증가시킬 수 있다.

중첩 함수와 클로저

function makeCounter() {
  let count = 0;

  return function() {
    count++;
    return count;
  };
}

const counter = makeCounter();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3

위 렉시컬 환경은 다음과 같이 동작한다.

makeCounter 실행 시

환경 레코드 : { count : 0 }

외부 렉시컬 환경 참조 : 전역 환경

반환된 함수(클로저) 실행 시

환경 레코드 : 비어 있음

외부 렉시컬 환경 참조 : makeCounter의 렉시컬 환경 

클로저는 자바스크립트의 강력한 기능 중 하나로 함수가 선언된 렉시컬 환경을 기억하고, 함수가 호출될 때에도 그 환경에 접근할 수 있게 한다. 이를 통해 변수 은닉화, 부분 적용 함수, 콜백 함수 등 다양한 활용이 가능하다.

클로저의 주의사항을 유념하여 적절히 사용하면 코드의 재사용성과 유지보성을 높일 수 있다.