2023- 05 - 14 함수, 전역변수, 지역변수, 화살표함수

 

오늘 할일

자바스크립트 1강 듣기

 

오늘 배운 것

함수, 전역변수, 지역변수, 화살표함수

 

함수 (function)라는 뜻은 어떤 기능을 의미함 (input, output을 갖고있는 어떤 기능의 단위.)
입력(input)은 매개변수값으로, 출력(output)은 return값으로 함

함수는 크게 1.함수 선언문 형태, 2. 함수 표현식 형태 두 가지가 있다.

 

1. 함수 선언문 형태 (function declaration)

   function add (매개변수input) {
      //함수 내부에서 실행할 로직(Main Logic)
   }

function add(x, y) {
    return x + y;
  }
 
 console.log(add(2, 3));   // 5

위의 예제에서는 function 키워드를 사용하여 add라는 함수를 선언하였다. 함수 선언문을 사용하면 함수를 미리 정의해두고, 필요할 때 호출할 수 있다.

 
2. 함수 표현식 형태 (function expression)

let add = function(x, y) {
    return x + y;
  }
  
  console.log(add(2, 3));   // 5

위의 예제에서는 function 키워드를 사용하여 add라는 변수에 함수를 할당하였다. 함수 표현식을 사용하면 함수를 변수에 할당하여 익명 함수를 생성할 수 있다.

 

 
함수의 호출 (함수를 호출한다 = 함수를 사용한다)

function add(x, y) {
    return x + y;
  }
  
  console.log(add(2, 3));   // 5

위의 예제에서는 add라는 함수를 호출하여 결과값을 반환한다. 함수를 호출할 때는 함수 이름 뒤에 괄호를 사용한다.

함수 선언문 형태


function add (x, y) {
    return x + y;
};

let functionResult = add(3, 4);
console.log(functionResult);  

// 7

함수 표현식 형태


let add = function (x, y) {
    return x + y;
};
let functionResult = add(10, 20);
console.log(functionResult);  


// 30

 
// 함수의 input => 매개변수 (매개체가 되는 변수)
// 함수의 output => return문 뒤에 오는 값: 반환값

 

 

 

스코프 : 변수의 영향범위. 주로 함수의 중괄호정도 까지.
전역변수 : 변수가 전체 영역에서 영향을 미칠 때
지역변수 : 변수가 함수 내에서만 영향을 미칠 때

 

 

1. 전역변수:  x가 함수 외부에서 선언됨 (전체에 영향 미침, 전역변수)

let x = 10;

function printX(){
    console.log(x);
}

console.log(x);   // 10
printX();         // 10

 

2. 지역변수 : x가 함수 내부에서 선언됨 (함수 지역에만 영향미침, 지역변수)

이 경우, x가 정의되지 않은 상태에서 함수가 시작되므로 undefined 됨.

 

function printX(){
    let x = 10;
    console.log(x);
}

console.log(x);
printX();

// undefined

 

 

3. 화살표 함수 ( ES6 신 문법)

전통적 함수 형태

function add (x, y){
    return x + y;
}
console.log (add(3,4)); // 7

화살표 함수 형태

let arrowFunc = (x, y) => {
    return x + y;
}

console.log(arrowFunc(3, 4))  // 7

한줄로 쓰기 (중괄호 안이 한줄이면 중괄호 지우고 return도 생략가능)

let arrowFunc = (x, y) => x + y;

console.log(arrowFunc(5,6)) // 11;

매개변수가 1개일 경우 소괄호도 생략가능

let testFunc = x => x;

console.log(testFunc(3)) // 3