TIL-12 JavaScript 함수&스코프

PRB·2021년 7월 6일
0

JavaScript

목록 보기
5/24
post-thumbnail

함수

내가 코딩하면서 함수를 함수답게 효율적으로 썼다는 생각은 해본적이없다.(아마 코드를 길게 안쳐봐서 그런거같다.)
그래도 함수를 써보면서 확실히 코드를 수정하거나 코드의 중복을 최소화 해준다는 점에서 너무 편리했다.

함수란? 하나의 특정한 작업을 수행하도록 설계된 독립적인 블록이다.

선언

함수를 만드는 행위

  1. function 함수이름(매개변수) {};
    함수의 이름을 부여해도 되고(함수 선언문)

  2. const 변수이름 = function () {};
    변수에 저장해도 된다.(함수 표현식)

function 함수이름() {
console.log('안녕하세요');
console.log('반갑습니다');
}

호출

해당 함수 이름을 부르기 전까지는, 함수 내부는 실행이 안된다.
함수 내부가 실행되려면 아래와 같이 함수를 호출해야한다.

함수이름();

안녕하세요
반갑습니다

함수이름();
함수이름();

안녕하세요
반갑습니다
안녕하세요
반갑습니다

매개변수&인수

매개 변수(parameter)

함수를 정의 하면서, 함수 선언식의 괄호()안에 어떤 변수명 을 쓰면, 우리는 그걸 매개 변수(parameter) 라고 한다.

인자(argument)

어떤 함수를 호출하면서, 호출문의 괄호 안에 어떤 값 또는 값이 정의된 변수를 쓰면, 우리는 그걸 인자(argument) 라고 한다.

function a(매개변수) {
console.log('매개변수');
}

a(인자);

인자

화살표 함수

//ES5
function() {}

//ES6
() => {}
//ES5
function getName() {}
 
//ES6
const getName = () => {}

호출은 똑같다.

getName()

스코프

JavaScript에서 scope란, '변수가 어디까지 쓰일 수 있는지'의 범위를 의미한다.

block

block이란 중괄호({} , curly brace)로 감싸진 것을 block이라고 합니다.

function의 내부는 하나의 block이다.

{} (block)내부에서 변수가 정의되면 변수는 오로지 {} (block)내부에서만 사용할 수 있다.

{} (block)내부에서 정의된 변수는 local(지역) 변수라고 한다.

function showName() {
  let name = "홍길동"; // 지역 변수
  console.log(name);
}

showName(); // 홍길동

console.log(name); // ReferenceError: message is not defined 
(name은 함수 내 지역 변수이기 때문)

외부 변수

block밖인 global scope에서 만든 변수를 global variable(전역변수)라고 한다.

코드 어디서든 접근 가능해서 변수값을 확인할 수 있다.

let name = '홍길동';

function showName() {
  let message = 'Hello, ' + name;
  alert(message);
}

showMessage(); // Hello, 홍길동

외부 변수는 지역 변수가 없는 경우에만 사용할 수 있다.

함수 내부에 외부 변수와 동일한 이름을 가진 변수가 선언되었다면, 내부 변수는 외부 변수를 이긴다.

let name = '홍길동';

function showName() {
  name = "김길동"; // (1) 외부 변수를 수정함

  let message = 'Hello, ' + userName;
  alert(message);
}

alert( userName ); // 함수 호출 전이므로 홍길동 이 출력됨

showMessage();

alert( userName ); // 함수에 의해 김길동 으로 값이 바뀜

참고
https://ko.javascript.info/function-basics

profile
사용자 입장에서 사용자가 원하는 것을 개발하는 프론트엔드 개발자입니다.

0개의 댓글