[공부 필기] JavaScript 문법 공부 15일차

※ 필자는 초초초보자입니다.

※ 틀린 내용에 대한 피드백은 언제든지 환영합니다.

 

 

공부하고 있는 자료 : modern JavaScript tutorial 

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

함수

 

✅ 함수

- 함수를 직접 만들어보자!

 

- 함수 선언 방법(함수 선언문) 예시

function testMessage() {
	console.log("test");
}

 

- 함수 호출 방법 예시

function testMessage() {
	console.log("test");
}

testMessage();
testMessage();

 

- 함수의 주요 용도는 중복 코드를 피하기이며,

   메시지를 보여주는 방식 자체를 변경하고 싶다면,

   함수 본문의 내용 딱 한번만 변경하면 해당 함수를 사용한 모든 곳의 메시지 출력 방식이 변경된다는 장점이 있다.

 

※ 함수는 간결하고, 한 가지 기능만 수행할 수 있게 만들어야 한다.

※ 만약 함수가 여러 기능을 담고 있다면 잘게 쪼개는 것도 괜찮은 방법이다.

 

✅ 지역 변수

- [함수 내에서] 선언한 변수 = 지역변수

- 함수 안에서만 사용할 수 있다.

 

- 만약 지역변수를 함수 밖에서 호출하면 아래와 같이 에러가 발생한다.

"use strict";

function testMessage() {
	let message = "test complete!";

	console.log(message);
}

testMessage();
console.log(message); // Uncaught ReferenceError 발생

 

✅ 외부 변수

- 함수 외부의 변수 = 외부변수

- 함수 내부에서 [함수 외부의 변수]에 접근할 수 있다.

"use strict";

let message = "test loading...";

function testMessage() {
	console.log(message); // "test loading..."
}

testMessage();

 

 

※ 시도1. 만약, 지역변수와 외부 변수가 둘 다 있다면? (같은 변수명으로)

- 아래와 같이 결과가 나왔다.

- 함수 내부 변수는 외부 변수의 존재를 가려버린다. (눈 가리고 아웅..?)

"use strict";

let message = "test loading...";

function testMessage() {
	let message = "test complete!";

	console.log(message); // test complete!
}

testMessage();
console.log(message); // test loading...

 

※ 시도2. 만약, 함수 내부에서 외부 변수를 변경하면?

- 함수 내부에서 외부 변수를 수정하면, 수정된 그대로 함수 밖에서도 사용할 수 있었다.

"use strict";

let message = "test loading...";

function testMessage() {
	message = "test complete!";
	console.log(message); // test complete!
}

testMessage();
console.log(message); // test complete!

 

※ 시도3. 만약, 함수 내부에서 외부 변수의 값을 수정하고 + 함수 내부에 외부 변수와 같은 이름의 내부 변수를 선언하면?

- 일단 함수 내부에서 외부 변수(message)를 변경하는 코드를 먼저 구현하고

- 그 외부 변수와 동일한 이름으로 내부 변수를 구현해보자.

"use strict";

let message = "test loading...";

function testMessage() {
	message = "test complete!"; // 의도 : 외부 변수 message를 수정

	let message = "test"; // 의도 : 내부 변수 message를 선언
	console.log(message); 
}

console.log(message);

testMessage();
console.log(message);

- 아래의 코드를 통해 외부 변수 message를 수정하는게 의도였는데, 내부 변수로 인식되는 것인지

   초기화 전에 message 변수에 접근할 수 없다고 에러를 뱉어냈다.

message = "test complete!"; // 의도 : 외부 변수 message를 수정

- 안되는 시도였다.

 

✅ 전역 변수

- 위의 [외부 변수] 파트에서 언급한 코드 중 함수 외부에 있는 message 변수는 "전역 변수"라고 부른다.

- 전역 변수는 같은 이름을 가진 변수로 가려지지 않는다면 (위에서 [시도1]에 해당하는 경우를 제외하면)

   모든 함수에서 접근할 수 있다.

"use strict";

let message = "test loading..."; // 전역 변수

function testMessage() {
	console.log(message);
}

testMessage();

- 하지만 되도록 전역 변수는 사용을 지양하는 것이 좋다고 한다.

  (그러나 프로젝트 전반에서 사용되는 데이터는 전역 변수에 저장하는 것이 유용하다고 한다)

 

✅ 매개변수

- JavaScript의 매개변수는 C, Java 등의 언어와 다르게 자료타입을 함께 명시하지는 않는다.

- 아래의 코드에서 매개변수는 함수의 소괄호에 있는 sign과 errorSign이다.

function testMessage(sign, errorSign) {
	if (errorSign) {
		console.log("error!");
	}
	else 
		console.log(sign);
}

testMessage('Ready', false);
testMessage('Wait', true);

- 위와 같은 코드는 인자('Ready'와 false)를 "복사해서 함수로 전달한다. (값 전달)

- 만약, 인자가 메모리에 할당된 공간이 있는 변수였다고 하더라도

   이 코드는 인자를 값으로 전달하기 때문에 함수 내부에서 sign과 errorSign을 수정해도 함수 밖에 있는 변수는 영향을 받지 못한다.

 

✅ 매개변수 기본값(default)

- 매개변수에 값을 전달하지 않으면 값은 undefined가 된다.

function testMessage(sign, errorSign) {
	if (errorSign) {
		console.log("error!");
	}
	else 
		console.log(sign);
}

testMessage(); // undefined
testMessage('Wait', true); // Wait

- 에러가 발생하지는 않는다.

 

- 만약, 인자를 전달하지 않았을 때 undefined가 되지 않게 하려면 '기본값'을 설정해주면 된다.

- 매개변수 오른쪽에 =를 붙이고 기본값을 써주면 된다고 한다.

function testMessage(sign = 'no argument', errorSign) { // sign의 기본값 = 'no argument'
	if (errorSign) {
		console.log("error!");
	}
	else 
		console.log(sign);
}

testMessage(); // no argument
testMessage('Wait', true); // Wait

 

- 신기하게도 이 기본값에는 문자열이나 숫자형만 들어갈 수 있는게 아니라, 복잡한 표현식(함수 등)도 들어갈 수 있다고 한다.

function noArguFunc() {
	console.log("warning");
	console.log("no argument!");

	return 'none';
}

function testMessage(sign = noArguFunc(), errorSign) {
	if (errorSign) {
		console.log("error!");
	}
	else 
		console.log(sign);
}

testMessage();
testMessage('Wait', true);

 

- 혹은 if문을 사용해서 함수 내부에서 if(sign === undefined) { ... } 이나 OR 연산자(||)로 기본값을 설정해도 된다고 한다.

- 매개변수 기본값 평가 시점 : 자바스크립트는 함수를 호출할 때마다 매개변수 기본값을 평가한다고 한다.

 

✅ return

- return 문이 없거나, return 지시자만 있는 함수는 undefined를 반환한다.

 

- return문을 사용할 때 주의해야할 점은

   "return과 값 사이에 절대 줄(new line)을 삽입하지 말아야 한다"는 점이다.

   ► 자바스크립트는 return문 끝에 세미콜론을 자동으로 넣기 때문에, 아래와 같이 의도하지 않은 결과가 될 수 있다고 한다.

// 프로그래머가 작성한 코드
function noArguFunc() {
	console.log("warning");
	console.log("no argument!");

	return
		('none');
}

// 자바스크립트가 인식하는 코드
function noArguFunc() {
	console.log("warning");
	console.log("no argument!");

	return; // 세미콜론 자동 삽입
		('none');
}

 

 

✅ 함수 이름 짓기의 tip

- 함수가 어떤 동작을 하는지 축약해서 설명해주는 동사를 접두어로 붙여서 함수 이름을 짓기

   예시)

   » show______ : 무언가를 보여주는 함수

   » get______ : 값을 반환하는 함수

   » calc______ : 무언가를 생성하는 함수

   » check______ : 무언가를 확인하고 불린값을 반환하는 함수

- 보통 함수 이름은 본인 혹은 본인이 속한 팀에서 만든 규칙을 충분히 이해하고 그에 따라야한다.

 

- 함수는 함수 이름에 맞는 "동작 하나만" 담당해야한다.

   » 만약, 나이를 입력받고 출력하는 함수를 작성하고 싶다면

       1) 나이를 입력받는 함수, 2) alert 창에 나이를 출력하는 함수를 나눠서 하는 것이 좋다.

       (제3의 함수를 만들어서 그곳에서 두 함수를 호출할 수도 있다고 한다)

 

- 함수 중에 이름이 짧은 함수가 있다.

  » jQuery 프레임워크에서 쓰이는 함수 $ 와 Lodash 라이브러리의 핵심 함수 _

  » 이 함수들은 함수 이름짓기 관련 규칙을 지키지 않는 예외라고 한다.