1. 함수란?

함수는 특정 작업을 수행하는 코드의 묶음이다.

필요할 때 호출하여 재사용할 수 있다.

• 코드 재사용
• 가독성 향상
• 유지보수 용이

1) 기본 함수 정의문

function greet() {
	console.log("Hello");
}

호출

greet();

2) 매개 변수가 있는 함수

function add(a, b) {
	return a + b;
}

add(3, 5);

• a, b → 매개변수(Parameter)
• 3, 5 → 인수(Argument)

3) 매개 변수 없이 전달 값 받기

arguments 객체를 사용할 수 있다.

function sum() {
	console.log(arguments[0] + arguments[1]);
}

sum(2, 3);

※ ES6 이후에는 Rest Parameter 권장

function sum(...nums) {
	return nums.reduce((a, b), => a + b);
}

2. return문

• 값을 호출한 곳으로 반환
• 함수 실행 즉시 종료

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

강제 종료 예시

function test() {
	console.log("실행");
    return;
    console.log("이 코드는 실행되지 않음.");
}

3. 재귀 함수

함수 내부에서 자기 자신을 호출하는 구조

function factorial(n) {
	if (n === 1) return 1;
    return n * factorial(n - 1);
}

종료 조건이 반드시 필요하다.

4. 함수 스코프(Scope)

스코프(Scope)는 변수의 유효 범위를 의미한다.

1) 전역 변수

함수 외부에서 선언한다.

let globalVar = 10;

• 어디서든 접근 가능
• 남용 시 충돌 위험

2) 지역 변수

함수 내부에서 선언한다.

function test() {
	let localVar = 5;
}

• 함수 내부에서만 접근 가능

ℹ️ 전역 변수 vs. 지역 변수

3) 전역 함수 vs. 지역 함수

전역 함수

function globalFunc() {}

어디서든 호출 가능

지역 함수

function outer() {
	function inner() {
    	console.log("내부 함수");
    }
}

inner는 outer 내부에서만 사용 가능

4) 전역과 지역을 나누는 이유

• 변수 충돌 방지
• 메모리 효율 관리
• 코드 안정성 확보
• 모듈화

5. 객체 생성자 함수

객체를 여러 개 만들기 위한 템플릿 역할을 한다.

function Person(name, age) {
	this.name = name;
    this.age = age;
}

사용

let p1 = new Person("John", 30);

1) 생성자 함수의 활용

• 동일 구조 객체 반복 생성
• 인스턴스별 데이터 관리

2) 프로토타입(Prototype)

생성자 함수 내부에 메서드를 작성하면 객체마다 메서드가 새로 생성된다.

function Person(name) {
	this.name = name;
    this.sayHello = function() {
    	console.log("Hi");	
   };
}

비효율적이다.

프로토타입의 사용

Person.prototype.sayHello = function() {
	console.log("Hi");
};

• 메서드를 공유
• 메모리 절약
• 성능 향상

6. JavaScript 내장 함수

JavaScript는 기본적으로 여러 전역 함수를 제공한다.

JavaScript는 객체 기반(Object-Based) 언어다.

거의 모든 것이 객체로 구성되어 있다.

1. 객체란?

객체는 속성(Property)과 기능(Method)을 하나로 묶은 데이터 구조다.

let person = {
	name = "John",
    age = 30,
    greet : function() {
    	console.log("Hello");
    }
};

• name, age →  속성
• greet() → 메서드

객체는 현실 세계의 개념을 프로그램 안에서 표현한 구조라고 볼 수 있다.

2. 객체의 종류

JavaScript 객체는 크게 세 가지로 나뉜다.

1. 사용자 정의 객체
2. 내장 객체
3. 브라우저 객체(BOM)

3. 내장 객체(Built-in Object)

JavaScript가 기본적으로 제공하는 객체들이다.

1) 내장 객체 생성 방법

let obj1 = new Object();
let arr = new Array();
let date = new Date();

또는 리터럴 방식이 더 많이 사용된다.

let arr = [];
let obj = {};

2) 날짜 정보 객체(Date)

날짜와 시간 처리

let today = new Date();

주요 메서드

today.getFullYear();
today.getMonth();
today.getDate();
today.getDay();
today.getHours();

특징

• 월은 0부터 시작(1월 = 0)
• 요일은 0-6(일요일 = 0)

3) 수학 객체(Math)

수학 계산용 객체로, 객체 생성 없이 바로 사용한다.

Math.PI
Math.abs(-10)
Math.max(3, 5)
Math.random()
Math.floor(3.7)

4) 배열 객체(Array)

여러 데이터를 순서대로 저장한다.

let arr = [1, 2, 3];

주요 메서드

arr.push(4);
arr.pop();
arr.length;
arr.splice(1, 1);
arr.indexOf(2);

5) 문자열 객체(String)

문자열을 처리한다.

let str = "JavaScript";

주요 메서드

str.length;
str.charAt(0);
str.substring(0, 4);
str.indexOf("S");
str.toUpperCase();

4. 브라우저 객체 모델(BOM)

BOM은 브라우저를 제어하기 위한 객체 집합이다.

1) 브라우저 객체란?

웹 브라우저 자체를 객체로 다루는 구조다.

최상위 객체는 window다.

2) window 객체

모든 브라우저 객체의 최상위 객체

window.alert("Hello");

window는 생략 가능하다.

alert("Hello");

3) 일정한 간격으로 코드 실행하기

setTimeout(function()) {
	console.log("3초 후 실행");
}, 3000);

setInterval(function() {
	console.log("1초마다 실행")
}, 1000)

• setTimeout → 한 번 실행
• setInterval → 반복 실행

4) screen 객체

사용자의 화면 정보를 제공한다.

screen.width;
screen.height;
screen.availWidth;
screen.availHeight;

5) location 객체

현재 URL 정보 및 이동을 제어한다.

location.herf;
location.reload();
location.assign("onseyoo.tistory.com");

6) history 객체

브라우저 방문 기록을 제어한다.

history.back();
history.forward();
history.go(-1);

7) navigator 객체

브라우저 및 운영 체제 정보를 제공한다.

navigator.userAgent;
navigator.platform;
navigator.language;

객체(Object)

├─ 사용자 정의 객체

├─ 내장 객체 (Date, Math, Array, String 등)

└─ 브라우저 객체 (window, location, history 등)

프로그램은 기본적으로 위에서 아래로 순차 실행된다.

하지만 모든 코드가 항상 같은 흐름으로 실행되지는 않는다.

• 조건에 따라 실행을 분기하거나
• 같은 작업을 반복해야 하는 경우

이처럼 코드의 실행 흐름을 제어하는 문법을 제어문이라고 한다.

JavaScript의 제어문은 크게 다음과 같다.

1. 조건문
2. 선택문
3. 반복문

1. 조건문(if)

조건이 참(true)일 때 특정 코드를 실행한다.

1) if문

if (조건식) {
	실행문;
}

let age = 20;
if (age >= 19) {
	console.log("성인입니다.");
}

2) if - else

조건이 거짓일 경우 실행할 코드를 지정한다.

if (age >= 19) {
	console.log("성인");
} else {
	console.log("미성년자");
}

3) else if

여러 조건을 순차적으로 검사한다.

let score = 85;

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

위에서부터 조건을 검사하며,

처음으로 true가 되는 블록만 실행된다.

4) 중첩 if

if문 안에 또 다른 if문을 사용하는 구조

if (age >= 19) {
	if (gender === "male") {
    	console.log("성인 남성");
    }
}

중첩이 깊어질 수록 가독성이 떨어지므로 주의해야 한다.

2. 선택문(switch)

하나의 값을 여러 경우와 비교할 때 사용한다.

switch (값) {
	case 값1;
    실행문;
    break;
    
    case 값2;
    실행문;
    break;
    
    default :
    실행문;
}

let menu = 1;

switch (menu) {
	case 1;
    console.log("아메리카노");
    break;
    
    case 2;
    console.log("라떼");
    break;
    
    default :
    console.log("기타");
}

주의 사항

• break를 쓰지 않으면 아래 case로 계속 실행된다.
• 값 비교는 엄격 비교(===) 기반으로 동작한다.

3. 반복문(Loop)

같은 코드를 여러 번 실행할 때 사용한다.

1) while문

조건이 참인 동안 반복

let i = 0;

while (i < 5) {
	console.log(i);
    i++;
}

조건이 처음부터 false면 실행되지 않는다.

2) do while문

최소 한 번은 실행된다.

let i = 0;
do {
	console.log(i);
    i++;
} while (i < 5);

조건을 나중에 검사한다는 점이 다르다.

3) for문

반복 횟수가 명확할 때 사용한다.

for (초기 값; 조건식; 증감식) {
	실행문;
}

for (let i = 0; i < 5; i++) {
	console.log(i);
}

가장 많이 사용되는 반복문이다.

4) break

반복문을 즉시 종료한다.

for (let i = 0; i < 10; i++) {
	if (i === 5) break;
}

5) continue

현재 반복을 건너뛰고 다음 반복으로 이동

for (let i = 0; i < 5; i++) {
	if (i === 2) continue;
    console.log(i);
}

6) 중첩 for

for문 안에 또 다른 for문을 사용하는 구조이다.

for (let i = 0; i < 3; i++) {
	for (let j = 0; j < 3; j++) {
    	console.log(i, j);
    }
}

2차원 구조 처리, 테이블 생성 등에 사용된다.

JavaScript는 문법이 비교적 간단하지만,

동적 타입 언어이기 때문에 주의해야 할 부분이 많다.

1. 선언문

JavaScript 코드는 <script> 태그 안에서 작성한다.

<script>
	console.log("Hello JavaScript");
</script>

내부 스크립트

HTML 문서 내부에 직접 작성

<script>
 alert("Hello");
</script>

외부 스크립트 분리

유지보수를 위해 JS 파일을 따로 분리하는 것이 일반적이다.

<script src="main.js"></script>

• 보통 <body> 끝 부분에 위치
• 또는 defer 속성 사용

<script src="main.js" defer></script>

2. 주석

코드 설명을 위한 문법

//한 줄 주석
/*
여러 줄 주석
*/

3. 코드 작성 시 주의 사항

1. 대소문자 구분
2. 세미콜론(;)은 자동 삽입되지만, 명시 권장
3. 변수 선언 없이 사용 금지
4. 전역 변수 남용 금지
5. let, const 사용 권장 (var 지양)

4. 변수

JavaScript는 동적 타입 언어다.

변수 선언

var a = 10;
var b = 20;
const c = 30;

var vs. let vs. const

현대 JavaScript에서는 let, const 사용이 표준이다.

자료형

JavaScript의 기본 자료형

• Number
• String
• Boolean
• Null
• Undifined
• Object
• Symbol
• BigInt

typeof 연산자

자료형 확인

typeof 10; //number
typeof "Hello"; //string

주의 사항

let  x;
console.log(x); //undifined

• undifined : 값이 할당되지 않음
• null : 의도적으로 비어 있음

5. 연산자

연산자는 값을 계산하거나 비교하는 기호다.

1) 산술 연산자

10 % 3; //1

2) 문자 결합 연산자

+는 문자열 연결에도 사용된다.

"Hello" + "World";

3) 대입 연산자

4) 증감 연산자

let a = 5;
a++;
a--;

5) 비교 연산자

권장 : === 사용

5 == "5"; //true
5 === "5"; //false

6) 논리 연산자

7) 연산자 우선 순위

기본 우선 순위

1. 괄호()
2. 증감
3. 산술
4. 비교
5. 논리
6. 대입

가독성을 위해 괄호 사용 권장

8) 삼항 조건 연산자

조건에 따라 값을 반환

조건 ? 참일 때 : 거짓일 때;

let result = (age >= 19) ? "성인" : "미성년자";

JavaScript란 웹 브라우저에서 동작하는 프로그래밍 언어다.

현재는 브라우저를 넘어 서버(Node.js), 모바일, 데스크탑까지 확장된 범용 언어로 사용된다.

처음에는 단순한 웹 페이지 동작 제어용 스크립트 언어였지만,

지금은 프론트엔드 생태계의 중심 언어다.

1. JavaScript의 정의

JavaScript는 동적인 웹 페이지를 만들기 위한 스크립트 언어다.

• HTML → 구조
• CSS → 스타일
• JavaScript → 동작

ex.

• 버튼 클릭 이벤트 처리
• 입력 값 검증
• 화면 동적 변경
• 비동기 서버 통신(AJAX)

2. Java와의 차이

이름은 비슷하지만 완전히 다른 언어다.

JavaScript는 실행 시점에 타입이 결정되는 동적 타입 언어다.

3. 실행 방식

• Chrome → V8 엔진
• Firefox → SpiderMonkey
• Edge → Chakra

HTML 안에 직접 작성하거나, 외부 파일로 분리할 수 있다.

<script>
	console.log("Hello, World");
</script>

4. JavaScript의 특징

1) 동적 타입

let x = 10;
x = "문자열";

타입을 명시하지 않아도 된다.

2) 함수형 프로그래밍 지원

함수를 변수처럼 사용할 수 있다.

functionh add(a, b) {
	return a + b;
}

또는

const add = (a, b) => a + b;

3) 비동기 처리

JavaScript는 기본적으로 이벤트 처리 + 비동기 처리 구조다.

• setTimeout
• Promise
• async/await

4) DOM 제어

JavaScript는 HTML 요소를 직접 제어할 수 있다.

document.getElementById("title").innerText = "변경";

5. 왜 중요한가?

• 모든 웹 브라우저가 지원
• 프론트엔드 표준 언어
• React, Vue, Angular 등 프레임워크 기반
• Node.js로 서버 개발 가능

웹 개발을 한다면 반드시 다루게 되는 언어다.

배경 설명

회사 소개

서비스 이해도 높이기

문제 정의

Front-End 기획

Back-End 기획

로드맵

1. 일반 사용자 Role 기능 명세서

2. 인사팀 사용자 Role