[Javascript] 4. 함수 - 함수선언식/함수표현식/스코프/화살표함수/arguments

1. 함수 정의하기

// 1-1. 함수 선언식 : 익명함수를 만들 수 없음.
function add(x, y) {      // add라는 함수 선언
  return x + y;           
}

console.log(add(2, 3));    // 5

 

function 함수명   (  )  {실행할 문장}

function 함수명   (매개변수1, 매개변수2 ... )  {실행할 문장} 

 

 

// 1-2. 함수 표현식 : 익명함수를 어떤 변수에 할당하는 건 함수를 선언한다고 하지 않고, 함수를 표현한다고 한다.
let add = function(x, y) {      // add 라는 변수에 함수 할당, 익명 함수(이름이 없는) 생성 가능
  return x + y;                 // 익명함수를 선언함과 동시에 add라는 변수에 할당
}

console.log(add(2, 3));   // 5


// --> 함수 표현식은 hoisting이 되지 않는다. **

 

let 변수명 = function (  )  {실행할 문장}

let 변수명 = function ( 매개변수1, 매개변수2 ... )  {실행할 문장}

 

 

2. 함수 호출하기

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

console.log(add(2, 3));   // 5

// --> add 라는 함수를 호출하여 결과값을 반환한다. 함수를 호출할 때는 함수 이름뒤에 괄호로 사용

 

 

3. 함수 매개변수와 반환값

// 3-1. 함수 매개변수
function add(x, y) {
  return x + y;
}

console.log(add(2, 3));   // 5
// --> add라는 함수가 x와 y라는 두 개의 매개변수를 받아들이고, 함수를 호출할 때는 매개 변수에 값을 전달한다.



// 3-2. 함수 반환값
function add(x, y) {
  return x + y;
}

let result = add(2, 3);
console.log(result);   // 5
// --> add라는 함수가 x와 y라는 두 개의 매개변수를 받아들이고, 이를 더한 값을 반환한다.
//     함수를 호출한 결과값에 변수를 할당하여 사용할 수 있다

 

 

4. 스코프

함수가 실행될 때, 함수 내에서 변수에 접근할 수 있는 범위를 뜻한다.

자바스크립트에서는 2가지의 스코프 타입이 있다

 1. 전역스코프 global scope : 전역에 선언되어있어서 어느 곳에서든지 해당 변수에 접근할 수 있다.

 2. 지역 스코프 local scope : 해당 지역에서만 접근할 수 있어서 지역을 벗어난 곳에선 접근이 불가하다.

// 4-1. 함수스코프(var)
// 자바스크립트는 기본적으로 함수 스코프를 따른다
// --> 새로운 함수가 생성될 때마다 새로운 스코프 생성, 
//     함수 몸체에 선언한 변수는 해당 함수 몸체 안에서만 접근 가능

function main() {
  var x = 'hi';
  }

 console.log(x);
 
 main();   //  출력이 안된다

// 에러 해결
function main() {
  var x = 'hi';
  console.log(x);
 }

 main();   // hi 가 출력된다! 함수 몸체에 선언했기 때문에 해당 몸체 안에서 접근 가능!


// if 문
function main() {
    if (true) {
        var x = 'hi';
        console.log(x);
    }
}

main();  // --> hi 출력


function main() {
    if (true) {
        var x = 'hi';
    }
    console.log(x);
  }

main();  // --> hi 출력


// --> if 블럭 안이든 밖이든 var 키워드를 사용해서 선언된 변수는 자동으로 함수스코프를
       가지고 있기 때문에 가능


//-------------------------------------------------------------------------------------

// 4-2. 블록 스코프(let, const)

function main() {
    if (true) {
        let x = 'hi';
    }
    console.log(x);
  }

main();  // 에러가 남.

// 에러 해결
function main() {
    if (true) {
        let x = 'hi';
        console.log(x);
    }
  }

  main();  // --> hi 출력, var 키워드를 사용해서 선언된 변수는 더 이상 함수스코프가 아니라 
                  블록스코프이기 때문이다. 변수가 선언된 블록(if 블록) 내부에서만 가능


function main() {
    let x = 'hello';
    if (true) {
        let x = 'hi';
    }
    console.log(x);
  }

  main();   // --> hello 출력, hi는 if문 안에서만 유효하기 때문
  
  
  function main() {
    let x = 'hello';
    if (true) {
        let x = 'hi';
        console.log(x);
    }
  }

  main(); // --> hi 출력


//-------------------------------------------------------------------------------------


// 4-3 전역 범위(global scope)
// window는 전역 개체! 

  var aVAr = 'varHello';
  let aLet = 'letHello';

  console.log(window);
 // --> 콘솔 창에 window 객체에 등록이 되고 "varHello" 가 찍힌다
 // --> let은 등록안됨

 

참고한 유튜브 :

https://www.youtube.com/watch?v=_zMVlKxmWHg 

 

5. 화살표 함수(기본 - 문법의 간결함!) 

(   )  =>  {   }

// 화살표 함수로 바꾸기
// 1. function 을 지우고
// 2. () {} 사이에 화살표 => 넣기

const main = function() {
    console.log("hello")
    }

main();


const main = () => {
    console.log("hello")
    }

main(); 


//--------------------------------------

function add(a, b) {
    return a + b;
}

add();



const add = (a, b) => a + b   // 한 줄 일 때, return과 중괄호{} 지우기 가능

add();


//--------------------------------------

const main = () => {   
    console.log("hello")
}


const main = () => console.log("hello")   // 한 줄 일 때, 중괄호 지우기 가능


//--------------------------------------

function print(text) {
    console.log(text)
}

print("hi")



const print = (text) => console.log(text)  // 한 줄이니까 중괄호 생략

print("hi")


const print = text => console.log("text") // 매개변수가 하나일 때, 소괄호 생략 가능
                                          // 매개변수가 없을 때, () 일 때에는 생략 불가능
print("hi")


//--------------------------------------

//객체인 경우
const getObject = () => {
    return {name: "박희원"}
                             
}

console.log(getObject());




const getObject = () =>  ({name: "박희원"}) 

console.log(getObject());


// {}와 return 생략가능, 하지만 {name: "박희원"} 만 남으면 헷갈리기 때
// 바깥에 ()로 감싸준다

 

 

6. arguments와 가변인자

function main () {
    console.log(arguments)  //일반함수의 경우, 매개변수를 따로 명시하지 않아도
}                           // arguments라는 변수를 암묵적으로 전달받는다

main(1, 2, 3);  // [Arguments] { '0': 1, '1': 2, '2': 3 }
                // 배열은 아니지만, 배열 형태로 접근할 수 있다


 function main () {
    console.log(arguments[1])        
}
                
 main(1, 2, 3);   // 2가 출력됨.



 // 화살표 함수로 바꾸기
 const main = () => {
    console.log(arguments) 
 }
main(1, 2, 3);   // 에러가 남.


// 에러 해결
// 화살표 함수도 가변인자 처리 가능!**
const main = (...args) => {    // 매개변수로 아무거나, 앞에 ...(나머지 매개변수 구문)
    console.log(args) 
}   

main(1, 2, 3);   // [ 1, 2, 3 ] 배열로 출력



const main = (...args) => {
    console.log(args[2]) 
}   

main(1, 2, 3);   // 3 출력

 

참고한 유튜브 :

https://www.youtube.com/watch?v=mfaQOlc73pU 

---

빡대가리인줄만 알았던 나를 ,,  

이 강의가 구원해주었습니다 ,,,

감사합니다 ,, 이해가 쏘옥쏘옥 ,, >< 

 

---