[멋사 프론트엔드 부트캠프 14기] Learn JavaScript | Day 4

JavaScript 기초 정리 - 스코프, 모듈, 객체, 조건문, 객체 비교

오늘 수업에서는 JavaScript의 스코프(Scope), 모듈 스코프, 객체(Object)의 구조와 활용,
그리고 조건문, 객체 비교 방식에 대해 배웠다!

---

스코프

| 블록 스코프 예제

// 전역
let scope = '전역'

{
  let scope1 = '지역'

  {
    let scope2 = '중첩된 지역'
    console.log(1, scope2) // ✅ '중첩된 지역'
  }

  console.log(2, scope1) // ✅ '지역'
}

console.log(3, scope) // ✅ '전역'

 

라인	코드	설명
2	let scope = '전역'	전역 스코프. 어떤 블록이나 함수 밖에 있으므로 어디서든 접근 가능
5~7	let scope1 = '지역'	첫 번째 블록 내부에만 존재. 블록 밖에서는 접근 불가
8~10	let scope2 = '중첩된 지역'	중첩 블록 내부에만 존재
10	console.log(1, scope2)	현재 블록 안이므로 '중첩된 지역' 출력
13	console.log(2, scope1)	scope1은 같은 바깥 블록에 있으므로 '지역' 출력
16	console.log(3, scope)	전역에 선언된 변수이므로 '전역' 출력

 

👉 핵심 포인트: let, const는 블록 스코프를 가지므로 선언된 블록 안에서만 유효하다.

 

| 함수 스코프 예제

let name = '전역'
let nickname = '레이'

function 함수() {
  let name = '함수'

  function 중첩된함수() {
    let name = '중첩된 함수'

    console.log(1, name)      // ✅ '중첩된 함수'
    console.log(1, nickname)  // ✅ '레이'
  }

  중첩된함수()

  console.log(2, name)        // ✅ '함수'
}

함수()
console.log(3, name)          // ✅ '전역'

 

라인	코드	설명
1~2	let name, let nickname	전역 스코프
4	function 함수()	함수 스코프 생성
5	let name = '함수'	함수 안에서만 유효한 지역 변수
7	function 중첩된함수()	또 하나의 함수 스코프 생성
8	let name = '중첩된 함수'	이 안에서만 유효
10	console.log(1, name)	가장 가까운 name = '중첩된 함수'
11	console.log(1, nickname)	nickname은 전역에서 찾음
14	console.log(2, name)	중첩된 함수 바깥에 있는 '함수' 출력
18	console.log(3, name)	최상단 전역 name인 '전역' 출력

 

👉 핵심 포인트: 함수는 자신만의 지역 스코프를 가지고, 안쪽 함수는 바깥 함수나 전역의 변수도 접근 가능하지만, 바깥은 안쪽 변수에 접근할 수 없다.

| 요약 비교

 

항목	블록 스코프 ({})	함수 스코프 (function)
적용 대상	let, const	var, 함수 내부 전체
바깥에서 접근	❌ 불가능	❌ 내부 변수 접근 불가
중첩 접근	✅ 안쪽은 바깥 참조 가능	✅ 내부는 외부 참조 가능
전역 변수 접근	✅ 가능	✅ 가능

---

모듈

| 기본 스크립트(type="module" 없이 작성된 스크립트)

• 파일 안에서 선언된 전역 변수는 전역 객체(window)에 등록된다.
• 따라서 다른 스크립트나 콘솔 등에서 접근이 가능하다.

| type="module"을 사용한 스크립트

• 해당 JS 파일은 모듈 스코프를 가지게 된다.
• 따라서 파일 내부의 전역 변수는 전역 객체(window)에 등록되지 않고 외부에서 접근할 수 없다.

즉, 일반 스크립트는 전역 변수 → window.변수명 으로 접근 가능하지만,
모듈 스크립트는 자체 스코프 안에서만 유효하다.

 

---

객체 (Object)

변수가 기억할 수 있는 데이터 타입은 아래의 두 가지 뿐.

• 기본(Primitive, 원시) 데이터 타입
• 객체(Object) 데이터 타입

| 객체란?

• 키(key)-값(value) 쌍을 포함하는 데이터
• 중괄호 {} 안에 쉼표로 구분하여 작성

// 객체 생성자(Constructor)를 사용해 객체 생성
const 우유 = new Object();
우유.이름 = '저지방 우유';
우유.브랜드 = '서울 우유';
우유.용량 = '1000ml';

// 객체 리터럴을 사용해 객체 정의 (쉬운 방법)
const 커피 = {
  용량: '600ml',
  브랜드: '스타벅스',
  이름: '아메리카노',
};

 

객체와 유사한 구조

• HTML <dl> 설명 목록
• CSS 스타일 블록

 

나의 노트북을 객체로 만들어 보자!

const labtop = {
  장치_이름: 'JYEON',
  프로세서: 'Intel(R) Core(TM) Ultra 5 125H   3.60 GHz',
  설치된_RAM: '16.0GB(15.6GB 사용 가능)',
  시스템_종류: '64비트 운영 체제, x64 기반 프로세서',
  펜_및_터치: '펜과 10개 터치 포인트 지원',
};

 

| 객체에 포함 가능한 값

• JavaScript에서 유효한 모든 값 포함할 수 o

const anObject = {
  string: '객체란는 모든 값을 포함할 수 있습니다.',
  number: 2025,
  boolean: true,
  anotherObject: {},
  aFunction: function() {},
  anArray: [],
}

 

| 객체 속성 값 읽기

• 점 표기법: album.key
• 대괄호 표기법: album['key']

JavaScript의 속성은 “property"라고 하며, 객체의 key이다.
반면, HTML의 속성은 “attribute”라고 하며, 태그에 정의된 고정된 값이다.

 

• 대괄호 표기법 사용이 필요한 경우② 변수로 속성을 읽어야 할 경우
• ① 속성 이름이 따옴표로 묶인 경우 (유효하지 않은 속성 이름은 따옴표로 묶어야 한다.)

// 변수 이름 작성 규칙을 따르지 않는 객체의 속성 이름일 경우
const example = {
'유효하지 않은 속성 이름' : 'value'
}
console.log(example['유효하지 않은 속성 이름']) // value

// 변수를 통해 속성을 읽어야 할 경우
const macbookPro= {
macOS : '2.4 GHz 8코어 Intel Core i9',
}
let propertyName = 'macOS'
console.log(macbookPro[propertyName]) // '2.4 GHz 8코어 Intel Core i9'

 

| 객체 속성 값 쓰기

album.key = '앨범명'
album['key'] = '앨범명'

 

| 객체 속성 삭제

delete album.key
delete album['key']

 

| 객체의 메서드

• 객체의 속성 중 함수를 값으로 포함하는 속성을 메서드라고 부름
• 호출 방법: album.method() 또는 album['method']()
• 메서드에 매개변수 전달 가능

 

| 함수의 타입은?

• 객체 타입(Object Type)이다!!
• 객체 타입이기에 객체처럼 속성을 가질 수도 있다.

 

| 함수는 값으로 취급

• 함수가 값처럼 취급되는 성질: 일급 객체(First-class Object)
• 함수를 인수로 받거나 반환하는 함수: 고차 함수(Higher-order Function)

결국 함수는 값으로 취급 되고, 인수로 함수를 전달할 수 있다는 이야기다
+ 함수에서 함수를 반환할 수도 있다.

 

---

조건문 - if…else

• 특정 상황에서 프로그램의 작동을 조건부로 제어

// 예시
let isActive= true
if (isActive) {
  console.log('활성화 상태입니다.');
} else {
  console.log('비활성화 상태입니다.');
}

// 활성화 상태입니다.

 

| 참, 거짓 평가

• 모든 조건은 표현식이므로 참(Truthy) 또는 거짓(Falsey)인지 평가한다.

값이 거짓으로 평가되는 것들

• false (boolean)
• 0 (number)
• ''(빈 문자열)
• null
• undefined
• NaN (숫자 + undefined)

 

불리언 타입 변경

• 값이 거짓으로 평가되는 것들을 제외한 나머지 값은 모두 참으로 평가된다.

 

자동 타입 변경

• 조건문 내부에서 평가되는 표현식은 자동으로 불리언(Boolean) 타입으로 변경된다.

if (10 - 11) {
  console.log('조건이 참이다.');
} else {
  console.log('조건이 거짓이다.');
}

 

| 비교 연산자

• 숫자 비교에 사용: >, ≥, <, ≤
• 각 항을 비교하거나 같거나 다른지 평가에 사용: ==, ===, ≠, ≠=

느슨한 vs 엄격한 비교

1. 느슨한 비교

• ==, !=
• 변수의 할당된 값의 타입이 유동적으로 변경될 수 있다.
• 따라서 타입이 다른 두 값을 비교할 때, JavaScript가 타입을 자동 변환해서 비교하기 때문에 예측과는 다른 평가가 될 수 있다.

모든 타입을 숫자로 자동 변환 시도한다.

 

 

2. 엄격한 비교

• ===, !==
• 엄격한 비교를 수행할 때, 두 가지 사항을 확인한다.
  • 변수에 할당된 값의 타입
  • 변수 값
• JavaScript가 타입을 자동 변환하지 않기 때문에 예측한 대로 평가된다.

| else if 문

• 조건이 여럿인 경우에는 if, else 외에도 else if문을 사용해 비교하여 처리

 

---

객체 비교

| 동치 vs 동등 연산자

• 객체 타입의 비교는 기본 타입의 비교 처리와 다르다.

연산자	비교 방식	의미
===	엄격한 동치	값과 타입이 모두 같아야 true
==	느슨한 동등	값만 같으면 true (타입 자동 변환)

객체끼리는 ===나 == 모두 참조가 다르면 false!

 

| 객체는 참조로 비교된다.

⇒ “고유 식별자”가 생기는데, 이를 “객체 참조(Object Reference)”라고 한다.

(like 신분증)

• 객체는 값이 아니라 참조(메모리 주소) 를 비교한다.
• 아무리 모양이 같아도 참조가 다르면 다른 객체이다.
• 같은 참조를 가리킬 때만 === 결과가 true

 

| 메모리와 객체

타입 종류	저장 위치	비교 방식
기본(원시) 타입	스택(Stack)	값 자체를 비교
객체(참조) 타입	힙(Heap)	참조(주소)를 비교

 

기본 타입의 값은 = 를 하면 값이 복사된다.
그런데 객체 타입은 값이 복사되는 것이 아니라 참조가 복사된다.
따라서 객체 타입은 값이 비교되는 것이 아니라, 참조가 비교되는 것이다.

 

| 객체 속성·값이 같은지 확인하려면?

• ===로는 비교 불가 (참조만 비교)
• 모든 속성과 값을 하나씩 비교해야 함
• 이를 위해 반복문(루프) 사용해야 한다. → 이건 다음번에 학습!

---

오늘의 느낀 점 !

오늘 배운 스코프, 모듈, 객체, 조건문, 객체 비교에서 몇 가지는 익숙한 개념들이라 부담 없이 받아들일 수 있었다.

그런데, '일급 객체'라거나 '고차 함수' 같은 용어는 처음 들어봐서 조금 낯설었…지만,

결국 이 용어들이 말하고자 하는 건 결국 함수도 값이다! 라는 개념이라 이해할 수 있었다.

그리고 객체 참조랑 메모리 구조에 관해서 설명을 들을 때는

"아.. 전공 수업 때 배운 내용이네..." 싶은 순간이 있었는데, 그걸 거의 다 까먹은 나 자신이 살짝 미울 뻔했다...^_^

그만큼 더 공부해서 잊어버린 것들을 되찾아야겠다는 다짐을 해본다 💪