JS(변수, 함수)

변수

var 사용

var number = 100;
console.log(number);

// 중복선언 가능 
var number = 200;
console.log(number);

/* 실행결과 */ 
100
200

let 사용

• ES6 버전에서 새로 추가된 변수 생성방법.
• 대부분의 프로그래밍언어에서 말하는 일반적인 변수 생성 규칙 따름.

let number = 100;
console.log(number);

/* 실행결과 */
 100

// 중복선언 불가
let number = 200; // 에러
console.log(number);

/* 실행결과 */
evalmachine.<anonymous>:1
let number; // 앞에서 이미 선언된 변수이므로 에러
^
SyntaxError: Identifier 'number' has already been declared

상수 const

• const 키워드로 생성된 변수는 선언과 동시에 할당이 되어야 하며, 할당된 이후에 값 변경 불가
• 대체적으로 상수의 이름은 모두 대문자를 사용하는것이 일반적.

const NUMBER = 100;
console.log(NUMBER);

/* 실행결과 */
100

typeof 연산자

• 변수의 데이터타입 확인

let exam = 100;
console.log(typeof exam);

let exam1 = "안녕하세요.";
console.log(typeof exam1);

/* 실행결과 */
number
string

 

 

 

---

함수

• function 키워드를 명시 -> 함수 이름 지정 후 괄호()명시 -> 구문화를 위한 블록 { }

function say() {
  console.log("Hello");
  console.log("안녕하세요.");
}

say()

/* 실행결과 */
Hello
안녕하세요.

Javascript에서는 변수와 함수를 동급으로 취급

• 변수에 함수를 대입할 수 있음.
• 변수가 들어가는부분에는 함수가 들어갈 수 있음.

함수를 변수에 대입하기

function say_hello(msg) {
    console.log("say_hello(%s)", msg);
}

say_hello("Hello Node!!!");

var say = say_hello;

say("안녕하세요. 노드!!!");

/* 실행결과 */
say_hello(Hello Node!!!)
say_hello(안녕하세요. 노드!!!)

익명함수

• 다른 변수에 참조시킬 목적으로 함수를 정의할 때 부터 이름없이 정의하는 형태.
• 대입문이므로 블록을 구성하는 중괄호{}뒤에 세미콜론(;)이 위치해야 한다.

var hello = function(msg) {
    console.log("hello(%s)", msg);
};

hello("안녕하세요. 노드!!!");

/* 실행결과 */
hello(안녕하세요. 노드!!!)

콜백함수

• 파라미터로 전달되는 함수
• 작성순서 : 콜백함수를 파라미터로 요구할 함수 정의 -> 콜백함수 정의 -> 사용

// 콜백함수를 파라미터로 요구하는 함수 정의.
function something(x, y, callback) {
  var result = callback(x, y);
  console.log(x + "와 " + y + "의 연산 결과는 " + result);
}

// 콜백함수로 사용될 함수 정의  
function plus(a, b) { return a+b; }  
function minus(a, b) { return a-b; }  
function times(a, b) { return a_b; }  
function div(a, b) { return a/b; }  
function f(a, b) { return a_a + b; }

// 콜백함수 사용  
something(3, 2, plus);  
something(3, 2, minus);  
something(3, 2, times);  
something(3, 2, div);  
something(3, 2, f);

/* 실행결과 */  
3와 2의 연산 결과는 5  
3와 2의 연산 결과는 1  
3와 2의 연산 결과는 6  
3와 2의 연산 결과는 1.5  
3와 2의 연산 결과는 11

익명함수 형태로 콜백함수 전달

something(2, 4, function(a, b) {
    var result = 0;
    for (let i=a; i<=b; i++) {
        for (let j=1; j<10; j++) {
            const k = i * j;
            result += k;
            console.log(i + " x " + j + " = " + k);
        }
        console.log("---------");
    }
    return result;
});

/* 실행결과 */
2 x 1 = 2
2 x 2 = 4
   ...
2 x 8 = 16
2 x 9 = 18
---------
3 x 1 = 3
3 x 2 = 6
   ...
3 x 8 = 24
3 x 9 = 27
---------
4 x 1 = 4
4 x 2 = 8
   ...
4 x 8 = 32
4 x 9 = 36
---------
2와 4의 연산 결과는 405

화살표함수

• ES6 버전부터 새롭게 추가된 구문으로 기존의 함수 문법을 간단하게 축약 가능

// 기존 익명함수
var exam = function(x) {
  return x;
};
// function키워드 삭제 후 화살표 추가
var exam = (x) => {
  return x;
};
// 파라미터가 하나인경우 파라미터 ( ) 삭제 가능
var exam = x => {
  return x;
};
// 처리로직이 return 하나인 경우 return, { } 삭제 가능.
var exam = x => x;

var exam("안녕하세요");

/* 실행결과 */
안녕하세요

화살표함수를 콜백함수로 사용

// 콜백함수 생성
function something(x, y, callback) {
    var result = callback(x, y);
    console.log(x + "와 " + y + "의 연산 결과는 " + result);
}

//화살표함수로 변환
something(2, 4, (a, b) => {
    return a*a + b + 10;
});

/* 실행결과 */
2와 4의 연산 결과는 18