내꿈은 삽질왕

함수와 스코프

자바스크립트에서 함수와 스코프는 코드를 더 구조적이고 재사용 가능하게 만드는 데 중요한 역할을 합니다. 이 포스트에서는 함수와 스코프에 대해 자세히 알아보겠습니다.

함수

함수는 특정 작업을 수행하는 코드 블록입니다. 함수를 정의하고 호출하는 방법은 다음과 같습니다.

함수 정의

javascript코드 복사
function greet(name) {
    return "안녕하세요, " + name + "님!";
}

함수 호출

javascript코드 복사
let greeting = greet("철수");
console.log(greeting); // "안녕하세요, 철수님!"

함수 표현식

javascript코드 복사
let sayHello = function(name) {
    return "Hello, " + name + "!";
};

console.log(sayHello("Alice")); // "Hello, Alice!"

화살표 함수

javascript코드 복사
let add = (a, b) => a + b;
console.log(add(2, 3)); // 5

스코프

스코프는 변수와 함수가 접근할 수 있는 유효 범위를 의미합니다. 자바스크립트에는 전역 스코프와 지역 스코프가 있습니다.

전역 스코프

전역 변수는 코드 전체에서 접근할 수 있습니다.

javascript코드 복사
let globalVar = "전역 변수";

function showGlobalVar() {
    console.log(globalVar); // "전역 변수"
}

지역 스코프

지역 변수는 함수 또는 블록 내에서만 접근할 수 있습니다.

javascript코드 복사
function showLocalVar() {
    let localVar = "지역 변수";
    console.log(localVar); // "지역 변수"
}

showLocalVar();
console.log(localVar); // 오류: localVar is not defined

블록 스코프

let과 const로 선언한 변수는 블록 스코프를 가집니다.

javascript코드 복사
{
    let blockVar = "블록 변수";
    console.log(blockVar); // "블록 변수"
}

console.log(blockVar); // 오류: blockVar is not defined

예제 코드: 함수와 스코프

javascript코드 복사
// 함수 정의 및 호출
function multiply(a, b) {
    return a * b;
}

let result = multiply(4, 5);
console.log(result); // 20

// 전역 스코프와 지역 스코프
let globalVariable = "I am global";

function scopeExample() {
    let localVariable = "I am local";
    console.log(globalVariable); // "I am global"
    console.log(localVariable);  // "I am local"
}

scopeExample();
console.log(globalVariable); // "I am global"
console.log(localVariable);  // 오류: localVariable is not defined

결론

함수와 스코프를 이해하면 자바스크립트 코드를 더 효율적으로 작성할 수 있습니다. 함수는 코드를 재사용 가능하게 만들고, 스코프는 변수의 유효 범위를 관리하는 데 도움을 줍니다.

조건문과 반복문

자바스크립트에서 조건문과 반복문은 프로그램의 흐름을 제어하는 데 중요한 역할을 합니다. 이 포스트에서는 조건문과 반복문에 대해 자세히 알아보겠습니다.

조건문

조건문은 특정 조건에 따라 다른 코드를 실행할 수 있게 합니다. 주로 사용하는 조건문에는 if, else if, else가 있습니다.

if, else if, else 문

javascript코드 복사
let age = 20;

if (age < 18) {
    console.log("미성년자입니다.");
} else if (age >= 18 && age < 60) {
    console.log("성인입니다.");
} else {
    console.log("노인입니다.");
}

switch 문

switch 문은 다중 조건을 검사할 때 사용됩니다.

javascript코드 복사
let day = 3;
let dayName;

switch (day) {
    case 1:
        dayName = "월요일";
        break;
    case 2:
        dayName = "화요일";
        break;
    case 3:
        dayName = "수요일";
        break;
    case 4:
        dayName = "목요일";
        break;
    case 5:
        dayName = "금요일";
        break;
    case 6:
        dayName = "토요일";
        break;
    case 7:
        dayName = "일요일";
        break;
    default:
        dayName = "잘못된 입력";
        break;
}

console.log(dayName); // "수요일"

반복문

반복문은 코드 블록을 여러 번 실행할 때 사용됩니다. 주로 사용하는 반복문에는 for, while, do...while이 있습니다.

for 문

javascript코드 복사
for (let i = 0; i < 5; i++) {
    console.log("현재 i의 값은: " + i);
}

while 문

javascript코드 복사
let count = 0;

while (count < 5) {
    console.log("현재 count의 값은: " + count);
    count++;
}

do...while 문

javascript코드 복사
let number = 0;

do {
    console.log("현재 number의 값은: " + number);
    number++;
} while (number < 5);

예제 코드: 조건문과 반복문

javascript코드 복사
// 조건문
let temperature = 22;

if (temperature < 0) {
    console.log("날씨가 매우 춥습니다.");
} else if (temperature < 20) {
    console.log("날씨가 조금 춥습니다.");
} else {
    console.log("날씨가 따뜻합니다.");
}

// 반복문
for (let i = 1; i <= 3; i++) {
    console.log("반복문 실행 횟수: " + i);
}

let counter = 1;
while (counter <= 3) {
    console.log("while 문 실행 횟수: " + counter);
    counter++;
}

결론

조건문과 반복문은 프로그램의 흐름을 제어하는 데 필수적인 요소입니다. 조건문을 통해 다양한 조건을 처리하고, 반복문을 통해 코드를 여러 번 실행할 수 있습니다. 다음 포스트에서는 함수와 스코프에 대해 다루겠습니다.

프로그래밍 기본 용어

1. Property (속성)
   • 객체의 특정 값을 나타내는 변수입니다.
   • 예: object.property
2. Parameter (파라미터)
   • 함수가 호출될 때 함수로 전달되는 값을 나타내는 변수입니다.
   • 예: function myFunction(param1, param2)
3. Method (메소드)
   • 객체의 속성 중 함수인 것을 의미합니다.
   • 예: object.method()
4. Variable (변수)
   • 데이터를 저장하기 위해 사용되는 식별자입니다.
   • 예: var x = 5;
5. Function (함수)
   • 재사용 가능한 코드 블록으로, 특정 작업을 수행합니다.
   • 예: function myFunction() { return 1; }
6. Object (객체)
   • 속성과 메소드를 포함할 수 있는 데이터 구조입니다.
   • 예: var obj = { property: value, method: function() {} };
7. Array (배열)
   • 여러 개의 값을 하나의 변수에 저장할 수 있는 데이터 구조입니다.
   • 예: var arr = [1, 2, 3];
8. Loop (반복문)
   • 조건이 충족될 때까지 코드를 반복 실행하는 구조입니다.
   • 예: for (var i = 0; i < 5; i++) { console.log(i); }
9. Conditional Statement (조건문)
   • 주어진 조건에 따라 다른 코드를 실행하는 구조입니다.
   • 예: if (condition) { // code } else { // code }
10. Callback (콜백)
    • 다른 함수에 인자로 전달되는 함수입니다.
    • 예: setTimeout(function() { console.log("Hello"); }, 1000);
11. Scope (스코프)
    • 변수 또는 함수가 유효한 범위를 나타냅니다.
    • 예: var globalVar = "global"; function myFunction() { var localVar = "local"; }
12. Closure (클로저)
    • 함수와 그 함수가 선언될 당시의 환경 정보를 기억하는 특성을 의미합니다.
    • 예: function outerFunction() { var outerVar = "I am outside!"; function innerFunction() { console.log(outerVar); } return innerFunction; }
13. Prototype (프로토타입)
    • 모든 자바스크립트 객체는 프로토타입이라는 또 다른 객체를 가지며, 프로토타입 객체로부터 속성을 상속받을 수 있습니다.
    • 예: function Person() {} Person.prototype.greet = function() { console.log("Hello!"); };
14. Event (이벤트)
    • 특정 상황이 발생했을 때 실행되는 코드 블록입니다.
    • 예: element.addEventListener('click', function() { // code });
15. Promise (프로미스)
    • 비동기 작업의 완료 또는 실패를 나타내는 객체입니다.
    • 예: var promise = new Promise(function(resolve, reject) { // code });
16. Async/Await (비동기/대기)
    • 비동기 작업을 동기식 코드처럼 작성할 수 있게 해주는 문법입니다.
    • 예: async function myFunction() { var result = await someAsyncFunction(); }

헷갈릴 수 있는 IT 용어 추가

1. Debugging (디버깅)
   • 프로그램의 오류를 찾아 수정하는 과정입니다.
   • 예: console.log()를 사용하여 변수의 값을 출력하거나 브라우저의 디버거 도구를 사용합니다.
2. IDE (통합 개발 환경)
   • 코딩, 디버깅, 테스트 등을 하나의 인터페이스에서 할 수 있는 소프트웨어입니다.
   • 예: Visual Studio Code, IntelliJ IDEA
3. Framework (프레임워크)
   • 소프트웨어 개발에 필요한 기본 구조를 제공하는 라이브러리입니다.
   • 예: React, Angular, Vue.js
4. Library (라이브러리)
   • 특정 기능을 수행하는 코드의 집합입니다. 개발자가 필요할 때 호출해서 사용합니다.
   • 예: jQuery, Lodash
5. API (응용 프로그램 인터페이스)
   • 다른 소프트웨어와 상호 작용하기 위해 정의된 규칙입니다.
   • 예: 웹 API를 통해 서버와 데이터를 주고받습니다.
6. DOM (문서 객체 모델)
   • HTML 문서를 구조화하여 스크립트나 프로그래밍 언어가 문서 구조, 스타일 및 내용을 변경할 수 있게 합니다.
   • 예: document.getElementById('myElement')
7. Event Listener (이벤트 리스너)
   • 특정 이벤트가 발생할 때 호출될 함수를 지정합니다.
   • 예: button.addEventListener('click', function() { // code });
8. Hoisting (호이스팅)
   • 변수 및 함수 선언이 해당 스코프의 최상위로 끌어올려지는 자바스크립트의 동작 방식입니다.
   • 예: console.log(x); var x = 5;는 var x; console.log(x); x = 5;로 해석됩니다.
9. JSON (제이슨)
   • 데이터를 저장하고 전송하기 위한 경량 데이터 교환 형식입니다.
   • 예: {"name": "John", "age": 30}

자바스크립트에서 변수를 선언하고 데이터 타입을 이해하는 것은 기본 중의 기본입니다. 이 포스트에서는 변수 선언 방법과 주요 데이터 타입에 대해 알아보겠습니다.

변수 선언

변수를 선언하는 방법에는 var, let, const가 있습니다.

javascript코드 복사
var x = 10;
let y = 20;
const z = 30;

• var: 함수 범위 스코프를 가집니다. 즉, 함수 내부에서 선언된 경우 함수 외부에서는 접근할 수 없습니다.
• let: 블록 범위 스코프를 가집니다. {} 내에서 선언된 경우 해당 블록 외부에서는 접근할 수 없습니다.
• const: 상수입니다. 한 번 할당된 값은 변경할 수 없습니다.

데이터 타입

자바스크립트의 데이터 타입은 크게 기본형(primitive type)과 참조형(reference type)으로 나뉩니다.

1. 기본형 데이터 타입
   • 숫자(Number)

   javascript코드 복사
   let num = 100;
   
   

   • 문자열(String)

   javascript코드 복사
   let str = "Hello, World!";
   
   

   • 불리언(Boolean)

   javascript코드 복사
   let isTrue = true;
   
   

   • null

   javascript코드 복사
   let emptyValue = null;
   
   

   • undefined

   javascript코드 복사
   let undefinedValue;
   
   

2. 참조형 데이터 타입
   • 객체(Object)

   javascript코드 복사
   let person = {
       name: "John",
       age: 30
   };
   
   

   • 배열(Array)

   javascript코드 복사
   let numbers = [1, 2, 3, 4, 5];
   
   

   • 함수(Function)

   javascript코드 복사
   function greet(name) {
       return "Hello, " + name;
   }
   
   

예제 코드: 변수와 데이터 타입

javascript코드 복사
// 변수 선언
var age = 25;         // 숫자형
let name = "Alice";   // 문자열형
const isStudent = true;  // 불리언형

// 객체와 배열
let person = {
    name: "Bob",
    age: 30
};

let fruits = ["Apple", "Banana", "Cherry"];

// 함수
function sayHello() {
    console.log("Hello, World!");
}

// 출력
console.log("Age:", age);                 // 25
console.log("Name:", name);               // Alice
console.log("Is Student:", isStudent);    // true
console.log("Person:", person);           // {name: "Bob", age: 30}
console.log("Fruits:", fruits);           // ["Apple", "Banana", "Cherry"]
sayHello();                               // Hello, World!

자바스크립트의 변수와 데이터 타입에 대해 알아보았습니다. 변수 선언 방법과 각 데이터 타입의 특징을 이해하면 자바스크립트를 더 잘 활용할 수 있습니다. 

삼항 연산자란?

<script>
        // 삼항 연산자 (조건식) ? true : false

        var x = 100;
        var y = 10; 

        var z = x > y ? "x가 y보다 더 크다" : "X가 y보다 더 작다";
        alert(z);
        
    </script>

삼항 연산자는 자바스크립트에서 조건문을 간단하게 표현할 수 있는 연산자입니다. 이름에서 알 수 있듯이 세 개의 피연산자를 사용합니다. 기본 형태는 다음과 같습니다:

javascript코드 복사
조건 ? 참일 때의 값 : 거짓일 때의 값

기본 예제

javascript코드 복사
var result = (5 > 3) ? "참" : "거짓";
console.log(result); // "참"

• 5 > 3이라는 조건이 참이기 때문에 result는 "참"이 됩니다.
• 만약 조건이 거짓이라면 result는 "거짓"이 됩니다.

삼항 연산자 사용 예제

기본 if-else 문

javascript코드 복사
var nCount = 0;
var sText = "test";

if (sText == "test") {
    nCount += 1;
} else {
    nCount -= 1;
}
alert(nCount); // 1

• 변수 nCount를 0으로 초기화하고, sText를 "test"로 초기화합니다.
• if 문에서 sText가 "test"와 같으면 nCount를 1 증가시키고, 그렇지 않으면 1 감소시킵니다.
• nCount를 경고창으로 표시합니다. 이 경우 sText가 "test"이므로 nCount는 1이 됩니다.

삼항 연산자를 사용한 간단한 표현

javascript코드 복사
nCount = (sText == "test") ? nCount + 1 : nCount - 1;
alert(nCount); // 1

• 삼항 연산자를 사용하여 동일한 로직을 더 간단하게 표현할 수 있습니다.
• (sText == "test") 조건이 참이면 nCount를 1 증가시키고, 거짓이면 1 감소시킵니다.
• 이 경우에도 sText가 "test"이므로 nCount는 1이 됩니다.

정리

• 기본 if-else 문: 조건에 따라 코드 블록을 실행하는 기본적인 방법입니다.
• 삼항 연산자: 간단한 조건문을 한 줄로 작성할 수 있는 방법입니다. (조건) ? 참일 때 값 : 거짓일 때 값 형태로 사용합니다.

이 두 방법은 같은 결과를 만들지만, 삼항 연산자는 코드를 더 간결하게 만들 수 있습니다.

최종 정리 예제 코드

javascript코드 복사
var nCount = 0;
var sText = "test";

// 기본 if-else 문
if (sText == "test") {
    nCount += 1;
} else {
    nCount -= 1;
}
alert(nCount); // 1

// 삼항 연산자를 사용한 표현
nCount = (sText == "test") ? nCount + 1 : nCount - 1;
alert(nCount); // 1

이 코드는 sText가 "test"일 때 nCount를 1 증가시키고, 그렇지 않으면 1 감소시킵니다. 두 경우 모두 nCount는 1이 됩니다.

JavaScript와 Java에서 문자열 메서드 쉽게 이해하기

프로그래밍을 처음 시작할 때 문자열 관련 메서드들이 헷갈리기 쉽습니다. 특히 인덱스가 0부터 시작하는지 1부터 시작하는지 혼란스러울 수 있습니다. 저 또한 처음에는 헷갈렸기 때문에 정리해봤습니다 :)

1. length

• 설명: 문자열의 길이를 반환합니다.
• 기준: 1부터 셉니다.

let str = "Hello";
console.log(str.length); // 5

- length 프로퍼티는 문자열의 문자 수를 반환합니다. 이는 배열에서도 사용되며, 배열의 요소 수를 반환합니다.

2. charAt(n)

• 설명: 주어진 인덱스에 있는 문자를 반환합니다.
• 기준: 0부터 셉니다.

let str = "Hello";
console.log(str.charAt(1)); // 'e'

- charAt 메서드는 문자열에서 특정 위치의 문자를 반환합니다. 인덱스는 0부터 시작하므로, charAt(1)은 두 번째 문자를 반환합니다.

3. indexOf(substring)

• 설명: 주어진 부분 문자열이 처음 나타나는 위치의 인덱스를 반환합니다.
• 기준: 0부터 셉니다.
• 예시:

let str = "Hello";
console.log(str.indexOf('l')); // 2

- indexOf 메서드는 문자열 내에서 특정 문자열이 처음으로 나타나는 위치를 반환합니다. 찾는 문자열이 없으면 -1을 반환합니다.

4. substring(start, end)

• 설명: 시작 인덱스부터 끝 인덱스 전까지의 부분 문자열을 반환합니다.
• 기준: 0부터 셉니다. 끝 인덱스는 포함되지 않습니다.

let str = "Hello";
console.log(str.substring(1, 4)); // 'ell'

- substring 메서드는 문자열의 일부분을 추출하여 새로운 문자열을 반환합니다. 끝 인덱스는 포함되지 않으므로, substring(1, 4)는 인덱스 1부터 3까지의 문자를 반환합니다.

추가로 알면 좋은 내용

1. slice(start, end)

-  substring과 유사하지만, 음수 인덱스를 지원합니다

let str = "Hello";
console.log(str.slice(-4, -1)); // 'ell'

2. toUpperCase()와 toLowerCase()

-  문자열을 대문자 또는 소문자로 변환합니다.

let str = "Hello";
console.log(str.toUpperCase()); // 'HELLO'
console.log(str.toLowerCase()); // 'hello'

3.  trim()

- 문자열의 앞뒤 공백을 제거합니다.

let str = "  Hello  ";
console.log(str.trim()); // 'Hello'

4. includes(substring)

- 문자열에 특정 문자열이 포함되어 있는지 확인합니다.

let str = "Hello";
console.log(str.includes("ell")); // true

복습

• length: 문자열의 길이를 반환하며, 1부터 센다.
• charAt(n): 주어진 인덱스에 있는 문자를 반환하며, 0부터 센다.
• indexOf(substring): 주어진 부분 문자열이 처음 나타나는 위치의 인덱스를 반환하며, 0부터 센다.
• substring(start, end): 시작 인덱스부터 끝 인덱스 전까지의 부분 문자열을 반환하며, 0부터 센다.

자바스크립트에서 클래스를 설명할 때, 우리가 친숙한 개념을 이용해보자. 예를 들어, "자동차 공장"을 비유로 들어 설명할 수 있다.

클래스(Class)란 무엇인가?

클래스는 일종의 "청사진" 또는 "설계도"라고 생각하면 된다. 이 설계도를 통해 같은 유형의 물건을 여러 개 만들 수 있다. 예를 들어, 자동차 공장에서 여러 대의 자동차를 만드는 것처럼 말이다.

클래스의 구조

자동차를 만드는 과정을 생각해보자. 자동차를 만들기 위해 몇 가지 중요한 부분들을 정의해야 한다.

• 생성자(Constructor): 자동차를 만들 때 초기 설정을 하는 부분이다. 예를 들어, 자동차의 색깔, 모델명 등을 처음 설정하는 단계이다.
• 속성(Properties): 자동차의 특징이다. 색깔, 모델명, 속도 등이 이에 해당한다.
• 메서드(Methods): 자동차가 할 수 있는 행동이다. 예를 들어, 자동차가 달리거나 멈추는 기능이 이에 해당한다.

이제 자바스크립트 코드를 이용해 자동차 클래스를 만들어보자.

class Car {
  // 생성자: 자동차의 초기 설정을 한다
  constructor(color, model) {
    this.color = color; // 자동차의 색깔
    this.model = model; // 자동차의 모델명
    this.speed = 0;     // 자동차의 초기 속도는 0
  }

  // 메서드: 자동차가 달리는 기능
  drive() {
    this.speed = 60; // 자동차의 속도를 60으로 설정
    console.log(`${this.model}이(가) 달리고 있습니다!`);
  }

  // 메서드: 자동차가 멈추는 기능
  stop() {
    this.speed = 0; // 자동차의 속도를 0으로 설정
    console.log(`${this.model}이(가) 멈췄습니다.`);
  }
}​

클래스 사용하기

이제 이 클래스를 이용해 여러 대의 자동차를 만들 수 있다. 아래 코드를 보자.

// 자동차 공장에서 새로운 자동차를 만든다
const myCar = new Car('빨강', '소나타');
const yourCar = new Car('파랑', '아반떼');

// 자동차를 사용해보자
myCar.drive();  // 출력: 소나타가 달리고 있습니다!
yourCar.drive();  // 출력: 아반떼가 달리고 있습니다!

myCar.stop();   // 출력: 소나타가 멈췄습니다.
yourCar.stop(); // 출력: 아반떼가 멈췄습니다.

정리

• 클래스는 같은 유형의 여러 물건을 만들기 위한 설계도이다.
• 생성자는 물건을 처음 만들 때 초기 설정을 담당한다.
• 속성은 물건의 특징을 나타내고, 메서드는 물건이 할 수 있는 행동을 나타낸다.

이렇게 클래스는 자동차 공장처럼 특정한 물건을 만들고, 그 물건이 어떤 특징을 가지며, 어떤 행동을 할 수 있는지를 정의하는데 아주 유용하다. 이 비유를 통해 자바스크립트 클래스 개념이 좀 더 쉽게 다가왔으면 좋겠다.

상속(inheritance)

자바스크립트 클래스에는 상속(inheritance)이라는 중요한 개념이 있다. 예를 들어, 스포츠카(SportsCar)라는 클래스를 만들고 싶다면, 기존의 자동차(Car) 클래스를 확장하여 만들 수 있다. 이를 통해 코드의 재사용성을 높이고, 더욱 구조화된 프로그래밍이 가능하다.

class SportsCar extends Car {
  turboBoost() {
    this.speed += 50;
    console.log(`${this.model}이(가) 터보 부스트를 사용하여 속도가 ${this.speed}로 증가했습니다!`);
  }
}

const mySportsCar = new SportsCar('노랑', '포르쉐');
mySportsCar.drive();
mySportsCar.turboBoost();
mySportsCar.stop();

이 코드는 새로운 스포츠카 클래스를 만들어 자동차의 기본 기능을 유지하면서도, 추가적인 기능(터보 부스트)을 더할 수 있게 한다. 상속을 통해 클래스 간의 관계를 정의하고, 더 복잡한 애플리케이션을 쉽게 관리할 수 있다.

이러한 개념들을 통해 자바스크립트 클래스에 대한 이해가 더욱 깊어지기를 바란다.