프론트엔드

자바스크립트의 변수 및 함수 특이사항

const, frontend, javascript, let, var, web, 익명함수, 즉시실행함수, 화살표함수

Javascript 변수의 특이사항

var 의 문제점

  • var 예약어를 빠뜨리면 전역변수가 된다.
  • 중간에 변수를 재선언 해버리거나, 재할당 해버려서 값을 예측하기 하기 어렵다. > 버그 발생

let 과 const

var : 함수 레벨의 스코프
let, const : 블록 레벨({…})의 스코프

let 도 마찬가지로 예약어를 쓰지 않으면 전역변수
재할당은 가능하지만 재선언할 경우 컴파일 오류 발생
var 의 경우 선언 전에 실행하면 해당 값으로 undefined 를 가지고 있음.
하지만 let 은 선언전에 사용할 수 없음 (=호이스팅이 없음)

const 는 상수 변수(constant variable)
const 는 재선언, 재할당 모두 불가. 블록 레벨의 스코프를 가짐.

자바 스크립트에서 변수 사용시 주의 사항

  1. 전역변수는 최소화
  2. var 변수를 사용할 경우 무조건 함수 시작 부분에서 선언할 것.
  3. for 문 안에서 카운터로 사용되는 변수의 경우 var 를 사용하지 말것.
  4. ES6 의 경우 let 를 사용할 것.

익명함수 (Anonymous function)

익명함수는 예전 C++에서는 보지 못했었고(한 5년전쯤인데.. 요새는 많이 사용하나?), C#에서는 있었는데 Javascript 에도 익명함수 개념이 있다. (반대로 전파된건가?)
함수명을 사용하지 않고 선언한 변수명으로 사용.

즉시실행함수 (Immediately-invoked function expression)

일반적으로 함수를 선언하고 정의 한 후, 호출하여 사용하는 반면
함수를 정의 하면서 동시에 실행하는 함수.

화살표함수 (Arrow function expression = Lambda)

ES6 부터 =>표기법 (화살표 표기법) 사용 가능.
화살표 함수를 사용하면 간략하게 표현 가능.

일반 함수

1
2
3
4
5
6
let hi="";
function abc(){
     return "hello!";
}
hi = abc();
document.write(hi);

익명 함수

1
2
3
4
const hi = function(){
     return "hello!";
 }
document.write(hi.name);

화살표 함수

1
2
3
4
const hi = () =>{
    return "hello!";
}
document.write(hi.name);

화살표 함수 - 중괄호 생략

1
2
const hi = () => "hello!";
document.write(hi.name);

즉시실행함수 - 매개변수 1개

1
2
3
(function abc(user){
    document.write(user + ", What up~");
})("slim8020");

화살표 함수 - 매개변수 1개

1
2
let hi = user => { document.write(user + ", what up~"); }
hi("slim8020");

화살표 함수 - 매개변수 2개

1
2
3

let sum = (a,b) => a+b;
document.write(sum(1,2));

공유하기