About Computer

함수 선언문 VS 함수 표현식

-         자바스크립트는 위에서 아래로 차례대로 한 줄 씩 읽으면서 실행 (인터프리터 언어)

-         자바스크립트는 실행 전 초기화 단계에서 코드의 모든 함수 선언문을 찾아 생성하기 때문에 어디서든 함수를

          호출해서 사용할 수 있다.  

-         하지만 함수 표현식은 코드에 도달해야만 생성되기 때문에 함수 표현식 이후에 함수를 호출해서 사용할 수 있다.

-         그렇기 때문에 함수 표현식보다 함수 선언문이 더 자유롭다.

화살표 함수(arrow function)

기본형식

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

코드가 한 줄만 있는 return문은 소괄호로 표현 가능, return 전에 여러 줄의 코드가 있으면 불가

let add = (num1, num2) => (
	num1 + num2;
)

 let add = (num1, num2) => {
	const result = num1 + num2;
	return result;
}

return문이 한 줄이면 소괄호 생략 가능

let add = (num1, num2) => num1 + num2;

인수가 하나면 괄호 생략 가능

let sayHello = name => `Hello, ${name}`;

인수가 없으면 괄호 생략 불가

let showError = () => {
	alert(‘error’);
}

※      화살표 함수는 ES6 이후 굉장히 활발히 사용되고 있기 때문에 잘 알아두자.

↓[코딩앙마] 자바스크립트 기초 강좌 링크

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

브라우저 내장함수

-         console

-         alert

-         confirm

함수(function)

function sayHello(name) {
	let msg = ‘Hello’;

	if(name) {
		msg += `, ${name}`;
	}
	
    console.log(msg);
}

sayHello(‘Angel’); //“Hello, Angel” 출력
console.log(msg); //error 메시지 출력

-         sayHello: 함수명

-         name: 매개변수 (없을 수도 있음)

-         msg: 지역변수, 함수 밖에서 접근할 수 없음

-         sayHello(‘Angel’): 함수 호출

→  msg를 함수 밖에서 선언하면 전역변수가 되어 함수 내부에서 수정한 값이 밖에도 반영이 되고 접근 가능

ex)

let msg = “welcome”; //전역변수
console.log(msg); → “welcome” 출력

function sayHello(name) {
	let msg = “Hello”; //지역변수
	console.log(msg + ‘, ‘ + name);
}

sayHello(‘Angel’); → “Hello, Angel” 출력
console.log(msg); → “welcome” 출력

ex)         

let name = “Angel”;

function sayHello(name) {
	console.log(name);
}

sayHello(); //undefined 출력
sayHello(‘Noonsong’); //“Noonsong” 출력

→  매개변수로 받은 값은 복사된 후 함수의 지역변수가 됨

OR 사용하기

function sayHello(name) {
	let newName = name || ‘friend’;
	let msg = `Hello, ${newName}`;

	console.log(msg);
}

sayHello(); //“Hello, friend” 출력
sayHello(‘Angel’); //“Hello, Angel” 출력

Default 값 사용하기

function sayHello(name = ‘friend’) {
	let msg = `Hello, ${newName}`;

	console.log(msg);
}

sayHello(); //“Hello, friend” 출력
sayHello(‘Angel’); //“Hello, Angel” 출력

return

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

const result = add(2, 3);
console.log(result); //5 출력

-         값을 반환할 때 사용

-         함수를 종료할 때 사용

함수 정리

-         한 번에 한 작업에 집중

-         읽기 쉽고 어떤 동작인지 알 수 있게 네이밍 ex) showError(), getName(), …

-         재사용성이 뛰어남

-         유지보수가 용이함

↓[코딩앙마] 자바스크립트 기초 강좌 링크

https://www.youtube.com/watch?v=HQGkiD-dXFI 

switch(평가) {
	case A:
		//A일 때 코드
		break;
	case B:
	case C:
		//B 또는 C일 때 코드
		break;
	case D:
		//D일 때 코드
		break;
	default:
		//코드
}

↓[코딩앙마] 자바스크립트 기초 강좌 링크

https://www.youtube.com/watch?v=9ggW0M7zNwI