[2024.08.01 TIL] JS 변수 및 함수

JavaScript의 변수 선언

• var - 초기값을 지정하지 않는 다면 Undefined 값을 가진다. scope는 function scope.
  변수가 선언되기 전에도 유효. 단, 값은 hoisting 되지 않는다. (전역 변수)
  hoisting = 코드를 실행하기 전 함수, 변수, 클래스 또는 임포트의 선언문을 해당 범위의 맨 위로 끌어올리는 것처럼 보이는 현상.

  var scope = global;
  function a () {
  	console.log(scope); //Undefined
  	var scope = local;
    console.log(scope); //local
  }

  함수 밖에서 값을 초기화해도 함수 안에서 정의만 hoisting된다.
  단, 함수 표현식에서는 hoisting 되지 않는다.

  ex(); // error not a function
  var ex = function () {
  	console.log(exex);
  }

• let - 변수가 선언된 블록{}, 표현식 등의 내부에서만 유효. (block scope)

  let i, j;

  한 번에 여러 개의 변수 선언 가능. 값을 초기화 하지 않을 경우 Undefined 값을 가진다.
• const - let과 같은 scope인 block scope. 선언 시 값을 초기화 해주어야한다.

  const NUM1 = 1;

  상수이므로 값을 재할당 할 수 없고 다시 선언할 수 없다.
  관습적으로 선언 시 대문자를 사용한다.

JavaScript의 함수

• 함수란? - 반복되는 코드를 하나로 묶거나, 의미를 부여하고 역할을 나누기 위해서 사용.

  //기본 구조
  function function_name (인자1, 인자2) {
  	//명령문
  }
  
  function_name(인수1, 인수2); //명령문 실행

  인자(매개변수 / Parameter) - 함수를 호출할 때 전달 받기 위해 지정한 변수.
  인수(Argument) - 인자에 전달하는 값.
  함수는 return 키워드로 값 반환.

• JS에서 함수 만드는 법

  //함수 선언식 
  function a () {
  	return "a";
  }
  
  //함수 표현식
  const b = function () {
  	return "b";
  }

  작동 방식의 차이는 없지만 함수 선언식은 hoisting의 영향을 받고 함수 표현식은 받지 않는다.

  //arrow function(화살표 함수) - 단순하고 간결
  const a = () => {
  	return "a";
  }
  //implicit return(암시적 반환) - 반환 값을 한줄로 표현할 수 있으면 return 생략
  const a = () => "a";

  //기본 함수 표현식
  const a = (b) => {
  	return <div>{b}<div>
  }
  {array.map(a)}
  
  //익명 함수로 표현
  {array.map((b)=> <div>{b}<div>)

  코드가 직관적임. 익명 함수와 암시적 반환 가능