Front-end/JavaScript

JavaScript ( 함수 정리 )

NiceKHJ 2024. 7. 16. 14:22

 함수 ( function ) 란 ? 

  • 프로그램 개발 시 자주 사용하는 기능들을 여러 개의 명령들로 묶어 놓은 서브 프로그램을 말한다.
  • 기능별로 독립된 실행 코드 블록으로 묶어 놓으면 필요할 때마다 원하는 기능을 실행할 수 있고 같은 기능이 필요한 다른 곳에서도 다시 사용할 수 있는 장점이 있다.
  • 또한 에러 발생 시 에러 요신을 빠르게 유추할 수 있으며 유지보수가 수월하다.

 

 함수 사례 

  • 일정 관리 프로그램 개발
    • 일정 추가 함수 : [추가] 버튼을 클릭하면 일정 목록에 추가하는 기능
    • 일정 목록 함수 : 목록을 화면에 표시하는 기능
    • 일정 수정 함수 : [수정] 버튼을 클릭하면 일정을 수정하는 기능
    • 일정 삭제 함수 : [삭제] 버튼을 클릭하면 목록에서 삭제하는 기능

 

 함수 선언 및 사용 

  • 함수를 선언할 때는 function 키워드를 사용하고 함수 이름을 적은 후 중괄호 안에 실행할 여러 개의 명령을 묶는다.
    • 함수에 이름을 부여하는 이유는 나중에 이름을 사용해서 함수를 실행하기 위해서이다.
  • 함수 선언
    • 자바스크립트 함수는 매개변수 데이터 타입을 명시하지 않는다.
  • 함수 사용
    • 함수를 실행할 때는 함수 이름을 사용하는데 이것을 '함수를 호출한다' 라고 한다.
    • 자바스크립트는 함수 호출 시점에 전달받은 인자값의 타입과 개수를 체크하지 않는다.
    • 즉 선언된 매개변수와 전달인자의 개수가 일치하지 않더라도 호출이 가능하다.
    • 인자를 전달하지 않을 경우 undifined 로 전달된다.

 

 변수의 유효 범위 ( Scope ) 

  • 스코프란 선언한 변수를 접근하고 사용할수 있는 유효한 범위를 말한다.
    • 프로그램에서 변수를 선언하면 자바스크립트 엔진은 코드를 순차적으로 읽어 내려가면서 변수에 대한 스코프를 만든다.
    • 자바스크립트는 크게 지역 스코프와 전역 스코프를 가진다.
  • 지역 스코프 
    • 함수 내부에 선언한 변수를 지역 변수라 하며 해당 지역변수는 지역 스코프를 가진다.
    • 지역 변수는 함수 내부에서만 접근 가능하다.
    • result 변수는 함수 스코프를 가지고 함수를 벗어나는 순간 result 변수의 스코프는 사라진다.

 

  • 전역 스코프
    • 프로그램 시작 시 선언된 변수는 프로그램 전체에서 접근 가능하며 이를 전역 변수라고 한다.
    • 전역 변수는 모든 함수 내에서 사용할 수 있으며 값도 자유롭게 변경할 수 있다.
    • 여러 함수에서 공통으로 사용하는 변수를 전역 변수로 설정하면 편리하지만 다른 함수에서 의도치 않게 값을 변경할 수 있으므로 주의가 필요하다.

 

 

  • var 키워드
    • var 키워드는 ES6 이전에 변수 선언 시 사용된 키워드로 동일한 이름으로 재선언이 가능하고 선언하기 전에 사용할 수 있습니다.
    • var 키워드를 사용해서 지역 변수를 선언하면 해당 변수는 함수 스코프를 가진다.
    • 이러한 특성은 변수 호이스팅(Hoisting)으로 인해 발생합니다.

 

  • 호이스팅 (Hoisting)
    • 자바스크립트 엔진은 프로그램을 실행할 때 평가 단계와 실행 단계를 거친다.
    • 변수나 함수 선언이 코드의 위치에 상관없이 스코프의 최상단으로 끌어 올려지는 현상을 호이스팅이라 한다.
    • 호이스팅은 편리하지만 변수의 유일성을 보장하지 못해 버그 발생 가능성을 높일 수 있다.

 

  • var 와 let 의 차이점
    • var와 let 으로 선언한 변수 모드 호이스팅 되지만 차이점이 있다.
      •  
    • var로 선언한 지역 변수는 함수 스코프를 가지지만 let 으로 선언한 지역 변수는 블록 스코프를 가진다.

 

 

  • const 키워드
    • const 는 변하지 않는 상수를 선언할 때 사용합니다. 일반적으로 상수는 대문자로 표기합니다.
    • const 로 선언된 변수도 호이스팅되지만 초기화 전에 접근할 수 없습니다.

 

 

 변수 사용 및 선언 권장 사항 

  1. var 대신 let 또는 const 사용한다.
    • var는 재선언이 가능해 오류가 발생할 수 있다. 이를 방지하기 위해 let 이나 const 를 사용하는 것이 좋다.
  2. 전역 변수 최소화
    • 전역 변수는 프로그램 전체에서 접근 가능하므로 예기치 않은 값 변경이 발생할 수 있습니다. 전역 변수 사용을 최소화하고 값이 변하지 않는 변수는 const로 선언하는 것이 좋다.
  3. 객체 타입 선언 시 const 사용
    • 객체는 프로그램 실행 중 객체 자체가 변경되지 않도록 const 로 선언합니다. 단 객체의 속성은 언제든지 변경 가능하다.

1. var 대신 let 또는 const 사용한다

 

2. 전역 변수 최소화

 

3. 객체 타입 선언 시 const 사용

 

변수를 효율적으로 사용하면 코드의 가독성과 유지 보수성을 높일 수 있다.

'Front-end > JavaScript' 카테고리의 다른 글

객체 지향 프로그래밍  (0) 2024.07.19
JavaScript ( 함수 정리2)  (0) 2024.07.18
JavaScript ( 제어문 )  (0) 2024.07.15
JavaScript ( 연산자 )  (0) 2024.07.15
JavaScript ( 변수 )  (0) 2024.07.15