Javascript 자바스크립트 함수 기초설명
페이지 정보
조회 59회
본문
자바스크립트 함수 기초설명
| 구분 | 선언 방식 (Syntax) | 특징 및 주요 개념 |
| 함수 선언문 | function name() { ... } | 가장 기본적인 방식. 호이스팅이 발생하여 선언 전에도 호출 가능합니다. |
| 함수 표현식 | const name = function() { ... } | 함수를 변수에 할당하는 방식. 호이스팅이 발생하지 않아 선언 후에만 호출 가능합니다. |
| 화살표 함수 | const name = () => { ... } | ES6에서 도입된 간결한 문법. this 바인딩 방식이 일반 함수와 다르며 생성자로 사용할 수 없습니다. |
| 매개변수 (Parameters) | function(a, b = 10) | 함수로 전달되는 입력값. 기본값(Default)을 설정하거나 rest 파라미터(...args)를 쓸 수 있습니다. |
| 반환값 (Return) | return value; | 함수의 실행을 종료하고 결과를 함수 밖으로 내보냅니다. 생략 시 undefined를 반환합니다. |
| 익명 함수 | function() { ... } | 이름이 없는 함수. 주로 콜백 함수나 즉시 실행 함수(IIFE)에서 일회성으로 사용됩니다. |
| 콜백 함수 | otherFunc(callback) | 다른 함수의 인자로 전달되어 특정 시점에 실행되는 함수입니다. |
자바스크립트 명령어 (함수)
1. 데이터 입출력 및 디버깅
사용자와 소통하거나 코드가 잘 돌아가는지 확인할 때 씁니다.
명령어 | 역할 | 비고 |
console.log() | 브라우저 콘솔에 내용을 출력 | 개발자가 가장 많이 쓰는 명령어 |
alert() | 알림창 띄우기 | 사용자에게 메시지 전달 |
prompt() | 값을 입력받는 창 띄우기 | 입력받은 값은 항상 문자열 |
confirm() | 확인/취소 선택창 띄우기 |
|
2. 자료형 변환 (Type Casting)
데이터의 성질(문자 ↔ 숫자)을 바꿀 때 씁니다.
명령어 | 역할 | 예시 |
Number() | 데이터를 숫자형으로 변환 |
|
String() | 데이터를 문자열로 변환 |
|
Boolean() | 데이터를 논리형으로 변환 |
|
parseInt() | 문자열을 정수(Integer)로 변환 |
|
parseFloat() | 문자열을 실수(Float)로 변환 |
|
3. 데이터 분석 및 제어
값의 상태를 확인하거나 흐름을 바꿀 때 씁니다.
명령어 | 역할 | 비고 |
typeof | 데이터의 자료형 확인 |
|
isNaN() | 값이 숫자인지 아닌지 확인 | "Is Not a Number?"의 약자 |
eval() | 문자열로 된 코드를 실행 | (보안상 주의) 실무에선 거의 안 씀 |
4. 수학 관련 명령어 (Math 객체)
복잡한 수식을 계산할 때 사용합니다.
명령어 | 역할 | 예시 |
Math.random() | 0~1 사이의 랜덤 숫자 생성 | 로또 번호 생성 등에 활용 |
Math.round() | 반올림 |
|
Math.floor() | 내림 (버림) |
|
Math.ceil() | 올림 |
|
Math.max() | 여러 값 중 최대값 찾기 |
|
5. 문자열 조작 명령어 (Methods)
문자를 자르거나 합칠 때 씁니다.
명령어 | 역할 | 예시 |
.length | 문자열의 길이를 반환 |
|
.toUpperCase() | 대문자로 변환 |
|
.split() | 특정 기호 기준으로 자르기 |
|
.replace() | 특정 문자를 다른 문자로 교체 |
|
자바스크립트 매개변수(Parameter) 핵심 정리
구분 | 명칭 | 설명 | 코드 예시 |
정의 | 매개변수 (Parameter) | 함수를 정의할 때 외부로부터 전달받을 값을 저장하기 위해 선언하는 변수 |
|
실행 | 전달인자 (Argument) | 함수를 실제로 호출할 때 매개변수에 전달하는 실제 값 |
|
기본값 | Default Parameter | 인자가 전달되지 않았을 때 매개변수에 할당될 초기값 설정 | function(name = "손님") |
가변 인자 | Rest Parameter | 정해지지 않은 수의 인자들을 하나의 배열로 묶어서 받음 | function(...args) |
전달 방식 | 값에 의한 전달 | 원시 타입(숫자, 문자 등)은 값을 복사해서 전달 (원본 영향 X) | let x = 10; func(x); |
전달 방식 | 참조에 의한 전달 | 객체나 배열은 주소값을 전달 (함수 내 수정 시 원본 영향 O) | let obj = {a:1}; func(obj); |
유효 범위 | 지역 변수 | 매개변수는 함수 내부에서만 사용할 수 있는 지역 변수임 | - |
자바스크립트 스코프(Scope) 종류
구분 | 유효 범위 | 특징 |
전역 스코프 (Global Scope) | 코드 전체 (어디서든 접근 가능) | 함수 밖에서 선언된 변수. 프로그램이 끝날 때까지 메모리에 남아 있습니다. |
함수 스코프 (Function Scope) | 특정 함수 내부 |
|
블록 스코프 (Block Scope) | 중괄호 |
|
let target = "전역변수"; // 전역변수 function example() { let local = "지역변수"; // 지역변수
console.log(target); // 접근 가능 ("전역변수") console.log(local); // 접근 가능 ("지역변수") } example(); console.log(target); // 접근 가능 ("전역변수") console.log(local); // 에러! (함수 밖에서는 지역변수를 찾을 수 없음) |
전역변수 vs 지역변수 비교
구분 | 전역변수 (Global Variable) | 지역변수 (Local Variable) |
선언 위치 | 함수 외부 (코드의 최상단 등) | 함수 또는 블록( |
사용 범위 | 코드 전체 (어디서든 접근 가능) | 선언된 함수나 블록 내부에서만 가능 |
생존 기간 | 프로그램이 시작될 때 생성 ~ 종료될 때까지 | 함수가 호출될 때 생성 ~ 실행 종료 시 소멸 |
메모리 | 프로그램 종료 시까지 메모리 점유 | 사용이 끝나면 메모리에서 즉시 해제 |
위험성 | 이름 충돌 가능성이 높고 관리가 어려움 | 외부에서 접근이 불가능하여 안전함 |
- 다음글자바스크립트 - while 문 / do ~ while 문 26.03.01