Notice

Recent Posts

Recent Comments

Link

« 2024/12 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

Tags more

Archives

Today

Total

관리 메뉴

Bibi's DevLog 🤓🍎

[인프런] Javascript입문 - 함수1 본문

프로그래밍/Javascript 자바스크립트

[인프런] Javascript입문 - 함수1

비비 bibi 2020. 10. 12. 22:20

* 이 글은 인프런에서 제공하는 호눅스님의 유료 강의 '쉽고 자연스럽게 배워보는 Javascript 입문 - 코드스쿼드 마스터즈 코스 레벨1'를 듣고 공부하며 정리한 글입니다. 강의 내용에 더해, 제가 필기하고 구글링한 내용이 정리되어 있습니다. 초보인 제가 이해한 대로 정리했기 때문에, 부정확한 내용이 있을 수 있음을 감안해 주시길 바랍니다. 강의를 듣고 내용을 정리한 글이기 때문에 문제가 되지 않는다는 인프런 측 답변을 받은 적이 있으나(https://bibi6666667.tistory.com/37), 저작권상 문제가 된다면 보호 모드(비공개)로 전환하겠습니다.

함수의 기초

이 강의 전체를 통틀어 가장 중요한 내용!!

함수Function 란?

수학의 함수와 상당히 유사합니다.

함수는 입력input이 있고 출력output이 있다.

컴퓨터의 함수는
'매개변수parameter'를 가지고 어떤 일('처리')을 한 다음 결과값('리턴값return')을 돌려준다.

매개변수 -> (처리) -> 리턴값의 형태를 가집니다.

아래 함수를 예로 들면..
x : 매개변수parameter
f : 함수명 (함수 이름)
2x + 3 : 처리 (어떤 일)
결과값인 7, 9.. : 리턴return(값)

f(x) = 2x + 3 // 수학의 함수.
f(2) = 7 
f(3) = 9


var foo = function(x) { 
return 2 * x + 3;
} 

var y= foo(2);
y = foo(3);

함수 만들기 1

※매개변수가 없다 = function() 처럼, 괄호가 비어있다.

매개 변수도 없고, 리턴값도 없는 가장 단순한 형태의 함수를 만들어 봅시다.

아래 함수는 콘솔 창에 'I am function'을 출력하는 함수입니다.
출력과 리턴은 전혀 다르다는 걸 기억하세요.

var foo = function() {
	console.log("I am function"); 
}
foo(); // I am function

함수 호출

함수를 사용하는 걸 함수 호출(call)이라고 합니다.
함수 이름 + 괄호가 필요합니다.

(함수명만 부른다고 해서 함수가 호출되진 않는다. 괄호까지 같이 적어줘야 한다.)

foo();

매개변수parameter 가 있는 함수 정의하기

매개변수가 있는 함수는

함수명(매개변수1, 매개변수2, ..) {
}

형태이다.

매개변수는 여러 개가 올 수 있다.
(※ 반면, 리턴값은 하나만 올 수 있다.)

// 매개변수가 하나 있는 함수.
var sayHi = function(name) {
	console.log("Hi, " + name); 
}

sayHi("Siri"); // Hi, Siri

// 매개변수가 두 개 있는 함수.
var add = function(n1, n2) {
	console.log(n1 + "+" + n2 + "=" + (n1 + n2))
};

add(10, 20); // 10 + 20 = 30

매개변수가 있는 함수 사용해 보기

foo2("honux");
sayHi("Siri");
add(10, 20);
// 함수명(매개변수 값); 으로 사용하면 된다.

예제

매개변수를 두 개 사용하는 다음 함수를 구현하고 실행해 봅시다.
어떤 방식으로 동작하는지는 스스로 생각해 보세요.

var repeat = function(text, num) {
	//code here 
}; 

repeat("Hello", 5);

내가 만든 코드 : text의 글자수를 세서 num과 비교해 맞으면 true, 틀리면 false 반환하는 함수

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
콘솔 창에 repeat("텍스트",숫자)를 입력해 텍스트의 글자 수를 체크해 보세요.
<script>
    var repeat = function (text, num) {
        if (text.length === num){
            console.log("입력한 텍스트의 길이는 "+text.length+"입니다." )
            return true;
        } else if (text.length != num){
            console.log("입력한 텍스트의 길이는 "+text.length+"입니다." )
            return false;
        }
    };

</script>
</body>
</html>

정답 : text를 num번 반복하는 함수. '0'..

** 함수명이 곧 힌트였다! ㅠㅠ

var repeat = function(text, num) {
	for (var i=0; i < num; i++) {
    	console.log(i + ":" + text);
    }
};

repeat("hello", 5);
// 0: hello
// 1: hello
// 2: hello
// 3: hello
// 4: hello

저작자표시 비영리 변경금지

'프로그래밍 > Javascript 자바스크립트' 카테고리의 다른 글

[인프런] Javascript입문 - 객체 1 (0)	2020.10.13
[인프런] Javascript입문 - 함수2 (함수와 리턴값 return) (0)	2020.10.12
[인프런] Javascript 입문 - 배열과 문자열1 [ 배열, 원소, 인덱스, undefined, typeof, length, immutable/mutable, 객체/속성/메소드, push()/pop(), unshift()/shift() ] (0)	2020.10.12
[인프런] Javascript입문 - 반복문2 (break, continue, 이중루프) (0)	2020.10.12
[Javascript] '소수 찾기' 문제풀이 (0)	2020.10.11

'프로그래밍/Javascript 자바스크립트' Related Articles