JavaScript - 반복문, 함수, 함수 표현식과 화살표 함수, 스코프

icems0428 2025. 1. 13. 00:14

점점 자바스크립트만의 특별한 기능들에 대해 배우고 있다. 중첩 함수 선언, 호이스팅같은 C++과 다른 내용을 배울 때마다 신기하다. 자꾸 C++과 비교하는 내용이 나올텐데 양해 부탁한다. 아는 내용과 비교해야 그나마 재밌다. 🫠

반복문

for (let idx = 0; idx <= 10; idx++) {
  if (idx % 2 == 0) {
    continue;
  }
  console.log(idx);

  if (idx >= 5) {
    break;
  }
}

반복문은 일반적인 프로그래밍 언어 규칙과 같다.

함수

// 함수

let area1 = getArea(10, 20); // 인수
console.log(area1);

// 호이스팅
// -> 끌어올리다 라는 뜻
function getArea(width, height) {
  // 매개변수

  function another() {
    // 중첩 함수
    console.log("another");
  }

  another();
  let area = width * height;

  return area;
}

함수 선언은 function으로 시작하고, 리턴값이나 매개변수의 자료형을 적어주지 않아도 된다. 편하긴 한데 아직 어색하다.

자바스크립트 함수의 특별한 기능

1. 중첩 함수 선언이 가능하다. 보통 함수 정의는 독립적으로 해주는데 js에선 함수 내에 함수 정의가 가능하다!
2. **호이스팅**을 통해, 함수 정의 전에 함수를 호출할 수 있다. 호이스팅은 '끌어올리다'라는 뜻으로, 코드를 실행하기 전 선언문들을 최상단으로 끌어올려준다.

함수 표현식과 화살표 함수

// 1. 함수 표현식

function funcA() {
  console.log("funcA");
}

let varA = funcA;
varA();
//함수도 문자열과 같은 값으로 취급.

let varB = function () {
  console.log("funcB");
}; // 함수 선언문과 달리 표현식은 호이스팅 불가능.

varB();

// 2. 화살표 함수
let varC = (value) => {
  console.log(value);
  return value + 1;
};

console.log(varC(10));

함수 표현식 : 함수를 변수에 할당하는 형태로 작성하는 것을 말한다. 해당 함수는 값으로 취급되기 때문에 호이스팅 될 수 없고, 호출하려면 변수를 써야한다. (정확히는 변수 호이스팅만 되는데, 초기화는 호이스팅 되지 않기 때문에 값이 undefined가 된다.) 함수 이름은 별 의미가 없기 때문에 생략할 수 있다.
화살표 함수 : 함수를 간결하게 생성할 수 있는 방법이다. 함수 표현식에서 function을 지우고 매개변수가 들어가는 괄호 오른쪽에 => 를 추가한다. 함수 내용이 한 줄이면 중괄호 필요없이 let varC = (value) => value+1; 처럼 더욱 간결하게 작성할 수 있다.

편한 기능 많아서 좋다는 거 취소...

콜백함수

// 1. 콜백함수
function main(value) {
  value();
}

main(() => {
  console.log("i am sub");
});

// 2. 콜백함수의 활용
function repeat(count, callback) {
  for (let idx = 1; idx <= count; idx++) {
    callback(idx);
  }
}

repeat(5, function (idx) {
  console.log(idx);
});

repeat(5, (idx) => {
  console.log(idx * 2);
});

콜백함수란, 자신이 아닌 다른 함수에 인수로 들어간 함수를 말한다. 이렇게 말하면 이해가 잘 안될 수 있는데, 예시를 보는 게 좋다! 우리는 지난 시간에 함수를 숫자나 문자같은 값으로 취급할 수 있다고 배웠다. 그러므로 인수 자리에 함수를 (값으로써) 집어넣어 function repeat에서 콜백함수를 실행시킨다.

콜백함수는 코드의 중복성을 줄이는 장점이 있다. 원래대로라면 for문을 2번 사용해야 했기 때문이다. 반복하는 기능을 분리하고, 해당 값은 콜백함수에서 처리함으로써 성능을 높일 수가 있다. 추가로, 콜백 함수에서 함수 표현식이 유용하게 사용됨을 확인할 수 있다.

스코프

// 스코프
// -> 전역(전체 영역) 스코프 / 지역 (특정 영역) 스코프
// -> 전역 스코프 : 전체 영역에서 접근 가능
// -> 지역 스코프 : 특정 영역에서만 접근 가능

let a = 1; // 전역 스코프

function funcA() {
  let b = 2; // 지역 스코프
  console.log(a);
  //   function funcB() {
  //     console.log(a);
  //   } 함수 내 함수 선언식은 지역 스코프.
}

funcA();

if (true) {
  let c = 1;
}

for (let i = 0; i < 10; i++) {
  let d = 1;
}

// funcB();

함수 내에 선언된 변수는 지역 스코프를 가져서, 전역 스코프에서는 사용 불가능하다. 또한, 자바스크립트의 특별한 기능으로 함수 내에 함수 선언이 가능했었다. 함수 내 함수 선언문도 지역 스코프를 가진다. 그러나 나머지 if문이나 for문같은 곳에서는 지역 스코프를 가지지 않는다.

추가로 찾아보니 함수 내 함수 선언문은 블록 스코프를 갖는다고 하는데, 이는 함수 스코프와 조금 다른 개념이다. 블록 스코프란 말그대로 { } 내부가 범위가 되는 것을 말한다. 블록 스코프 개념은 함수 let, var, const와 관련이 있다. var이란 것이 함수 스코프를 갖는데, if문과 for문은 함수가 아니어서 초보자들에게 실수가 많았다고 한다. 그래서 let, const를 도입해 블록을 범위로 갖는 블록 스코프를 만들었다고.

아직 var이랑 let 차이도 모르고 있었는데.. 뒤에서 배우겠지만 미리 예습한 느낌이라 좋다. if문이랑 for문이 함수가 아니라는 것도.. 이제라도 알게 되어서 다행이다.