TIL 2. JS - 함수 (ES6 화살표 함수)

문승준·2021년 7월 29일
1

JavaScript

목록 보기
7/8
post-thumbnail

함수

  • 어떤 작업을 수행하는 statement들의 집합이다. (value를 리턴하지 않을 수도 있다)
  • 동일한 작업을 반복 수행할때 재사용이 가능하기 때문에 효율적이다. (코드의 재사용성)
  • 객체 생성, 객체의 행위 정의(메소드), 정보 은닉, 클로저, 모듈화 등 기능을 수행할 수 있다.

1. 함수의 정의와 호출

  • 함수의 정의 (선언)
function 함수명 (매개변수) {      // 함수 선언문 방식
  코드                         // 함수명 생략불가, 매개변수는 0개 이상
}			      // 매개변수 타입 작성 안함 -> 필요시 함수 내부에서 체크
			      // (return 문으로 결과값 반환 가능)
  • 함수의 호출 (실행)
함수명(인자); //함수의 정의와 호출은 별개이다.
  • 함수를 정의하는 3가지 방식 -> 함수 선언문, 함수 표현식, Function 생성자 함수
  • 함수 선언문 방식 : 함수 호이스팅 -> 함수 선언되기 전에 참조가능 (VO)
  • 함수 표현식 방식 : 변수 호이스팅 -> 함수 선언 이후 참조가능 (runtime)

2. return이 있는 함수

  • return 값 콘솔에 나타내기
function getMyAge() {
  let myAge = 33;
  return myAge;
}

getMyAge(); // 함수의 실행 -> 리턴값이 보이진 않는다.
console.log("my age: ",getMyAge()) // 'my age: '33
  • return 값은 변수에 할당 가능
function getMyAge() {
  let myAge = 33;
  return myAge;
}

let myAgeNextYear = myAge + 1;
console.log(myAgeNextYear) // 34
  • console.log 값은 변수에 할당 불가능
console.log(300) // 300
let myNumber = console.log(300); // 300
console.log(myNumber) // undefined (myNumber라는 변수는 선언되지 않았다)

함수 안에서 명령문들을 실행하다가 return을 만나면 함수를 빠져나가게 된다. 그리고 return문에 있는 것을 반환한다.

3. input이 있는 함수

  • parameter (매개변수) : 함수와 메서드 입력 변수(Variable) 명

  • argument (인자,전달인자) : 함수와 메서드의 입력 값(Value)

  • 매개변수가 있는 함수

function getFullName(firstname, lastname) {
  let fullName = firstname + lastname
  return fullName
}

let myFullName = getFullName('Seungjun', 'Moon')
console.log(myFullName) // 'SeungjunMoon'

let myFullName = getFullName1('Seungjun')
console.log(myFullName) // 'Seungjunundefined' -> 매개변수만큼 인자가 필요하다

4. 화살표 함수 (ECMA Script 6)

  • 화살표 함수의 선언 (익명 함수로만 사용)
// 매개변수
()    // 매개변수 없을 경우
x     // 매개변수가 하나이면, 소괄호 생략 가능
(x,y) // 매개변수가 여러개이면, 소괄호

// 코드블럭
x => { return x * x}
x => x * x          // 한줄의 코드는 중괄호 생략가능, 암묵적 return

//ES5
let multi = function (x) { return x * x}
console.log(multi(10)) // 100

// ES6
let multi = x => x * x
console.log(multi(10)) // 100

// 콜백 함수로 활용
let arr = [1, 2, 3]
let pow = arr.map(x => x * x)
console.log(pow) // [1, 4, 9]
  • 일반 함수와 가장 큰 차이점은 this 이다.

"함수 내부에서 선언한 변수는 외부에서 적용되지 않는다 ?
변수에서 언급했던 Hoisting과 Scope 등 JS 작동원리에 대해 알아볼 예정이다."
🤔

참조목록

profile
개발자가 될 팔자

2개의 댓글

comment-user-thumbnail
2021년 8월 4일

승준님 안녕하세요😀 인사하고 싶어서 velog 방문했어요❗ 한사랑 코딩회 화잇힝😀

1개의 답글