[Javascript] 기본 - 함수(funcion)와 지역변수 전역변수(global / local variable)

1. 함수

1. 쓰임

- 서비스 개발시 반복되는 동일한 동작을 개발하게됨

- 팝업, 결제, 회원가입 등의 기능을 여러곳에서 여러번 사용 할 경우

- 하나로 만든 뒤 재활용!! 유집보수 가능하고 쉬움

- 대표 함수 : 브라우저 내정 함수(console, alert, confirm), showError, getName, createUserData, checkLogin

 

 

2. 함수 구조

매개변수 여러개 가능 , 로 구문함

함수명 뒤에 매개변수를 붙여서 호출 가능함 : sayHello('Mike')

{} 중괄호 안에 실행할 코드를 넣음

 

 

3. 매개변수가 없는 함수

function showError(){
	alert('An error has occurred. try again');
}

showError();

 

 

4. 매개변수가 있는 함수

function sayJello(name){            // 하나의 함수로 중복을 없앰
	const msg = `Hello, ${name}`;
    console.log(msg);
}

sayHello('Mike');                  // 매개변수만 변경하면 됨
sayHello('Tom');
sayHello('Jane');

 

4-1. 매개변수 값을 모를 경우 처리

function sayJello(name){            // 사용자가 로그인하지 않아, 식별 불가함
	console.log(name)               // undifined >> if(undifined) = false
	let msg = `Hello`;              // 사용자가 로그인하지 않아, 식별 불가함
    if(name){                       // 이름을 아는 경우에만, true > hello name
    	// msg = `Hello, ${name}`;
        // msg += `, ${name}`;
        msg += ' ' + name;
	}
    console.log(msg);
}



sayHello();                         // "Hello"
sayHello('Mike');                   // "Hello Mike"

- msg : 함수 내에서 사용하는 지역변수다

- 그래서 함수 외부에서 consol.log(msg) >>> error

 

만일 전역변수로 사용하고 싶다면 함수 밖으로 빼야한다

let msg = 'Hello'; // 전역변수(global variable)
consol.log('before start funciton')
consol.log('msg: ', msg)               // "Hello"


function sayHello(name){
	if(name){
    	msg += ` ${name}`;
	}
    consol.log('funcitoning')
    // 지역변수(local variable)
    console.log(msg);                  // "Hello Mike"
}

sayHello();
sayHello('Mike');
consol.log('after funciton')
consol.log('msg: ', msg)               // "Hello Mike"

 

 

 

2. 전역/ 지역 변수

1. let

- 한번 let으로 선언한 변수를 Let으로 재선언하면 에러가 뜬다

- 하지만 지역/전역 변수로 구분된 경우 다르다

 

2. 동일한 변수명으로 지역/전역 변수 만들기

let msg = "welcome";   // 전역변수 선언
console.log(msg)

function sayHello(name){
	let msg = "Hello"    // 지역번수 선언, 동일한 변수명이지만 간섭하지 않음
    console.log(msg + ' ' + name);  // "Hello Mike"
}

sayHello('Mike');
console.log(msg)    // "welcome"

 

3. 전역변수와 동일한 변수명을 갖는 지역변수를 매개변수로 가질 때, 매개변수는 필수인가

매개변수로 받은 값은 복사된 후 지역변수의 값이 된다.

let name = "Mike";

funciton sayHello(name){
	console.log(name)
}

sayHello();         // undefined 
sayHello('Jane');   // "Jane"

 

4. or 연산자를 활용한 함수 생성

function sayHello(name){
	let newName = name || 'friend';
	let msg += `Hello, ${newName}`
	console.log(msg)
}

sayHello(); // name : undeifined > false > friend 채택
sayHello('Jane');

 

4-1. 매개변수에 기본값 삽입

function sayHello(name = 'friend'){    // defualt인 'friend'값은 매개변수 name이 없을 떄만 적용
	let msg += `Hello, ${name}`
	console.log(msg)
}

sayHello();
sayHello('Jane');

 

 

5. 반환 (returm)

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

const result = add(2, 3)
consol.log(result)

 

5-1. return은 우측값을 반환하고 즉시 종료함

따라서 종료하고자하는 부분에 return 삽입

function showError(){
	alert('에러가 발생했습니다.');    // undefined 반환. return문이 없어도
    return;
    alert('이 코드는 절대 실행되지 않아야함');
}


const result = showError();
console.log(result)