로그인 · 가입
KREN
← 홈페이지 5강 목록으로
📦
EPISODE 01
var · let · const · 원시 타입 · 형변환 · 템플릿 리터럴 · if/else · switch · for · while · break/continue · 선언식 · 표현식 · 화살표 · 콜백 · push/pop · map · filter · find · sort · spread

변수와 타입 · 제어문 · 함수 · 배열

var/let/const의 차이, 6가지 원시 타입, typeof 연산자, 명시적·암묵적 형변환, 그리고 백틱으로 작성하는 템플릿 리터럴을 익힙니다. 조건 분기(if/else, 삼항, switch), 비교·논리 연산자, 반복문(for, while, do-while), 흐름 제어(break, continue, 단락 평가)를 익힙니다. 함수의 3가지 작성 방식(선언식·표현식·화살표), 호이스팅 차이, 매개변수와 반환값, 기본값, 스코프, 그리고 콜백 함수의 개념을 익힙니다. 배열 생성·접근·수정 메서드(push, pop, shift, unshift, splice)와 강력한 고차함수(forEach, map, filter, find, includes, sort), 그리고 전개 연산자를 익힙니다.

JavaScript변수타입조건문반복문함수콜백배열고차함수
소요 시간
⏱ 30~60분 + 30~60분 + 30~60분 + 30~60분
난이도
📊 초보
선수 조건
🎯 css-07
결과물
타입 안전하게 변수를 선언·변환·조합하는 능력 / 분기와 반복으로 작은 알고리즘 구현 / 재사용 가능한 함수와 콜백 패턴 작성 / 함수형 스타일로 데이터를 변환·필터링·정렬

이 강의에서 배우는 것

  • 1var/let/const의 스코프·재선언·재할당 차이를 안다
  • 2string/number/boolean/null/undefined/symbol을 구분한다
  • 3typeof 연산자로 타입을 확인한다
  • 4Number()/String()/parseInt() 명시적 변환을 사용한다
  • 5백틱(`)과 ${}로 템플릿 리터럴을 작성한다
  • 6if/else if/else로 다중 분기를 작성한다
  • 7===와 !==를 ==/!= 대신 사용한다
  • 8&& / || / ! 논리 연산자와 단락 평가를 활용한다
  • 9switch로 다중 분기를 깔끔하게 처리한다
  • 10for / while / for...of로 반복을 작성한다
  • 11선언식·표현식·화살표 함수의 차이를 안다
  • 12매개변수·반환값으로 재사용 가능한 함수를 작성한다
  • 13기본값 매개변수를 사용한다
  • 14전역/지역 스코프와 클로저를 이해한다
  • 15콜백 함수를 인자로 전달한다
  • 16push/pop/shift/unshift/splice를 적절히 사용한다
  • 17map으로 변환, filter로 추출, find로 검색한다
  • 18sort에 비교 함수를 전달해 숫자 정렬을 한다
  • 19...로 배열을 복사·합치기·확장한다

변수와 타입

var/let/const의 차이, 6가지 원시 타입, typeof 연산자, 명시적·암묵적 형변환, 그리고 백틱으로 작성하는 템플릿 리터럴을 익힙니다.

1. 변수 선언

var (구식, 사용 지양)

javascript
var name = "홍길동";
var name = "이순신";  // 재선언 가능 → 버그 위험
name = "강감찬";     // 재할당 가능
  • 함수 스코프
  • 호이스팅: 선언이 위로 끌어올려져 undefined로 시작

let (변수)

javascript
let age = 25;
// let age = 30;  // 재선언 불가
age = 30;          // 재할당 가능

블록 스코프 — { } 안에서만 유효.

const (상수)

javascript
const PI = 3.14159;
// PI = 3.14;  // 재할당 불가

const user = { name: "홍길동" };
user.name = "이순신";  // 객체 내부는 변경 가능

비교

재선언재할당스코프
var가능가능함수
let불가가능블록
const불가불가블록
💡

기본은 const, 값이 변경될 때만 let. var는 사용하지 않습니다.

2. 원시 타입 6가지

javascript
// string
const greeting = "안녕하세요";
const sentence = `제 이름은 ${name}입니다.`;

// number
const integer = 42;
const float = 3.14;
const infinity = Infinity;
const notANumber = NaN;

// boolean
const isLoggedIn = true;

// null (의도적 빈 값)
let selectedItem = null;

// undefined (할당되지 않음)
let uninitializedVar;

// symbol (고유 식별자)
const id = Symbol("id");

3. typeof 연산자

javascript
typeof "안녕"        // "string"
typeof 42            // "number"
typeof true          // "boolean"
typeof undefined     // "undefined"
typeof null          // "object" ← 유명한 버그
typeof {}            // "object"
typeof []            // "object"
typeof function(){}  // "function"

4. 형변환

명시적

javascript
String(42)            // "42"
Number("42")          // 42
Number("abc")         // NaN
parseInt("42px")      // 42
parseFloat("3.14abc") // 3.14

Boolean(0)            // false
Boolean("")           // false
Boolean(null)         // false
Boolean("hello")      // true

암묵적

javascript
"5" + 3      // "53"  (숫자 → 문자열)
"5" - 3      // 2     (문자열 → 숫자)
"5" * "3"    // 15
true + 1     // 2
false + 1    // 1

5. 템플릿 리터럴

javascript
const name = "홍길동";
const age = 25;

// 기존 방식
const m1 = "안녕하세요, " + name + "님! 나이는 " + age + "세입니다.";

// 템플릿 리터럴
const m2 = `안녕하세요, ${name}님! 나이는 ${age}세입니다.`;

// 여러 줄
const multiLine = `
  첫 번째 줄
  두 번째 줄
`;

// 표현식
const result = `10 + 20 = ${10 + 20}`;

제어문

조건 분기(if/else, 삼항, switch), 비교·논리 연산자, 반복문(for, while, do-while), 흐름 제어(break, continue, 단락 평가)를 익힙니다.

1. if / else if / else

javascript
const score = 85;

if (score >= 90) {
  console.log("A학점");
} else if (score >= 80) {
  console.log("B학점");
} else if (score >= 70) {
  console.log("C학점");
} else {
  console.log("F학점");
}

// 삼항 연산자
const status = age >= 19 ? "성인" : "미성년자";

2. 비교 연산자

연산자의미예시결과
===엄격한 같음5 === "5"false
!==엄격한 다름5 !== "5"true
==느슨한 같음5 == "5"true
>초과10 > 5true
>=이상5 >= 5true
⚠️

== 대신 항상 ===를 사용하세요. 타입까지 비교하므로 더 안전합니다.

3. 논리 연산자

javascript
const isAdult = true;
const hasTicket = true;
console.log(isAdult && hasTicket); // true

const isWeekend = false;
const isHoliday = true;
console.log(isWeekend || isHoliday); // true

const isLoggedIn = false;
console.log(!isLoggedIn); // true

단락 평가

javascript
// 기본값 패턴
const username = "";
const displayName = username || "손님"; // "손님"

// 옵셔널 패턴
const user = { name: "홍길동" };
const name = user && user.name; // "홍길동"

4. switch

javascript
switch (day) {
  case "월":
  case "화":
  case "수":
  case "목":
  case "금":
    console.log("평일");
    break;
  case "토":
  case "일":
    console.log("주말");
    break;
  default:
    console.log("잘못된 입력");
}
⚠️

각 case마다 break를 빠뜨리면 다음 case까지 실행됩니다 (fall-through).

5. for 반복문

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

// for...of (값 순회, ES6+)
const fruits = ["사과", "바나나", "딸기"];
for (const fruit of fruits) {
  console.log(fruit);
}

6. while / do-while

javascript
let count = 0;
while (count < 5) {
  console.log(count);
  count++;
}

// 조건 확인 전에 최소 1회 실행
let num = 0;
do {
  console.log(num);
  num++;
} while (num < 0);

7. break / continue

javascript
for (let i = 0; i < 10; i++) {
  if (i === 5) break;       // 즉시 종료
  console.log(i); // 0~4
}

for (let i = 0; i < 10; i++) {
  if (i % 2 === 0) continue; // 짝수 건너뜀
  console.log(i); // 1, 3, 5, 7, 9
}

함수

함수의 3가지 작성 방식(선언식·표현식·화살표), 호이스팅 차이, 매개변수와 반환값, 기본값, 스코프, 그리고 콜백 함수의 개념을 익힙니다.

1. 함수 선언식

javascript
function greet(name) {
  return `안녕하세요, ${name}님!`;
}

console.log(greet("홍길동"));

// 호이스팅: 코드 위치보다 먼저 호출 가능
console.log(sayHi()); // 작동
function sayHi() { return "안녕!"; }

2. 함수 표현식

javascript
const greet = function(name) {
  return `안녕하세요, ${name}님!`;
};

console.log(greet("홍길동"));

호이스팅 없음 — 선언 전에 호출하면 오류.

3. 화살표 함수 (ES6+)

javascript
// 기본
const greet = (name) => {
  return `안녕하세요, ${name}님!`;
};

// 매개변수 1개일 때 괄호 생략
const double = n => n * 2;

// 본문 1줄일 때 중괄호·return 생략
const triple = n => n * 3;
const add = (a, b) => a + b;

4. 매개변수와 반환값

javascript
function calculateBMI(weight, height) {
  const bmi = weight / (height * height);
  return bmi.toFixed(1);
}

console.log(`BMI: ${calculateBMI(70, 1.75)}`);

// 반환값 없는 함수
function logMessage(msg) {
  console.log(`[LOG] ${msg}`);
  // return 없음 → undefined
}

5. 기본값 매개변수 (ES6+)

javascript
function greet(name = "손님", lang = "ko") {
  if (lang === "ko") return `안녕하세요, ${name}님!`;
  return `Hello, ${name}!`;
}

greet();              // "안녕하세요, 손님님!"
greet("홍길동");        // "안녕하세요, 홍길동님!"
greet("John", "en");  // "Hello, John!"

6. 스코프

javascript
const globalVar = "전역";

function outer() {
  const outerVar = "outer";

  function inner() {
    const innerVar = "inner";
    console.log(globalVar, outerVar, innerVar); // 모두 접근 가능 (클로저)
  }

  inner();
}

7. 콜백 함수

javascript
function doTask(task, callback) {
  console.log(`작업 시작: ${task}`);
  callback(task);
}

doTask("파일 저장", (task) => {
  console.log(`✅ ${task} 완료!`);
});

// setTimeout 같은 자주 쓰는 패턴
setTimeout(() => {
  console.log("1초 후 실행");
}, 1000);

배열

배열 생성·접근·수정 메서드(push, pop, shift, unshift, splice)와 강력한 고차함수(forEach, map, filter, find, includes, sort), 그리고 전개 연산자를 익힙니다.

1. 배열 생성과 접근

javascript
const fruits = ["사과", "바나나", "딸기", "포도"];

console.log(fruits[0]);                // "사과"
console.log(fruits[fruits.length - 1]); // 마지막

const mixed = [1, "hello", true, null, { name: "홍길동" }];

2. 배열 수정 메서드

javascript
const arr = ["A", "B", "C"];

arr.push("D");                  // ["A","B","C","D"], 새 length 반환
const last = arr.pop();         // "D", arr = ["A","B","C"]
arr.unshift("Z");               // ["Z","A","B","C"]
const first = arr.shift();      // "Z"

arr.splice(1, 1);               // ["A","C"]  인덱스 1에서 1개 제거
arr.splice(1, 0, "B");          // ["A","B","C"] 인덱스 1에 삽입
arr.splice(1, 1, "X", "Y");     // ["A","X","Y","C"] 교체

3. 고차 함수

forEach — 각 요소 작업 (반환 X)

javascript
[1,2,3].forEach((n, i) => console.log(`${i}: ${n}`));

map — 변환된 새 배열

javascript
const doubled = [1,2,3].map(n => n * 2);  // [2,4,6]
const upper = ["alice","bob"].map(n => n.toUpperCase());

filter — 조건 만족 요소만

javascript
const evens = [1,2,3,4,5,6].filter(n => n % 2 === 0); // [2,4,6]
const adults = users.filter(u => u.age >= 19);

find — 첫 번째 만족 요소

javascript
const user = users.find(u => u.id === 2);

includes

javascript
["사과","바나나"].includes("바나나"); // true

sort — 원본 변경

javascript
["Charlie","Alice","Bob"].sort();
// 숫자 정렬은 비교 함수 필수!
[10, 1, 100, 3].sort((a, b) => a - b);  // [1, 3, 10, 100]
[10, 1, 100, 3].sort((a, b) => b - a);  // 내림차순

4. 전개 연산자 (Spread)

javascript
// 복사 (원본과 독립)
const original = [1,2,3];
const copy = [...original];

// 합치기
const merged = [...[1,2,3], ...[4,5,6]];  // [1,2,3,4,5,6]

// 추가
const withExtra = [0, ...original, 4];    // [0,1,2,3,4]
예제 코드 / 강의 자료

전체 강의 자료와 예제 코드는 GitHub에서 자유롭게 받아볼 수 있습니다.

GitHub에서 보기 ↗

댓글 0

아직 댓글이 없습니다. 첫 댓글을 남겨 주세요.

댓글은 회원만 쓸 수 있습니다.

광고·욕설·비방·개인정보·불법 내용이 담긴 댓글은 숨기거나 지웁니다. 댓글은 닉네임과 함께 공개됩니다. 개인정보처리방침