윤인성 모던 웹을 위한 JavaScript + jQuery 입문 3판 34강 - 화살표 함수와 전개 연산자 > javascript

윤인성 | 모던 웹을 위한 JavaScript + jQuery 입문 3판 34강 - 화살표 함수와 전개 연산자

페이지 정보

조회: 591

본문

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

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

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

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

안녕하세요 못한 랩을 위한 자바스크립트 제이쿼리 입만 34강 되겠구요

이번 강의에서는 5장 조금 더 나아가 기의 화살 p 함수와 전개 연산자에
대해서 살펴보도록 하겠습니다
일단 화살표 암수 부터 알아보도록 하겠는데요 화살표 암드 라는건 굉장히
단순해요
기존에 우리가 익명 함수를
요러한 형태로 선언을 했었는데요 요 형태를 그냥 요렇게 변형한 것이라고
보시면 되겠습니다
특징이 있다면 한줄이 라면 괄호 를 사용하지 않아도 되고요
한주를 사용할 경우에는 그냥 마지막에 놓은 값이 바로 리 통 값이 됩니다
예를 들어서 어떤 값을 재고 파는 함수를 만든다고 할때
그냥 요란 형태로 사용하면 됩니다
그래서 요렇게 선언을 했다면 그냥 기존에 사용하던 함수와 같은 방법으로
사용할 수 있게 됩니다
일단 4일 다른 프로그래밍 언어 같은 경우에는 요런 구미 나왔을 때
굉장히 큰 반응이 많았어요
함수를 원래 따로 선언을 해야 됐는데 이렇게 내부의 람다 형식으로 선언할
수 있다는것 자체가 굉장히 충격적이고 사람들이 굉장히 와 닿았는데
자바스크립트 같은 경우에는 사실 이거 를 쓰나
이거 를 쓰나 큰 차이가 없다고 생각을 하는 경우가 많은데요
뭐 사실 큰 차이는 없습니다 어쨌거나 그래서 언제 이걸 써야 되고 언제
이걸 써야 되냐 라는 고민이 되실 수 있는데요
현재 모 자바스크립트 코드 스타일 가이드 로의 업이 mbl 자바스크립트
코드 스타일 가이드 굉장히 유명 하거든요
자바스크립트 코드 스타일 가이드 에어비앤비 거 를 보게되면 통일성을
위해서 이제 위의 것을 사용하지 말고 아래 것을 사용하자 라는 형식으로
뭐 말이 많이 나오고 있습니다 그래서 두 가지 중에 하나로 통일해서
사용하는 코딩 컨벤션 을 잡아서 그 코딩 컨벤션 에 따라서 사용을
해주시면 되겠습니다
뭐 그러면 코딩 컨벤션 을 어떻게 정한 야가 문제가 될 수 있겠는데요
인터넷 익스플로러 를 지원해야 된다면 저는 개인 쪽으로 반드시 위의 것을
사용해서 코딩을 해야 된다고 생각을 하고요
노드 js 오나 아니면 인터넷 익스플로러를 버리는 경우에는 아래 것을
사용하는 코딩 컨벤션 을 활용해도 괜찮다 라고 생각을 합니다
바벨 js 같은 아래쪽에 있는 이 크마 스크립트 식스 코드를 위에 있는
이 크마 스크립트 파이브 코드로 변환해주는 그러한 녀석들을 사용하면 뭐
아래 것을 사용해도 문제가 없지 않느냐 라고 할 수 있는데요
약간의 차이가 있기 때문에 그 차이 때문에 바벨 달째 es 같은 트랜스
파일러 가 제대로 변환을 해 주지 못하거든요 그래서 그러한 경우를
대비해서 인터넷 익스플로러 를 지원하는 경우라면 무조건 적으로 위의 것을
사용하는 것이 좋다 라고 생각을 합니다 이 두 차이를 알려면 이후에
배우는 개체 라는 내용을 알아야 되는데요
일단 그 객체라는 내용은 나중에 배우고 그 때 다시 살펴보도록 하겠습니다
일단 지금은 지금까지의 배운 내용을 활용한 차이를 살펴 보도록 하겠는데요
일단 기존에는 우리가 아기 멈추라는 개체를 활용을 해서 가변 매개 변수
암투를 만들었습니다
그런데 화살표 암도 내부에서는 아예 악 유먼 째 개체를 사용할 수
없습니다 그럼 아기만 즉 1차 없으면 어떻게 가변 매개 변수 함수 를
만든 야가 문제가 될 수 있겠는데요 이 내용이 바로 다음 절에 있는 전개
연산자 되겟습니다 전개 연산자는 뭐 굉장히 간단한 향수 인데요
점 점 점 3개를 찍은걸 전개 연선 자르고 부르게 됩니다
이 전개한 사자는 객체 또는 함수의 활용 할 수 있게 되는데요
함수의 매개변수에 활용을 하게 되면 가변 매개 변수 함수 를 만들때
활용을 할 수 있습니다
간단하게 우리가 이전에 만들었던 매개변수로 들어온 못
것을 더 않은 함수를 만들어 보도록 하겠습니다
장점 짬짬히 3개를 적어 주신 다음에 뒤에다가
식별자 들 입력을 하게 되면 u 녀석 전체가 매개 변수가 됩니다
이렇게 만들어진 매개변수는 함수가 되는데요
일단 간단하게 한번 출력을 해 보도록 하겠습니다
그냥 넘 벌주를 바로 출력을 해 보도록 할게요
그리고 저 넘버 지 에다가 맥이 반수를
12345 라고 지정을 해서 실행을 해보도록 하겠습니다
저장을 하고 실행을 해 보시게 되면 지금 화면과 같이 1 2 3 5
가 나오는 것을 확인할 수 있습니다
이 녀석의 자룡 은 배열 되겠구요 베어 림으로 그냥 반복문을 사용해서
활용해 주시면 됩니다
넘버즈 점 랭스 까지 에서
0 을 하나씩 더 해주면 되겠죠
그래서 요러한 형태로 만들기 만 하시면 이전과 같은 형식의 매개 변수를
받은 모든 녀석을 더 하는 함수를 만들 수 있습니다
전기 연산자를 사용할 때 주의점은 전개 연산자는 마지막에 하나만 사용할
수 있습니다
예를 들어서 넘버 줘 하고
ap 라고 입력을 하게 되면 있어 머리 라는 녀석을 호출 할 때 어떻게
해야될지 자체가 애매 지점
1 2 3 5 라고 입력을 했으면 ab 를 뭐 예로 해야되나
넘버즈 를 예로 해야되나 뭐 이런 고민들이 굉장히 많이 생기기 때문에
자바스크립트 개발자들은
전개한 산 자를 사용한 매개변수는 무조건 적으로
가장 마지막에 입력을 하게 설정을 했습니다
요렇게 입력을 하면 실행을 했을 때 aa 리 들어가고 ba 가 들어가고
남아있는 모든 녀석들이 전개한 전자를 활용한 매개변수의 들어가게 됩니다
또한 전기 연산자는 함수에 단 하나만 사용할 수 있습니다
만약에 뭐 넘버즈 a 와 넘버즈 비를 2개를 받고싶어서 이렇게 만들었다면
매개 변수를 입력을 했을 때 어떤 6가지가 넘버 죄이고 어떤 6과 특위가
넘버즈 빈 지 알 수 없겠죠
그래서 무조건 적으로 전기 연산자 를 활용한 매개변수는 함수의 매개
변수에서 하나만 사용할 수 있다
그리고 가장 마지막에 만 사용할 수 있다라고 기억을 해 주시면 되겠습니다
어쨌거나 정기영 전자 같은 경우에는 함수의 매개 변수를 만들 때 뿐만
아니라 함수에 매개 변수를 전달할 때도 활용할 수 있게 되는데요
간단하게 예를 들어보겠습니다 일단 써 먼로 넘버즈 를 전달을 해서 전부
더하는 간단한 예제를 그대로 유지하도록 하겠는데요
예를 들어서 배열에 1 2 3 5 6 7 8을 넣고
이 녀석을
그냥 이 녀석의 매개변수의 꼽아서 전달을 하고 싶다
그러니까 배열에 있는 데이터를 함수의 매개 변수로서 전달하고 싶은 경우가
있을 수도 있습니다
사실 왜 이걸 하냐 라고 생각하실 수 있는데요 이런 경우가 있을 수도
있기 때문에 하는 겁니다
어쨌거나 기존에는 이런 것을 할 때 책에 나오는 것처럼 어플라이 라는
함수를 사용해서
너 레 어레이를 전달을 하는 경우가 많았습니다
어플라이 라는 함수 같은 경우에는 함수를 호출 하시는 녀석인데요
내부에서 디스 키워드가 이미 하는 바를 첫 번째 매개 변수에 적게 되고
두 번째 매개 변수에는 매개 변수를 집어넣고 싶은 것을 배열로 입력을
하게 됩니다
그래서 요러한 형식을 사용할 하게 되면 뭐 매개변수로 넣은 배열에 있는
녀석들을 모두 더할 수 있습니다
참고적으로 여기가 아 이거 돼야 되는데 영을 썼네요
어쨌거나 기존에는 이러한 방법을 사용 했었는데요
전개 연산자를 사용 하게 되면 어플라이 를 그냥 호출할때 점 점 점을
찍고 배열을 넣어주시면 됩니다
이렇게 입력을 하게 되면 자동으로 배열에 있는 녀석들이 전개가 되서
그냥 1234567 파리 이렇게 들어가는 형태가 만들어지게 됩니다
그래서 이 그만 스크립트 파이브 까지는 위의 방법을 썼었는데
이후부터는 아래 방법을 쏘고 있다라고 기억을 해 주시면 되겠습니다
사실 똑같은 걸 왜 2개씩 배운 야 라고 계속 의문이 드실 분이 있는데요
자바스크립트 라는 프로그래밍 언어의 특성상 인터넷 익스플로러 같은 구버전
웹브라우저 때문에 새로운 기능을 활용하는 게 제약이 있기 때문에 새로운
기능만 배울 수가 없어서 과거의 형태 까지도 계속해서 배우는 겁니다 암
그리고 우리나라 같은 경우에는 인터넷 익스플로러의 파이가 너무 크기
때문에 이 크마 스크립트 파이브 형식을 먼저 배우고
여러분이 미래 또는 아니면 노드 js 를 활용하는 환경에 가서 이끔 아
스크립트 식스 코드를 활용할 수 있게 두 가지를 배우고 있다 라고 생각을
해 주시면 되겠습니다
어쨌거나 오늘 강의는 여기까지 되겠구요 다음 강의에서 뵙도록 하겠습니다
감사합니다.