변수, 함수(TIL - 01)

dk.han·2021년 7월 20일
0
post-thumbnail

Variable (변수)

  • Variable을 사용한다는 것?
    어떠한 Value (=Data)를 담는 저장소.
  • Declaration (선언)과 Assignment (할당)을 통해 Variable을 정의.
let age = 12;
const myName = 'Daekuen';
const isFat = true;
  • 변수명에는 공백이 있어서는 안되며, myName이나 isFat처럼 공백이 생기는 부분에 대문자를 사용용한다. 이 모양이 낙타를 닮아 'Camel case' 라고 불림.

  • 변수에는 이와 같은 Type의 데이터들이 올 수 있다.
    1.Number
    2.String
    3.Boolean
    4.Array
    5.Object
    6.Undefined
    7.Function

Function (함수)

  • 논리적인 일련의 작업을 하는 하나의 단위.
  • 반복적으로 실행되는 코드는 함수로 만들어 사용한다.
    ex) 삼각형 넓이 구하기를 Function으로 나타낸다면
function getTriangleArea(base, height) {
  const triangleArea = (base*height) / 2;
  return triangleArea
}

console.log(getTriangleArea(2,4)) // output 4

즉 어떠한 목적을 가진 작업들을 수행하는 코드들이 모인 블록!!

  • return문을 사용하면 값이 출력되고 함수는 종료된다.

  • 함수 선언 방식

함수 선언식

function getTriangleArea(base, height) {
  let triangleArea = (base*height) / 2;
  return triangleArea
}

함수 표현식

const getTriangleArea = function (base, height) {
  let triangleArea = (base*height) / 2;
  return triangleArea
};

화살표 함수

const getTriangleArea = (base, height) => {
  let triangleArea = base*height / 2;
  return triangleArea
};

함수선언식 vs 함수 표현식 차이에 대해 알아보자.

1. 문법적 차이.

함수 선언식은 variable을 let 이나 const를 사용해서 선언하는거 처럼
function을 사용하여 함수를 선언함

function apple() {
  console.log('Hello world');
}

//함수호출
apple();

함수 표현식은 익명 함수를 variable에 할당한 표현식을 함수 표현식이라 한다.

const goldApple = function() {
  console.log('Hello world');
}

//함수호출
goldApple();

2.Scope

스코프(scope)는 유효 범위라고도 하는데 어떠한 값이 영향을 미칠 수 있는 범위 라고 생각하면 이해하기가 더 수월했다. 스코프에 대한 이야기는 더 공부한 후에 자세히 다루도록 하겠다.

함수 선언문은 함수 스코프를 가진다.

  • {} 중괄호 내에서 함수를 선언해도 밖에서 함수 실행시 호출이 된다.
  • 함수 내에서 함수를 선언한 경우 밖에서 함수 실행스 Error 발생.

함수 표현식은 블록 스코프를 가진다.

  • {} 중괄호 내에서 let, const 변수에 함수를 할당하면 밖에서 함수 실행시 Error 발생.

3.Hoisting

선언문을 끌어올리는 동작을 호이스팅 (Hoistiong)이라 칭한다.

  • 함수 선언문
apple();

function apple() {
  console.log('Hello World');
}

위 코드는 함수가 정의되기 전에 apple 함수를 실행 했음에도 콘솔에 Hello World를 출력한다.
apple 함수가 호이스팅 되었기 때문!!

  • 함수 표현식
goldApple(); // Error

const goldApple = function() {
  console.log('Hello world');
}

함수 표현식의 경우 호이스팅이 일어 나지 않아 goldApple 함수는 Error 발생!!

함수 선언문은 호이스팅이 발생, 함수 표현식은 호이스팅이 발생하지 않는다.

추가적으로 공부해서 포스팅 해야할것
스코프, 호이스팅

0개의 댓글