[JavaScript] 변수와 함수

SUYA·2025년 6월 30일
JavaScript위클리 페이퍼

📒 JavaScript

목록 보기
1/14
post-thumbnail

✅ 변수(Variable)

자바스크립트에서 사용되는 변수 선언 방식에는 3가지가 있다.
var, let, const 셋의 차이점은...

  • 중복 선언과 재할당
  • 스코프 범위
  • 호이스팅
    🌠 호이스팅(hoisting)이란? 스코프 내부 어디서든 변수 선언은 최상위에 선언된 것처럼 행동한다는 의미. 쉽게 말해 선언이 코드 맨 위로 끌어올려지는 것


var

var에서는 중복 선언과 재할당이 모두 가능하다.
마지막에 할당된 값이 최종 변수 값으로 저장.

📄 var 스코프

var는 함수 단위 범위.
var 변수가 선언된 함수 내부의 어디서든 참조가 가능하지만, 외부 참조는 불가능하다.

📄 var 호이스팅

호이스팅이 발생한다.

e.g.

console.log(a); // undefined
var a = 10;
console.log(a); // 10

JS 실행 전.
선언만 위로 올라가고 할당은 원래 위치에 남아있기 때문에 처음 출력은 undefined

var a;           // 선언이 호이스팅 됨
console.log(a);  // undefined (초기값은 undefined)
a = 10;         // 값 할당
console.log(a); // 10



let

변할 수 있는 값.
let은 중복 선언을 허용하지 않는다. 대신 재할당은 var와 동일하게 가능하다.

let a = 5;
let a = 10; // SyntaxError
// ----------------------- 
let a = 5;
console.log(a); // 5
a = 10;
console.log(a); // 10

📄 let 스코프

let은 블록 단위 범위
{} 블록 내부에 선언된 let은 외부에서 참조되지 않는다.

📄 let 호이스팅

let도 선언은 호이스팅 되지만, var와는 다르게 초기화 단계 전에는 사용할 수 없어, 뒤에서 선언된 변수를 앞에 참조하려니 에러가 발생한다.

console.log(b); // ReferenceError
let b = 20;
console.log(b);
let b;          // 선언은 호이스팅되지만 TDZ 때문에 초기화되는 시점 전까지 접근 불가
console.log(b); // 여기서 ReferenceError
b = 20;
console.log(b);

🌠 TDZ(Temporal Dead Zone)란?
일시적 사각지대라는 뜻. 선언된 변수가 선언 전에 접근 불가능한 구간


const

변하지 않는 값(상수).
const에서도 let과 동일하게 중복 선언을 허용하지 않는다.
상수를 선언하는 키워드이기 때문에 다른 변수들과 달리 재할당도 불가능하다.

//상수
const MY_NAME; 
// 일반 변수
const myName;

🌠 변수 선언에 let이 아닌 const를 사용하는 이유
let과 const의 가장 큰 차이는 재할당이 불가능 하다는 점. 코드를 일관되고 안전하게, 그리고 변하지 않는 값을 사용하기 위해 const 키워드로 변수 작성.

🌠 const는 상수인데 왜 일반적인 변수로 사용하는지
예를 들어, 검색 기능을 개발한다고 생각했을 때, 검색창에서 키워드를 입력 받는다.
검색창의 입장에서 입력되는 키워드는 항상 일정하지 않고, 누가 어떤 키워드로 입력할지 아무도 알 수 없다.
하지만 검색버튼을 눌러 정보를 검색하는 동작을 수행할 때는 입력한 키워드 값이 변할 일이 없고 변해서도 안된다.
결국, 검색 기능이 동작하는 시점에서는 사용자가 입력한 키워드는 '상수'이기 때문.

=> 대부분의 서비스는 날씨, 날짜, 사용자의 입력값에 따라 위와 같이 결국 상수로 쓰이는 경우가 더 많다.

🌠 변수와 상수를 구분하는 방법
변수의 이름은 기본적으로 영어 소문자+대문자 조합으로 작성하고, 상수의 이름은 영어 대문자+언더바 조합으로 작성해서 구분.

📄 const 스코프

const은 블록 단위 범위
{} 블록 내부에 선언된 let은 외부에서 참조되지 않는다.

📄 const 호이스팅

let과 동일하다.


📊 표 정리

varletconst
용도과거 코드, 함수 내 변수 선언값이 변경될 변수 선언상수 선언, 불변 참조 선언
재선언가능불가능
(같은 스코프 내)		불가능
(같은 스코프 내)
재할당가능가능불가능
(객체 프로퍼티는 변경 가능)
스코프함수 스코프블록 스코프블록 스코프
호이스팅선언 및 초기화 hoisting됨선언 hoisting만 됨선언 hoisting만 됨

// scope: 범위 영역
var globalVar = "전역 변수"; // 글로벌 변수, 전역 변수

function myFunction() { // 블록문
  var functionVar = "함수 내부 변수"; // 로컬 변수, 지역 변수, 함수 스코프
  console.log(globalVar); // 접근 가능
  console.log(functionVar); // 접근 가능

  if (true) {
    let blockVar = "블록 내부 변수"; // 블록 스코프
    console.log(blockVar); // 접근 가능
    console.log(functionVar); // 접근 가능
  }
  // console.log(blockVar); // 접근 불가
}

myFunction();
console.log(globalVar); // 접근 가능
// console.log(functionVar); // 접근 불가




✅ 함수(function)

함수를 사용해 코드를 재사용할 수 있다.

기본 함수 구문

function name (parameter1, parameter2,...) {
	...
}

함수가 받을 매개변수를 지정해 줄 수 있다.

function drink (cup) { // cup은 매개변수(parameter)
	...
}
drink("커피"); // 커피는 인자(argument): 실제로 전달하는 값

함수 선언식

function hello() {
  console.log("Hello!");
}
hello(); // "Hello!"

함수 표현식

함수 표현식이란, 변수를 선언하고 함수를 대입하는 방식

const bye = function() {
  console.log("Bye!");
}
bye(); // "Bye!"

🌠 함수 선언문 VS 함수 표현식 차이

함수 선언식과 표현식은 호이스팅의 차이가 있다.

  • 함수 선언문: 호이스팅 시, 함수 전체가 끌어올려짐 → 선언 전에 호출 가능(전역, 재사용)
  • 함수 표현식: 변수 선언만 호이스팅 됨 → 선언 전 호출 불가(콜백, 조건부)


다양한 함수의 형태

// 변수에 할당해서 활용
const printJS = function () {
  console.log('JavaScript');
};

// 객체의 메소드로 활용
const codeit = {
  printTitle: function () {
    console.log('Codeit');
  }
}

// 콜백 함수로 활용
myBtn.addEventListener('click', function () {
  console.log('button is clicked!');
});

// 고차 함수로 활용
function myFunction() {
  return function () {
    console.log('Hi!?');
  };
};

즉시 실행 함수

즉시 실행 함수는 말 그대로 선언과 동시에 실행이 이뤄지기 때문에 일반적으로 프로그램 초기화 기능에 많이 활용된다.
혹은 재사용이 필요 없는, 일회성 동작을 구성할 때 활용하기도 한다.

// 즉시 실행 함수(IIFE)
(function () {
  console.log('Hi!');
})();

// [초기화] 즉시 실행 함수의 활용
(function init() {
  // 프로그램이 실행 될 때 기본적으로 동작할 코드들..
})();

// [일회성] 즉시 실행 함수의 활용
const firstName = 'Young';
const lastName = 'Kang';

const greetingMessage = (function () {
  const fullName = `${firstName} ${lastName} `;

  return `Hi! My name is ${fullName}`;
})();

함수 선언

function add (x, y) {
  var result = x + y;
  console.log(result);
  return result;
}

함수 호출

add(3, 5);

함수 종료와 출력

return VS console.log()

  • return 문은 값을 호출한 자리에 반환
  • console.log() 는 주어진 인수를 출력

return문

return을 만나면 함수 실행이 즉시 종료됨
함수 밖으로 값을 내보내기 위해 사용.

1. 함수 실행 중단
num이 음수이면, return; 만 실행되어 함수가 바로 실행 종료

function checkNumber(num) {
  if (num < 0) {
    console.log("음수는 처리하지 않습니다.");
    return; // 여기서 함수 실행 종료
  }

  console.log("입력한 수의 제곱은:", num * num);
}

checkNumber(-5); // "음수는 처리하지 않습니다."
checkNumber(3);  // "입력한 수의 제곱은: 9"

2. 코드 무시

function sayHi() {
  console.log("안녕하세요!");
  return;
  console.log("이 코드는 실행될까요?");
}

sayHi(); // 안녕하세요!

파라미터의 기본값

함수의 파라미터는 기본값을 가질 수가 있다. 기본값이 있는 파라미터는 함수를 호출할 때 아규먼트를 전달하지 않으면, 함수 내부의 동작은 이 파라미터의 기본값을 가지고 동작.

function sayHi(name = 'Codeit') {
  console.log(`Hi! ${name}`);
}

sayHi('JavaScript'); // Hi! JavaScript
sayHi(); // Hi! Codeit

옵셔널 파라미터

함수의 파라미터 중에서 선택적으로 값을 전달받을 수 있는 파라미터.
함수 호출 시 해당 파라미터에 값을 전달하지 않아도 오류가 발생하지 않는다.

옵셔널 파라미터 특징: 선택적 입력, 기본값 설정, 유연성

function greet(name, greeting = "Hello") {
  console.log(`${greeting}, ${name}!`);
}

greet("Alice"); // 출력: Hello, Alice!
greet("Bob", "Hi"); // 출력: Hi, Bob!

arguments 객체

자바스크립트 함수 안에는 arguments라는 객체가 존재한다.
arguments 객체는 함수를 호출할 때 전달한 아규먼트들을 배열의 형태로 모아둔 유사 배열 객체.

🌠 함수를 호출할 때 전달되는 아규먼트의 개수가 불규칙적일 때 유용하게 활용될 수 있다.

function printArguments() {
  // arguments 객체의 요소들을 하나씩 출력
  for (const arg of arguments) {
    console.log(arg); 
  }
}

printArguments('Young', 'Mark', 'Koby');

Rest Parameter

arguments 객체를 이용하는 것 말고도 불규칙적으로 전달되는 아규먼트를 다루는 방법.
파라미터 앞에 마침표 세 개(...)를 붙여주면, 여러 개로 전달되는 아규먼트들을 배열로 다룰 수가 있게된다.

function printArguments(...args) {
  // args 객체의 요소들을 하나씩 출력
  for (const arg of args) {
    console.log(arg); 
  }
}

printArguments('Young', 'Mark', 'Koby');

다른 일반 파라미터들과 함께 사용되기도 한다.

🌠 이름 그대로 앞에 정의된 파라미터에 argument를 먼저 할당하고 나머지 argument를 배열로 묶는 역할을 하기 때문에 일반 파라미터와 함께 사용할 때는 반드시 가장 마지막에 작성해야 한다는 점.

function printRankingList(first, second, ...others) {
  console.log('코드잇 레이스 최종 결과');
  console.log(`우승: ${first}`);
  console.log(`준우승: ${second}`);
  for (const arg of others) {
    console.log(`참가자: ${arg}`);
  }
}

printRankingList('Tommy', 'Jerry', 'Suri', 'Sunny', 'Jack');

Arrow Function

익명 함수를 좀 더 간결하게 표현할 수 있도록 ES2015에서 새롭게 등장한 함수.

선언 방식표현식으로 함수를 정의할 때 활용될 수도 있고 콜백 함수로 전달할 때 활용할 수도 있다.

// 화살표 함수 정의
const getTwice = (number) => {
  return number * 2;
};

// 콜백 함수로 활용
myBtn.addEventListener('click', () => {
  console.log('button is clicked!');
});

다양한 상황에 따라 축약형으로 작성

// 1. 함수의 파라미터가 하나 뿐일 때
const getTwice = (number) => {
  return number * 2;
};

// 파라미터를 감싸는 소괄호 생략 가능
const getTwice = number => {
  return number * 2;
};

// 2. 함수 동작 부분이 return문만 있을 때
const sum = (a, b) => {
  return a + b;
};

// return문과 중괄호 생략 가능
const sum = (a, b) => a + b;

🌠 일반 함수와의 차이점
가장 대표적인 차이점은 arguments 객체가 없고, this가 가리키는 값이 일반 함수와 다르다는 점.

this

웹 브라우저에서 this가 사용될 때는 전역 객체, Window 객체를 가지게 된다. 하지만 객체의 메소드를 정의하기 위한 함수 안에선 메소드를 호출한 객체를 가리키게 된다.

const user = {
  firstName: 'Tess',
  lastName: 'Jang',
  getFullName: function () {
    return `${this.firstName} ${this.lastName}`;
  },
};

console.log(user.getFullName()); // getFullName 안에서의 this는 getFullName을 호출한 user객체가 담긴다!

(참고) 함수 이름 지정

아래와 같이 함수의 기능을 설명하는 네이밍 규칙을 만들면 좋을 것 같아서 가져왔다.

show.. : 무언가를 보여준다.
get.. : 값을 반환한다.
calc.. : 무언가를 계산한다.
create.. : 무언가를 만든다.
check.. : 무언가를 확인하고 불리언 등을 반환한다.

showMessage(..)		// shows a message
getAge(..)			 // returns the age (gets it somehow)		
calcSum(..)			// calculates a sum and returns the result
createForm(..)		 // creates a form (and usually returns it)
checkPermission(..)	// checks a permission, returns true/false



참고자료

코드잇 토픽
var | MDN
Function | W3Schools
Function | MDN

profile
SUYA
기술 블로그
다음 포스트

[JavaScript] 자료형(Data type)

0개의 댓글