윤인성 모던 웹을 위한 JavaScript + jQuery 입문 3판 26강 - 함수 만들기 > javascript

윤인성 | 모던 웹을 위한 JavaScript + jQuery 입문 3판 26강 - 함수 만들기

페이지 정보

조회: 657

본문

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

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

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

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

안녕하세요 모던 웹을 위한 자바스크립트 제이쿼리 몬 3판 26강 되겠구요

이번 강의에서는 5장에 있는 함수 부분 부터 살펴보도록 하겠습니다
대학교 1학년 때 c 언어나 잡아 같은거 를 배우게 되면 대부분의
학생들이 이 앞부분 그러니까 데이터 조건문 반복문 까지는 잘 따라오는데
함수 부터 절반정도 사라지는 모습을 볼 수 있어요
그리고 이제 c 언어 같은 경우에는 포인터를 가면은 뭐 나머지에 절반이
사라지게 되고
자바의 경우는 클래스를 넘어가게 되면 나머지 절반이 사라지게 됩니다
이유는 굉장히 단순하다고 생각을 해요 그 단계를 배울 땐 크게 어디에
사용되는지 명확하게 알 수 없기 때문입니다 예를 들어서 c 언어의 포인터
라 그러면
1학기 과정 일반적으로 책 500페이지 정도로 설명을 하게 되는데요
500페이지 정도로 난 포인터를 제대로 활용할 수 있는 상황을 설명
하기가 쉽지가 않아요
저도 처음 프로그래밍을 공부를 할 때 한 달 두 달을 공부를 했는데
도대체 그걸 어디다 쓰는지 모르겠더라고요
그랬다가 나중에 일을 하면서 이러한 경우에 사용을 하는 구나 를 알게
되니까 그때부턴 자동적으로 이해가 되기 시작을 했어요
뭐 자바의 클래스 도 마찬가지예요 한 학기 과정에서 프로젝트를 잘 만드는
학생들은 이걸 어디다 쓰는지 이미 이해를 하고 왔기 때문에 잘 공부하는
거라고 생각을 하고요
그렇지 않은 일반적인 학생의 경우는 1학기 물약 내부로 는 대체 클래스를
어떻게 활용하고 게토 세터 이런거 대체 어디에 활용하고 이런지 제대로 알
수가 없다고 생각을 합니다
어쨌거나 지금 남게 해서 함수도 마찬가지라고 생각을 해요
모든 프로그래밍 언어에서 함수를 배우는 시점에 는 그 함수를 왜 쓰는지
제대로 이야기가 굉장히 힘듭니다
어쨌거나 지금까지 살펴보았던 데이터 조건문 반복문 같은 경우에는 처리와
관련된 개념 이에요 그래서 어디에 사용되는지 명확하게 알 수 있습니다
그런데 함수 라던지 뒤에 나오는 행성 잠수 라던지 클래스 라던지 는 파실
처리와 관련된 내용이 라기보다는 제 사용과 관련된 내용이라고 할 수
있거든요
재사용 이라는 것은 현대 프로그래밍 언어에서 굉장히 중요한 개념이 고요
다시 사용할 수 있게 어떻게 하면 더 쉽게 다시 사용할 것인가를 고민하는
개념이라고 할 수 있습니다
그래서 사실 다시 사용을 안할 수 있어요 그래서
100 쭈리 백출 정도의 코드에서는 내가 함수를 왜 쓰는지 전혀
모르겠다고 고민할 수도 있거든요
그래도 일단 꼭 참고 내용 진행을 해주시면
이후에 문서 객체 모델 정도 나아갈 때 이걸 어떻게 활용하는지 조금
이해할 수 있을 거라고 생각을 합니다
자 그러면 함수 를 생성하는 방법 부터 살펴보도록 하겠습니다
자바스크립트에서 는 함수도 않아 의 자료이기 때문에 숫자나 문자 일처럼
취급을 하게 됩니다
어쨌거나 함수를 만드는 방법은 2가지가 있는데요 첫번째는 이름 있는
함수를 만드는 방법
두번째는 이름이 없는
함수를 만드는 방법 되겟습니다
굉장히 간단한 내용 썽 선 이라는 키워드를 사용하고
이름을 입력을 해 주고 둥근 괄호 열고 닫은 뒤 꾸란 달우를 괄호를 열고
닫아 주시면됩니다
녀석 같은 경우에는 여기 이름이 붙점 이름이 없는 함수를 만들 때는
그냥 이름을 제외 해주시고 이와 같은 형태로 만들어 주시면 됩니다
어쨌거나 용어를 조금 더 살펴 보게 되면요 우리가 이 위의 것을
이름이 있는 함수 라 그래서 유명 함수 라고 부르기도 하는 내용
사실 유형이라고 물어도 되면 우리나라에서는 널리 알려졌다는 입니까 조금
더 강 아점 그래서 제대로 많이 사용하지는 않습니다
어쨌거나 이외로 선언적 함수 라는 의미로 많이 사용하게 되구요
2 아래 거 같은 경우에는 이 드미 없는 익명 함수
또는 이름이 없는 무명 함수 라고 부르기도 하구요
함수 리터럴 이라고도 부르기도 합니다
사실 요 용화는 이 위에 꽃 함수 리터럴 이라고 부를 수 있는 약간
애매한 용 할 수 있기 때문에 지우고
요렇게 선언적 함수와 익명 함수 두 가지 용어를 사용하도록 하겠습니다
어쨌거나 선언적 함수와 익명 함수가 있는데 우리가 이름이 없으면 부를
수가 없어요
우리가 예를 들어서 자동완성 기능으로 요 아래에서 컨트롤 스페이스 를
사용해보게 되면 네임 이라는 녀석은 이름이 붙어 있어서 사용할 수 있는데
이 이름없는 함수 같은 경우에는 이름이 없기 때문에 호출할 수 없어서
변수 등에 넣어서 활용하게 됩니다
그래서 요러한 형태로 사용을 해 주시게 되면 이름을 부여할 수 있습니다
그러면 이름을 간단하게 테스트 a 와 테스트 p 라고 입력을 해서 확인해
보도록 하겠습니다
이름을 입력을 하고 나면
컨트롤 스페이스 를 눌렀을 때 저녀석 2 재를 확인할 수 있습니다
테스트에 이라는 것은 요렇게 선언되어 있는 녀석이 0
테스트 p 라는 녀석은 요렇게 선언되어 있는 녀석이다 라고 나오기 때문에
요 두녀석 을 활용할 수 있게 됩니다
그럼 한 번 두 녀석을 각각 출력해 보도록 하겠습니다
멀 투다 하나의 함수 였죠 테스트에 이왕 테스트 비록 출력을 하고 저장을
하고 실행해 보도록 하겠습니다
실행을 하게 되면 지금 화면과 같이 출력을 하는데요
이름이 입는 1 쏘게 어떤 경우에는 펑션 테스트 a 괄호 열고 닫고 꾸
부러워한 괄호 열고 다꾸 로 출력이 되는 모습을 확인할 수 있고요
이름이 없는 함수 같은 경우에는 그냥 성산 괄호 열고 닫고 꼬부랑 가로
열고 닦으러 로 출력되는 모습을 확인할 수 있습니다
어쨌거나 이렇게 이름이 있고 없다 를 9분할 수 있다고 할 수 있습니다
어쨌거나 두 가지 모두 함수인 대용 함수 라는 것은 우리가 일반적으로
코드의 뭉치 라고 설명을 해요 그래서 이 꾸 브라만 가로 내부의 뭔가를
입력을 하게 되면 테스트 a 위치입니다
라고 여러 줄을 입력을 하게 되면 이 여러 줄에 코드를 동시에 실행을
하게 됩니다
간단하게 얼얼 틀을 출력을 해서 어떠한 식으로 실행되는지 확인 해보도록
할게요
입력을 하고 함수를 실행을 할 때는
함수 이름 뒤에 괄호를 열고 닫아서 호출을 하게 됩니다
우리가 얼얼 틀을 사용할 때도 마찬가지 어쩜 그래서
저장을 하고 실행을 해 보게 되면 테스트 a 가 실행이 될때 테스트에
위치입니다 테스트 a 위치입니다 테스트 a 위치입니다 세 번 입력해
쓰니까 3번을 진행을 하게 되고 테스트 피를 실행을 하게 되면 테스트 b
위치입니다 테스트 b 위치입니다 테스트 b 위치입니다 3번을 실행하게
됩니다 그럼 일단 함수를 만들고 사용하는 방법에 대해서 알아보았습니다
사실 여기까지 봐도 이게 뭔 짓인가 그냥 이렇게 쓰면 되지 않나 라고
생각하실 분들도 굉장히 많을 거라고 생각을 하는데요 일단 함수 라는게
있고 이렇게 사용한다. 를 기억을 해 주시기 바랍니다
뭐 다시 한번 정리를 하게 되면 함수 를 생성하는 방법은 이름 있는
함수를 만드는 방법이 있고 이름이 없는 함수를 만드는 방법이 있다
두 가지라고 기억을 해 주시면 되겠구요 함수를 만들 때는 펑션 이라는
키워드를 사용한다.
그리고 꾸 부러운 가로 내부의 코드를 열어줄 입력을 하게 된다
그리고 이렇게 만들어진 함수를 실행할 때는 함수 이름 뒤에 괄호 열고
다꾸 를 사용한다.
요정도 기억을 해 주시면 일단 되겠습니다 자 그럼 두 가지 형태가 있기
때문에 이 두 가지의 는 분명한 차이가 있을 거에요 그래서 일단 두가지
의 차이가 뭔지 알아보도록 하겠습니다
일단 가장 큰 차이점은 이름있는 함수 선언적 함수는
이 스크립트 태그 부분을 읽을 때 먼저 실행이 됩니다
반면 이름 없는 함수 익명 함수 같은 경우에는
이주를 읽을 때 실행이 됩니다 도대체 무슨 말인가 알 수 있는데요
우리가 vara 에다 10 을 놓고 var 베이 에다가 20 을 놓고
var a 에다가 30을 넣게 되면 이 코드들은 위에서 아래로 차례대로
실행이 되면서
a 라는 녀석의 10을 넣게 되고 그 다음에 20을 넣게 되고 그 다음에
30을 놓게 됩니다
익명 함수는 이와 같은 형태로 실행이 됩니다
예를 들어서 잠시 위의 것을 지우고
아래와 같이 놓았을 때 이름을 테스트 로 바꾸도록 할게요
a 입니다 라고 출력하는 함수를 만들고
빕니다 라고 출력하는 함수를 만들고 c 입니다 d 입니다 를 만들고
실행을 하게 되면 몰 출력할 지 한번 생각을 해보세요
위에서 아래 대로 아래로 쭉 실행이 되기 때문에 우리가 마지막에 있는
녀석이 임 테스트 라는 변수를 덮어 씌워서 뒤 입니다 라는 걸 출력할
거라고 예상을 할 수 있습니다
저장을 하고 실행을 해보면 뒤 입니다 라는 글자를 출력하는 걸 확인할 수
있습니다
선언적 함수도 굉장히 비슷해요 예를 들어서
썽 션으로 테스트라는 이름으로 선언을 하게 되면
월드 에 입니다 그리고
빕니다 씨입니다 기 입니다 라고 선언을 하게 되면 실행을 했을 때
d 라는 녀석을 출력을 하게 됩니다
근데 이제 두 녀석이 섞여 있을 때가 문제가 되는데요 예를 들어서 var
테스트에
익명 함수를 넣어서 얼얼 쯤
b 입니다 라고 실행을 하고 요렇게 두 개만 남겨 보도록 하겠습니다
선언적 함수는 이 스크립트 태그를 읽을 때 가장 먼저 실행이 됩니다
따라서 에 입니다 라는 녀석이 먼저 테스트 라는 이름을 덮어 씌우기 되고
그 다음에 테스트 빕니다 라는 걸 테스트 라는 이름의 덮어 씌울 게
됩니다
따라서 저장을 하고 실행을 하게 되면 빕니다 를 출력을 하게 됩니다
근데 만약에 이 녀석이 뒤 밖에 있다
그러면 어떻게 될까요 일단 스크립트 태그를 읽을 때 선언적 함수를 먼저
읽어 들이게 됩니다 따라서 테스트 라는 이름의 a 입니다 라는걸 출력하는
함수를 넣게 되구요
이어서 요녀석을 제외를 하고 위에서 아래로 있기 때문에
깁니다 를 출력하는 게 덮어 씌우기 됩니다
따라서 저장을 하고 실행을 하면 마찬가지로 빕니다 라는 글자를 출력하는
모습을 확인할 수 있습니다
그래서 대충 2위에 녀석과 아래 녀석은 호출 되는 시점이 다르다 라고
이해를 해주시면 되겠구요
일단 오늘 강의에서 함수 를 생성하는 두 가지 방법에 대해서 살펴보았는데
자바스크립트는 함수 를 생성하는 방법이 굉장히 특이하게 되어 있어서 이
부분이 굉장히 어렵게 느껴지실 수도 있어요
일단은 그냥 이렇게 두가지 방법이 따라 고만 기억을 해 주시면 좋겠습니다
어쨌거나 그러면 두 가지 중에 어떤걸 더 많이 사용한 야 라고 물으실 수
있는데요
두가지 모두 다 굉장히 많이 사용이 됩니다 물론 어떤 책을 보게 되면
2위에 것 사이 위의 것만 사용해 다래 거는 순서 예측하기 힘들지
않냐 라고 하는 경우도 있는데요
또 어떤 이야기를 들으면 위에것은 스택 트레이스 추적이 어렵기 때문에
아래 것을 사용해 달라고 하는 경우도 있어요 그래서 사실 어떤 것을
사용하는 경우는 그 자신이 속한 팀이 나 회사의 코딩 컨벤션 을 따라
가시는게 좋을 거라고 생각을 하고요
만약에 명확한 그런게 없다 라고 생각을 하시면 상황에 따라서 대충 맞게
사용을 해주시면 되겠습니다
사실 프로그래밍 언어도 언어이기 때문에 하나만 사용하라는 것은 사실 거의
되지가 않아요
두 가지가 있다면 두 가지 모두 적절한 상황에 맞춰서 사용하시는게
좋습니다
어쨌거나 지금부터 함수의 내용을 다루게 되면 이전에 내용은 보고서 바로
직감적으로 어떤 곳에 사용되고 어떻게 활용해 되고 를 이해를 할 수
있는데
함수 부터는 이 코디에 흐름이 g7 이게 되고 조금씩 어려워지기 때문에
책의 내용을 꼭 읽으면서 진행을 해주시면 좋겠습니다
사실 책의 조금 더 많은 코드가 써 있기 때문에 한번씩 치과나 분석을 해
보시면 좋을 것이
고 생각을 합니다 어쨌건 오늘 강의는 여기까지 되겠구요
다음 강의에서 뵙도록 하겠습니다 감사합니다.