[javascript] 1. JS개요와 실행 환경 /메서드 오버로딩(Method Overloading)

 

크립트 언어와 자바스크립트

스크립트 언어란?

• 프로그램의 동작을 사용자의 요구사항에 맞게 수행되도록 해주는 용도
• 비교적 유연하게 동작하여 쉽게 사용이 가능

자바스크립트란

• 웹 브라우저에서 사용되는 인터프리터 방식의 스크립트 언어
• 브라우저에 엔진(V8)이 탑재되어 있어 별도의 컴파일 없이 동작
• 인터프리터 방식: 코드를 한 줄씩 읽어가며 바로 실행하는 방식
  • 실시간으로 텍스트를 분석해서 실행 → 문법 오류가 있으면 런타임 시점에 알려줌

웹의 3요소에서 JS의 역할

• HTML: 웹 문서의 큰 틀을 잡을 때 사용 (DOM Tree 구성)
• CSS: HTML로 구성된 DOM에 다양한 스타일 속성을 부여
• JS: 웹 문서에서 이벤트가 발생했을 때 실행할 기능을 정의 → HTML로 구성된 DOM을 편집

js를 웹에서 사용하는 방법

1. inline(인라인): 태그 내에서 간단한 소스코드를 작성해서 실행되게 하는 방법
2. internal(내부): HTML 문서 내에 소스코드를 작성해서 실행되게 하는 방법
3. external(외부): 별도의 .js 파일로 소스코드를 작성해서 가져다가 실행되게 하는 방법

inline

• 표현법: <태그 on이벤트명="해당 요소의 이벤트 발생시 실행할 코드">

 

 

internal

• <script> 태그 영역 안에 소스코드를 작성
• <script> 태그는 head, body 어디에서건 사용 가능

 

 

 

 

external

• 외부의 .js 파일을 생성해서 따로 js 코드를 작성
• head 영역에서 <script src="./sample.js"></script>로 연결

---

 

메서드 오버로딩(Method Overloading)은

자바와 같은 객체지향 언어에서 같은 이름의 메서드를 여러 개 정의하는 것을 의미.

단순히 이름만 같다고 되는 것이 아니라, 반드시 아래의 조건을 충족해야 한다.

메서드 오버로딩의 필수 조건

메서드 오버로딩이 성립하려면 메서드 이름은 같아야 하며, 파라미터(매개변수)의 구성이 달라야한다.

1. 파라미터의 개수가 달라야 한다.
2. 파라미터의 타입(자료형)이 달라야 한다.
3. 파라미터의 순서가 달라야 한다.

주의: 리턴 타입(반환형)만 다른 것은 오버로딩 조건이 아닙니다. 리턴 타입은 메서드 호출 시 어떤 메서드를 실행할지 결정하는 데 영향을 주지 않기 때문

프로그래밍에서 스코프(Scope)란

'변수나 함수에 접근할 수 있는 범위'를 의미한다.

쉽게 말해, "어디서 이 변수를 가져다 쓸 수 있는가?"를 결정하는 영역

스코프를 이해하면 프로그램 안에서 변수 이름이 겹쳐도 서로 충돌하지 않는 이유를 알 수 있다.

 

 

1. 전역 스코프 (Global Scope)

코드의 가장 바깥쪽에 선언된 변수. 파일 전체 어디서든 참조할 수 있다.

JavaScript

 

let globalName = "전역 변수";

function print() {
    console.log(globalName); // 함수 안에서도 잘 동작함
}

2. 지역 스코프 (Local/Block Scope)

특정 코드 블록({ }) 안에서만 유효한 변수. 블록 밖에서는 이 변수를 절대 부를 수 없다.

JavaScript

 

function localFunction() {
    let localName = "지역 변수";
    console.log(localName); // 함수 안에서는 가능
}

// console.log(localName); // 에러! 함수 밖에서는 접근 불가

스코프의 핵심 규칙

1. 안쪽에서 바깥쪽으로: 안쪽 스코프는 바깥쪽 스코프의 변수를 사용할 수 있다. 하지만 반대로, 바깥쪽 스코프에서는 안쪽 스코프의 변수를 사용할 수 없다.
2. 가까운 것이 우선: 변수 이름이 겹친다면, 현재 내가 있는 곳에서 가장 가까운 스코프에 정의된 변수를 먼저 사용한다.

JavaScript

 

let name = "바깥쪽";

function outer() {
    let name = "안쪽"; // 바깥쪽 name을 가림 (Shadowing)
    console.log(name); // "안쪽" 출력
}

왜 스코프가 중요한가요?

• 이름 충돌 방지: 스코프가 없다면 모든 변수 이름을 다 다르게 지어야 해서 코딩이 매우 힘들어짐
• 메모리 절약: 사용이 끝난 지역 변수는 해당 스코프를 벗어나는 순간 메모리에서 해제될 수 있어 효율적
• 보안: 외부에서 접근하면 안 되는 중요한 데이터를 특정 스코프 안에 가두어 보호할 수 있디/

자바스크립트 학습 중에 let과 const가 블록 레벨 스코프(중괄호 { } 단위)를 따른다는 점은 매우 중요. 변수가 선언된 중괄호 밖으로는 나갈 수 없다고 생각하면 된다.