[인프런] 웹 프론트엔드를 위한 자바스크립트 첫 걸음 - 함수, 전역변수와 지역변수

1. 함수

• 같은 동작을 하는 중복된 코드가 다양하게 존재할 때 이들을 묶어 하나의 명령으로 실행할 수 있게 해주는 기능.
• 수정이 용이하고, 코드 재사용성이 좋다.
• 함수 선언: function 함수이름(인자) { (동작) }
• 함수 호출: 함수이름(인자)

function sub(num1, num2) { // 함수 선언
    console.log(num1 - num2);
}

sub(3,1); // 함수 호출

// 결과값: 2

 

 

1.1 return문

• 함수 실행의 결과 값을 이용해 다른 작업을 하고 싶을 때 사용.
• return문 형식: return (반환할 값)

function add(num1, num2) {
    return num1 + num2;
}

console.log('두수의 결과값: ' + add(10, 15) + ' 입니다.'); 
console.log(`두수의 결과값: ${add(10, 15)} 입니다.`); // 템플릿 리터럴 통해 결과값이 출력됨.

// line 5,6은 그냥 ``이 헷갈려서 두 번 출력함. 
// 아래의 값과 같이 결과는 같음.

 

 

주의) return 문 아래의 작성된 코드들은 실행되지 않은채로 함수가 종료됨.

-> 반대로 early return 패턴으로 사용되기도 함.

 

 

1.2 early return 패턴

• 특정 조건에 부합할 경우 바로 return 되는 패턴. 
• 코드의 구조를 단순하게 만들어주고, 가독성이 좋아져 자주 사용되는 패턴. 

강의 내용. (우)는 (좌)코드를 early return 패턴으로 코드 수정한 것. 

 

- else, else if 문 사용하지 않고 if와 return 코드로 작성되어 특정 조건문(3번째 if문)을 만족하고 있다. 따라서 아래 결과값이 나오며 return 아래 코드 역시 실행되지 않고 함수가 종료된다. 

-> 결과값: num의 값이 10보다 크거나 같습니다.

 

 

2. 지역 변수, 전역 변수 

2.1 지역 변수

• 특정 구역에서 선언되어 함수 블록 내부에서만 유효한, 접근가능한 변수

function add(num1, num2) {
    let sum = num1 + num2;
    return sum;
}

add(10+15); 
console.log(sum);

 

 

-> 위의 코드와 같이 외부에서의 접근은 에러 발생

 

 

2.2 전역 변수

• 함수 외부에서 선언되어 내부에서도 접근이 가능한 변수. (어디에서나)

let sum = 0;

function add(num1, num2) {
    sum = num1 + num2;
    return sum;
}

add(10,15); 
console.log(sum);

// 결과값: 25

 

 

 

 

 

30% 할인 쿠폰

강의 링크 : https://inf.run/7AC37

쿠폰 번호 : 15510-513af80c45b8