Oxygen Cherry - Pencil
본문 바로가기

공부, 연구/개발

자바 스크립트 기초 3일차 221021

728x90

와 평일 중에 쌓인 피로가 터진 건지 

원래 체력이 미약해서 그런 건지 

짧은 영상인데도 보다가 졸았다. 

ㅠㅠㅠ

 

 

 

https://youtu.be/HQGkiD-dXFI 

이거 10,11 회를 봤다. 

 

 

 

#10. 함수(function)의 기초

함수란? 팝업 띄우기, 결제 등 자주 쓰는 동작을 위해 만드는 장치들

내장 함수: console, alert, confirm 

 

- 함수 좋은 점: 변경 쉬워서 작업 효율 올라감. 

 

+ 기본 구조 

function 함수명(매개변수 ≒ 인수명) {
 중괄호 내부는 실행 코드
 console.log('hello, ${인수명 name}");
 }

호출할 때는 함수명 ("인수 mari ")

-
function hi(name) {
 console.log('hello, ${name}");
 }

 hi("mari")

 

 

+ 매개변수가 없는 함수 예

에러 메세지 띄우기 

function showError() {
 alert ("내용") ;
 }

showError();

 

+ 매개변수 없어도 있어도 다 호출되게 하려면? 디폴트 인수를 넣거나, if를 넣음. 

펑션 함수명(인수) {
let 변수 = 'ㅇㅇ' ;
if(인수) {
변수 = "ㅇㅇㅇ ${인수}"; 
}
실행;
}

함수();
함수(인수);

- 참고로 여기서 let을 쓰는 건 바로 아래에서 if로 값을 바꾸기 때문.  

 

function hi(name="friend") {
  console.log('hello, ${name}");
  }

 hi("mari") -> hello, mari
 hi() -> hello, friend

- 디폴트값은 인수="ㅇㅇ" 이렇게 넣으면 됨. 

 

또는! 

let 새 지역변수 = 인수 || 디폴트값

 console.log('hello, ${새 지역변수 명칭}"); <- 지역변수 하나 넣어서 영향 받는 걸 바꿔주자. 

인수가 false 라면 디폴트값이 true로 뜨게 한다. 

 

 

 

혹시 이건 안되나... 

펑션 함수명(인수) {
 console.log("hello");
if(인수) {
 console.log("hello, ${name}");
}
실행;
}

 

되겠지 물론 

 

 

 

+ 지역변수와 전역변수 

지역변수: 함수 안에서만 편의 상 정의해서 사용할 수 있는 변수. 함수 밖에서 쓸 수 없다. 

전역 변수: 함수 밖에서 쓰는 변수들. 

전역이랑 이름 똑같이 할 수 있음. 전역 호출하려면 명칭 쓰면 그대로 되고 지역 호출하려면 함수명 쓰면 된다. 

다만, 함수 이후에 쓰는 전역 변수는 함수 내부에 쓴 거에 영향을 받기 때문에 관리가 힘들어짐. 

필수 변수 말고는 가급적 지역 변수를 애용하자. 

 

+ return 

리턴문 오른쪽에 값을 띄우고 즉시 종료하는 장치. 

함수를 종료하는 용도로 쓴다. 

 

 

#11. 함수 표현식, 화살표 함수(arrow function)

 

+ 함수 선언문: 선언된 함수는 따로 모이기 때문에(호이스팅) 위치가 어디든(함수 위쪽에 작성해도) 먹힘 

function showError() {

console.iog("error");

 }

 

+ 함수 표현식: 잘하면 함수 코드를 한줄로까지 줄일 수 있는 화살표 함수를 쓸 수 있음. 표현식 위에 함수 쓰면 안먹혀. 

let showError = function () {

console.iog("error");

 }

 

+ 화살표 함수

let showError = () => {

console.iog("error");

 }

 

화살표 함수 특징 

- 인수가 딱 하나라면 괄호 생략 가능. 렛(const) 변수 = 인수 => ...

- 인수가 없는 함수라면 괄호 생략 불가

- 코드 본문이 한줄이고 리턴문이 있으면(바로 리턴문이 나오면) 리턴과 중괄호를 생략해서 한줄로 표현할 수 있음. 

함수 내부의 내용이 반환값(return)만 있다면 코드블록(함수의 몸통)인  중괄호({})와  return 을 생략할 수 있습니다.

https://webclub.tistory.com/649

 

화살표 함수(Arrow function)

이 글은 [인프런] Javascript ES6+ 제대로 알아보기 - 초급(정재남)를 토대로 작성되었음을 알려드립니다. Arrow Function(화살표 함수) 다음의 ES5 의 함수 표현식 과 es2015 의 화살표 함수 를 비교해 보도

webclub.tistory.com


 

아직 배열까지 안갔으므로 오늘치 코테는 스루한다! 

 

 

하지만 뭐 풀 수 있는 게 없어... 

그렇다고 진도를 급하게 빼기에는 내 체력이 용납을 안해줘. 

 

 

그리고 주말에는 다른 걸 봐야 하기 때문에 월요일부터 다시 한다!!

 

728x90