오늘은 자바스크립트 기초를 다시 한번 공부해보는 두번째 시간을 가져 보겠습니다.

그럼 시작하겠습니다.

출처:
유튜브: 코딩앙마

---

함수

코드

funtion hello(name) {
	console.log(`Hello, ${name}`);
  }
hello('jin');

• function : 함수
• hello : 함수명
• name : 매개변수 혹은 인수라고도 한다. 값이 한개, 여러개 혹은 없을 수도 있다. 값이 여러개 이면 ,로 구분해서 쓰면된다.

함수를 사용하면 재사용성과 유지보수가 좋다는 장점이 있다.

---

전역변수와 지역변수

• 전역변수와 지역변수는 간섭을 받지 않기 때문에 같은 이름을 붙여 주어도 에러가 안난다.

코드

let msg = 'welcome'; //전역 변수
console.log(msg); // 'welcome'

funtion sayHello(name) {
  let msg = 'hello'; //지역 변수
  console.log(`msg ${name}`);
}
sayHello('jin'); //'hello jin'
console.log(msg); //'welcome'

매개변수로 받은 값은 복사된 후 함수의 지역변수가 된다.
전체적 서비스에서 공통으로 바라봐야 되는 변수를 제외 하고는 지역 변수를 쓰는 습관이 좋다.
전역 변수가 많아 지면 관리가 힘들기 때문이다

젼역변수와 지역변수가 같은 이름일때 코드

let name = 'welcome';

function sayHello(name) {
  console.log(name);
}
sayHello(); // undefined
sayHello('jin'); // 'jin'

전역변수로 name을 지어도 sayHello 함수 안의 name의 변수로는 쓸 수 없다.

---

||을 사용한 코드

funtion sayHello(name) {
  let newName = name || 'friend';
  let msg = `welcome, ${newName}`;
  console.log(msg);
}
sayHello(); // 'welcome, friend'
sayHello('jin'); // 'welcome, jin'

• 위의 코드에 매게변수의 기본값을 설정 해주면 더 간단해 진다.

수정된 코드

funtion sayHello(name = 'friend') {
  let msg = `welcome, ${name}`;
  console.log(msg);
}
sayHello(); // 'welcome, friend'
sayHello('jin'); // 'welcome, jin'

---

반환하는 함수(return)

• 함수를 종료하는 목적으로 사용한다.

funtion sayHello(name = 'friend') {
  alert('hi');
  return;
  alert('실행 안됨'); // 윗 줄에서 리턴해서 sayHello() 함수가 종료 되었기 때문에 실행 안된다.
}
const result = sayHello();
console.log(result);

함수

• 한번에 한작업에 집중
• 읽기 쉽고 어떤 동작인지 알 수 있게 네이밍
• 예제
  • showError // 에러를 보여줌
  • getName // 이름을 얻어옴
  • createUserData // 유저데이터 생성
  • checkLogin // 로그인 여부 체크

---

함수 선언문 VS 함수 표현식

함수 선언문

sayHello(); //위에서 호출해도 동작한다.

funtion sayHello() {
  console.log('hello');
}
//sayHello();

함수 표현식

let sayHello = function() {
  console.log('hello');
}
sayHello();

2가지 동작의 차이?

함수 선언문은 어디서든 호출 가능(호이스팅)하지만 함수 표현식은 불가능하다.

---

화살표 함수로 바꾸보기

일반 함수

let add = function(nem1, num2) {
  retrun num1 + num2;
}

화살표 함수

//1. {}과 return을 사용
let add = (num1, num2) => {
  retrun num1 + num2;
}

//2. 코드 구문이 한줄이고 리턴문이 있기 때문에 ()로 쓸수 있다
let add = (num1, num2) => (
   num1 + num2;
)

//3. 코드 구문이 한줄이면 ()도 생략 가능
let add = (num1, num2) => num1 + num2;

//4. num1, num2 같은 인수가 하나라면 () 생략 가능하다.
let add = num => num1 + num2;

위의 3가지 코드는 다 똑같은 코드이다.
여러줄의 코드가 있을때는 {}을 써야하지만, 한가지만 있는 경우는 ()쓰거나, ()도 생략가능하다.