윤인성 모던 웹을 위한 JavaScript + jQuery 입문 3판 27강 - 함수 기본과 매개변수 > javascript

윤인성 | 모던 웹을 위한 JavaScript + jQuery 입문 3판 27강 - 함수 기본과 매개변수

페이지 정보

조회: 646

본문

※ 영상을 선명하게 보기 안내

유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
팝업목록에서 "품질" 선택하세요.
원하는 해상도를 선택해주세요.

※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.

윤인성님의 javascript강의 청각장애인을 위한 자막

안녕하세요 모던 웹을 위한 자바스크립트 제이쿼리 입문 27강 되겠고 용

이번 강의에서는 126 페이지에 있는 매개변수와 리턴 값에 대해서
살펴보도록 하겠습니다
일단 지난번에 했던 걸 복습해 보도록 할게요 삼수를 생성하는 방법은
2가지가 있는데 하나는 이름이 있는 함수를 생성하는 방법 이고 하나는
이름이 없는 함수를 행성 하는 방법이었습니다
이름이 있는 함수를 생성할 때는 성전 이라는 키워드 뒤에 이름을 입력을
해 주고
괄호를 열고 닫은 지 후보로 1 괄호를 열고 닫아 주면 되었습니다
이름이 없는 함수를 생성할 때는 저 이름 부분만 없으면 되었는데요
간단하게 요러한 형태를 사용했었습니다 어쨌거나 그럼 우리가 지금까지 두
가지 함수를 굉장히 많이 사용을 해봤는데요
하나는 어를 참 쓰고 하나는 프롬프트 함 졌습니다
일단 얼얼 참수 같은 경우에는 괄호 를 열 때 나오는 자동완성 기능을
보면 알겠지만 매개변수로 메시지를 않은걸 넣게 되고 보이드 라는 것을
밖으로 내뱉게 됩니다
프롬프트 함수의 경우는 메시지와 디폴트 스트링 이라는걸 넣게 되고요
이 결과로 스트링 이라는 결과가 나오게 됩니다
프로그래밍 쩝 용어로 u 앞에 있는 괄호 안에 있는 녀석
요녀석을 우리가 매개 변수 라고 부르게 됐고 요 유 뒤에 있는 또는 개발
환경에 따라서 앞에 있을 수도 있는데요
요렇게 따로 있는 녀석을 리턴값이 라고 부르게 됩니다
한마디로 프롬프트 함수 같은 경우에는 스트링으로 메시지를 넣고 스트링으로
디폴트 라는 걸 넣으면 스트링 이라는 것을 l 내주 라는 함수 라고 할
수 있습니다
요렇게 함수를 있는 연습을 자주 해 2시면 나중에 다양하게 활용할 수
있으니까 도움이 될 것이라고 생각을 합니다
어쨌거나 이번에 얼얼 참수를 살펴보게 되면 어를 투 같은 경우에는
매개변수로 메시지
데니 를 넣게 되어 있고 리턴 으로 보이드 가 나오게 됩니다
애니 라는 의미는 아무거나 넣어도 된다는 의미 구요
보이드 는 아무것도 없다는 뜻입니다 따라서 우리가 프롬프트 함수의 경우는
var 9 스스로 요러한 형태로 문자열을 받아서 활용을 했었는데요
얼얼 트 같은 경우에는 아무것도 l 나지 않기 때문에
요러한 형태로 변수를 받아도 여기에 언 디파인 드가 들어가게 됩니다
따라서 의미없는 코드 이기 때문에 요러한 형태로 사용을 했었습니다
결과적으로 일단 정리를 하면 매개변수 라는 것은 과로 내부의 넣는거 라고
할수 있겠구요
리턴 값이 라는 것은 그 함수의 실행 결과로 나오는 것이라고 할 수
있습니다
어쨌거나 다른 함수도 굉장히 많이 살펴볼 수 있을 거에요
우리가 지금까지 넌 밤 수 라던지 스트링 함수 라던지 불리언 암수를 살펴
봤었는데요
예를 들어서 넘버 함수를 살펴보게 되면 매개변수로 lune 를 넣게 되고
아무것이나 넣게 되면 리턴 값으로 넘버를 돌려 준다는 뜻입니다
마찬가지로 스트링 함수를 보게 되면 스트링 함수도 매개변수로 애니를 넣게
되고 결과적으로 스트링 이라는 것이 나오게 됩니다
불리언 함수 같은 경우에 똥 살펴보게 되면
매개변수로 애니를 넣게 되고 결과로 그 결과 그러니깐 리턴 으로 불리언
이 나오게 됩니다
뭐 이외에도 굉장히 많은 함수들이 있어요
일반적으로 요 자동완성 기능을 켰을 때 그 보라색 사각형으로 나오느냐
사업 또는 붉은색 사각형으로 나오는 녀석이 대부분의 개발 환경에서 함수를
나타내게 되는 데요
계속 보게 되면 뭐 캔슬 애니메이션 프레임이 뭘 하는 함수 인지
모르겠지만 핸들이 라는 걸 넘버로 넣게 되고 리턴 으로 보이드 가
나온다는 것을 알 수 있습니다
뭐 이외에도 계속해서 확인을 해 보면서 연습을 해보시면 좋을 것 같습니다
예를 들어서 클로즈 같은 경우에는 매개변수로 아무것도 넣지않고 결과적으로
아무것도 나오지 않는 보이드 입니다 자 그럼 우리도 굉장히 간단하게
매개변수와 리턴 이 있는 함수를 만들어 보도록 하겠습니다
일단 지금부터는 선언적 함수를 사용해서 5장을 설명하도록 할게요 엄
선언적 함수를 다른 것으로 바꿔 보시면서 도 연습을 하면 좋은 경험이 될
것이라고 생각을 합니다
일단 책의 그림 5 다시 7에 있는 x 라는 걸 매개 변수도 넣으면
제곱을 해서 돌려주는 함수를 만들어 보도록 하겠습니다
이름은 f 로 만들도록 하겠구요 매개 변수를 넣을 때는 베개 변수 이름을
그냥 쉼표 등으로 연결을 해주시면 됩니다
현재 우리가 만든 함수는 x 를 매개변수로 받고 재고 파는 것 뿐이므로
매개변수로 x 라는 거 하나만 넣어 주도록 하겠구요
이 내부의 성
리턴 이라는 키워드를 사용해서 리턴을 만들 수 있습니다
x 곱하기 x 를 해주면 x 가 제곱 되어서 나갈 것입니다 암
어쨌거나 이렇게 만들어진 함수를 보게 되면 매개변수로 x 애니를 넣게
되고 리턴 으로 넘버를 리턴하게 됩니다
참고적으로 제 9 부 라는 함수 이기 때문에 숫자를 넣고 숫자를 l 나게
하고 싶다고 할 수 있는데요
일단 매개 변수로는 무조건 애니 밖에 못 넣는다 고 생각을 하시면 되요
자바스크립트가 기본적으로 내장된 녀석들은 비주얼 스튜디오 라는 개발환경이
몰 넣으라고 딱딱 알려주지만 우리가 만든 함수 같은 경우에는 주석을 좀
복잡하게 써야 되는데요
그냥 일반적으로 코딩을 했을 때는 무조건 애니로 들어간다 라고 생각을 해
주시면 좋겠습니다
어쨌거나 애플을 넣고 3 을 제 곱해서
9 붓을 받은 뒤 웃풋을 출력해 보도록 하겠습니다
저장을 하고 실행하게 되면
9 라는 것을 출력하는 모습을 확인할 수 있습니다
다시 코드로 돌아오면 코드가 굉장히 단순한 되요
일단 함수 부분은 그냥 변수를 정리한 것이기 때문에 무시하고 내려온다고
생각을 하시면 되고
애플을 실행했을 때 f3 을 넣기 때문에 이 삶 이라는 거 없이 함수로
들어가면서
욜로 들어오고 3 곱하기 3위 돼서 구가 된 다음에 너 굴을 들고 l
내라 돌아 가라는 뜻이 점
그래서 듯 이 위치로 돌아오게 되 서 구 가 요 위치에 들어가고 9 9
3 9 가 들어간 뒤 얼얼 주로 9 를 출력하게 되는 형태라고 할 수
있습니다
일단 프로그래밍 에서는 리턴 이라는 용어를 사용하는 대용 왜 리턴 이라는
용어를 사용을 하는지 코드를 위해서 부터 하나하나 직접 실행을 해 보시다
보면 쉽게 이해할 수 있을 것이라고 생각을 합니다
자 그러면 매개변수와 리턴 을 사용하는 기본적인 방법에 대해서
살펴보았습니다
그럼 조금 더 나아가서 매개 변수에 대해서 조금 더 자세히 알아보도록
하겠습니다
페이지는 127 페이지 되겠구요 5.절 매개변수 되겠습니다
혈당 간단한 함수로 f 라는 함수를 만들어 보도록 하겠 구요
매개변수로 xy 제트를 받고
얼얼 트루 x 를 출력을 해 보았고
y 를 출력을 해 보고 제트 를 출력해 보도록 하겠습니다
뭐 굉장히 간단한 코드라고 할 수 있겠는데요 이러한 녀석의 매개 변수를
입력하지 않으면 어떤 일이 벌어지는지 그리고
매개변수 보다 많은 값을 입력하게 되면 어떠한 일이 벌어지는지 살펴보도록
하겠습니다
일단 첫번째 권은 매개 변수를 안 넣은 거 되겠구요
두번째 것은 1 2 3 5 6 7 8 9 10 이라는 매일 변수를
세계보다 훨씬 많이 넣은 결과 되겠습니다
저장을 하고 실행을 해 보게 되면 첫 번째 아무것도 안 넣었을 경우 xi
제트 를 출력할 때는 언 d 파인드 언 d 파인드 언 디파인 들을
출력하게 됩니다
이어서 매개 변수를 더 많이 넣은 경우에는 그냥 1 2 3 출력하고
끝나게 됩니다
다시 코드를 살펴 보게 되면 아무것도 입력하지 않은 경우에는 매개변수로
어디 파인드 가 들어간다는 것을 알 수 있구요
매개변수 보다 더 많은걸 입력을 해도 앞쪽부터 차례대로 매개 변수를
채워서 들어가고 나머지는 그냥 사용되지 않는다는 것을 알 수 있습니다
그래서 자바스크립트 같은 경우에는 매개 변수를 입력된 것보다 적게 넣어도
되고 많이 넣어도 사실 실행 이는 큰 문제가 없습니다
그래 섬 예를 들어서 어레이 라는 함수를 살펴보게 되면 그 실행을 했을
때 자동완성 기능의 위아래 화살표 가 나오는 것을 볼 수 있습니다
첫번째는 어레이 랭 스 넘버를 넣게 되어 있는데
화살표를 1 내려보면 이번에는 또 다른 게 나오게 됩니다
어레이 랭스 넘버를 넣고 또 하나는 아이템 즈를 넣게 되어 있습니다
일단 첫번째 거 에선 요렇게 꺾은 과로로 되어있는건 넣어도 되고 안넣어도
된다는 의미인데요 안 놓게 되면 첫번째 형식이 되겠고
하나를 넣게 되면 두 번째 형식이 되고 여러 개의 m 아이템을 넣게 되면
세번째 형식의 됩니다
그럼 한번 각각의 실행 결과를 출력해 보도록 하겠습니다
아무것도 안 넣은 경우 되겠구요
두번째는
숫자 1 넣은것 세번째는 아이템을 여러개 넣은거 되겠습니다
저장을 하고 실행을 하게 되면 첫 번째 권 아무것도 없는걸 출력을 하고요
두번째 꺼는 뭔가 심 표가 여러개 찍힌 녀석을 출력하게 됩니다
쉼표 를 세워 보면 아마 9개가 될것이구요
마지막 녀석을 실행하게 되면 123456789 라는 것을 출력하게 됩니다
다시 코드로 와서 살펴보게 되면 그냥 어뢰의 10구 다꾸 를 하게 되면
빈 어레이 빈 배열을 리턴을 하게 됩니다
그리고 숫자나 를 넣게 되면 이 길이 만큼 을 가진 배열을 리턴하게
됩니다
다만 배열에 내부의 요소의 아무것도 없기 때문에 그냥 빙 것임 표 빈
것이 표 빈 것임 격인 것인 표가 나오면서 아까처럼 심 pop 가 찍히는
결과가 나오게 된겁니다
마지막으로 어레이 1 2 3 5 6 7 8 9 를 입력을 하게 되면
이 요소들을 가지고 배열을 만들어서 리턴 을 해주게 됩니다
따라서 123456789 라는 요소 9개 를 가진 배열을 리턴을 해서
아까처럼 출력하게 되는 것입니다
어쨌거나 이러한 식으로 매개변수의 숫자에 따라서 뭔가 다른 결과를 만들고
싶을때는 5.5 절 가변 인자 함수 부분에 있는 아기 먼 째 객체라는
것을 사용하게 됩니다
책 채 라서 아직 배우지 않은 내용이긴 한데 배열 처럼 사용할 수 있는
녀석이라고 할 수 있습니다
그래서 예를 들어서 포 반복문 으로 출력을 하면 참고적으로 약 1 원칙
예츠 는 소인 반복문을 적용할 수 없다는 것을 주의해 주시기 바랍니다
어쨌거나 요러한 형태로 입력을 하고 얼얼 뜬
아이를 출력을 하게 되면 희생 했을땐 1 2
그리고 다시 코드를 보게 되면 서머 래서 리턴을 출력하게 되죠
l 난게 없기 때문에
언지 파인 들 출력하게 되고 그 다음 123를 보았을 때 1 2 3
4를 출력을 하고 언 디파인 드가 또 나오게 되고
1 2 3 5 6 7 8 9 10 이 나오고 언 디파인 드가 나오고
코드를 종료하게 됩니다
사실 이 부분에서 방금 너무 빨리 지나가서 이 코드의 실행이 이해가
안된다면 잠시 정시를 하시고 분석을 해 보시면 좋겠습니다
어쨌거나 요렇게 되어 있다면 이제 아기 먼지 아이의 값을 더해서 매개
변수의 값을 모두 다 알 수 있겠죠
지난번에 보았던 것처럼 뭐 사용되는 기본적인 형태 몰로 초기화를 해야
될까
그리고 최종적으로 뭘 리턴을 해야될까
올 출력을 해야 될까 를 2개 를 써주시고 더 하는 거기 때문에 초기값을
영어로 지정을 해주면 기점
그래서 영어로 초기값을 설정을 하고 이아 오프셋 아가 아기 많지 아이를
더해 준 다음에 최종적으로 웃풋을 리턴을 해주면 각각의 값을 출력할
수 있을 것입니다
일단 결과를 예상해 보면 이 녀석은 1 1을 더하는 거니까 3의 되겠고
이녀석은 123를 더 하니까
5 곱하기 12 되겠고 이녀석 같은 경우에는 11 곱하기 5 가 되니까
55 가 될 것입니다
저장을 하고 실행을 하게 되면 3
10 55 를 출력하고 종료 되는 모습을 확인할 수 있습니다
자 그럼 여기에서 함수를 사용하는 이유를 몇가지 살펴보도록 하겠습니다
일단 사실 이 코드를 보고서도 그냥
난 이렇게 3번 출력하고 싶은데 라고 하실 분도 당연히 있을 거에요
그냥 매개변수로 아기 먼지가 아니라 어레이를 받고 이 어레이 에다가
1과 2를 넣고
얼얼 뚫어 9부 출력을 하고
어레이 로 1과 2와 3 과 를 넣고
어려울 때 로 출력하면 되고 이러한 식으로 그냥 구성하면 되는데 꼭
함수를 사용해야 하냐 라고 할 수 있는데요
일단 첫 번째 이유는 뭐 코드 입력 소가 아까워 그 것보다 훨씬 더 줄어
들었다는 것이 더 있구요
두번째 같은 경우에는 내가 이 코드에서 문제를 발생했을 때 아까처럼
3번 복사가 되어 있을 때는 문제가 생겼을 때 하나하나 다 고쳐 줘야
됩니다
예를 들어서 더 하는게 아니라고 파는 사양으로 변경해 달라고 하면 이렇게
곱하기 를 하나하나 찾아서 변경을 해야 겠죠 세 번이나 수정을 했고 만약
a 액
이러한 코드가 그 프로그램 전체에서 여러번 사용이 된다면 수정을 계속해서
해줘야 되고 그 과정에서 실수가 발생할 수도 있습니다 하지만 일단 함수로
만들게 되면 이름을 배제를 해서 달아 동 그냥 이 녀석만 곱하기 로
바꾸게 되면 나머지가 모두 한꺼번에 바뀌게 됩니다
추가적으로 전체 수정으로 서머리 라는 것을 쌈 멀티 플라이 라는 식으로
변경을 해 주게 되면 쉽게 코드 전체의 수장이 가능해집니다
참고적으로 이렇게 이름 바꾸는 것은 또 개발환경이 지원하는 기능 중의
하나이기 때문에 쉽게 실수 없이 변환을 할 수 있습니다
세번째로는 코드가 이렇게 써 있게 되면 사실 주석을 많이 써야 되요
얘는 모를 하는 녀석이 당
1부터 2까지 더할 것이다
뭐 얘는 일부터 다 까지 더할 것이다
1부터 10까지 더할 것이다 라는 것을 주석으로 명시적으로 표시를 해줘야
되는데요
지금 코드를 보시게 되면 주석 없어도 그냥 읽을 수 있을 거예요
유 녀석을 배제하고 아래쪽 녀석만 보면 뭔지 잘 모르겠지만 1과 2를
서머 를 해서 어려울 투로 출력을 한다.
1과 2와 3 가사를 써 말을 해서 어려 투로 출력을 한다.
일과 유아 3 과 와우 6과 7과 8과 9 아 10을 서머 를 해서
얼얼 트 로 출력하게 된다 라고
정말 눈으로 보고도 그냥 쉽게 읽을 수 있는 가독성이 좋은 코드가 됩니다
그럼 세 가지 요소에 대해서 설명을 했는데요 첫번째 같은 경우에는 코드를
입력하는 양이 줄어든다
두번째는 수정을 했을 때 실수 없이 수정할 수 있다
세번째는 가독성이 좋아 진다 3가지 되겠구요
추가적으로 함수 같은 경우가 이 매부 만으로 완전 알 수 있다면 이
함수는 복사에서 다른 프로젝트 에도 사용할 수 있고 다른 사람에게 공유할
수도 있습니다
그리고 당연히 내가 만들 때 또 나 스스로 공유를 할 수 있게 점
그래서 그러한 죽으로 재사용을 할 수도 있다 해서 4가지 정도의 장점이
있다고 할 수 있습니다
참고적으로 이 중에서 개인적으로 가장 중요하다고 생각하는 것은
가독성이 라고 생각을 해요 대 반쪽으로 게임 개발을 할 때는 뽑게 되면
함수가 그냥 저번처럼 한줄 자리라고 해도 이걸 전부 당 함수로 만들어서
사용하는 경우가 많습니다
왜냐하면 읽기가 쉬워 주니까요 예를 들어서 제 곱해 줘 라는 함수를
만들게 되면
얼얼 뚜루 제 곱해 줘
일이라고 쓰게 되면 사실 월 틀 1 곱하기 2를 하는 것 보담 훨씬 더
쉽게 읽을 수 있게 되거든요
그리고 예를 들어 섬 아주 간단한 코드
여기에다 감 제고 패주고 아니라
넓이 구하기 라는 함수를 만들어 타고 합시당
원의 넓이 구하기 를 해서 매개변수 룬
반지름을 바꿈 곱하기 를 해서 파이 r 제곱 이정
3.1 싸고 파기
라 dx 를 두번 곱해 주는 형태의
이러한 식으로 작성을 하게 되면
원의 넓이 구하기 123를 했을 때 이것만 보고도 이제 뭐 하는
녀석인지 알 수가 있습니다 그래서
가독성이 굉장히 향상 된다고 할 수 있구요 만약에 이렇게 함수를 안쓰게
되면 은
그냥 이렇게 해도 되지 않냐 라고 생각하실 수 있는데
이렇게 입력을 하게 되면 딴사람 이걸 봤을때 이게 뭐 하는 코드 g 라고
생각할 수 있어요
그래서 가독성에 측면에서 무조건 적으로 함수를 사용 하는게 굉장히 좋다
라고 할 수 있습니다
어쨌거나 지난 번에 아주 예전에 주석을 얼마나 잘 쓰냐 가 개발자의
실력을 평가하는 기중 중의 하나 라고 했는데요
일반 쪽으로 아래와 같이 코드를 쓰게 되면 주석으로 다 알아야 겠죠
이래 넓이 구하기 이를 반지름 으로 하는
원의 넓이 구하기 라고 써 줘야지 사람들이 이걸 보고 바로 뭔지 쉽게 알
수 있습니다
근데 사실 함수를 잘 사용을 해서 한 줄의 코드 라도 함수로 만들어서
활용할 하시게 되면 그냥 주석 없이도 이해할 수 있어요
그래서 사실 어느정도 수준을 올라가게 되면 정말 코드의 주석이 하나도
없는데 그 코드가 다 이해되는 수준으로까지 코드를 작성 하실 수 있거든요
그래서 함수를 이러한 곳에 활용을 한다. 라고 기억을 해 주시면 좋겠습니다
참고적으로 헌 툴을 많이 사용하면 코드를 읽다가 일로 뛰어가서 이거
실행하고 다시 돌아오고 이렇게 이치 실행 을 하다가 일로 뛰어서 이거
실행하고 다시 돌아오고 하면서 느려지지 아니라고 할 수 있는데요
장담하건대 여러분이 살면서 자바스크립트로 프로그래밍을 만드실 땐 이 함수
건너뛰는 그런 뛰기로 인해서 성능이 느려지는 이유는 절대 없을 거라고
생각을 하고요
왜냐하면 사실 코드 건너 뛰는 것보다 훨씬 더 프로그램을 느리게 만드는
건 다른 요소 니까요
그리고 추가적으로 시원하 라던지 싶을 뿌리라 던지자 바라던 지샥 같은
녀석은 그냥 이거 실행을 하기 전에 코드를 쭉 읽고 이거 1절 이니까
여기에 쓸 필요 없이 여기에다 자동으로 변환을 해 버 리 자 라고 하면서
알아서 내부적으로 변환을 해줍니다
따라서 속도 문제 등은 전혀 발생하지 않기 때문에 함수를 많이 사용해서
가독성을 올리는 것이 훨씬 더 좋고 몸 손에 없는 것이라고 생각을 해
주시면 되겠습니다
뭐 어쨌거나 오늘 강의는 여기까지 되겠구요 책의 내용은 5.5 절 133