변수

변수

값을 담기위해 이름을 붙인 상자. 메모리에 일정한 크기의 영역으로 생성

변수 선언

var wiki;

메모리에 wiki라는 이름의 영역이 생성

var wiki, muna;

쉼표를 사용해 여러개의 변수를 한 문장으로 선언 가능

var wiki;
console.log(wiki); // undefined

변수를 선언하기만 하면 기본 값은 undefined

wiki = 10;

대입 연산자로 변수에 값을 대입 가능

var wiki = 10;

선언과 동시에 초기화 가능

var wiki = 10, muna = 20;

쉼표를 사용해 여러개의 변수를 한 문장으로 선언하면서 초기화 가능

변수 선언 생략

console.log(wiki); // ReferenceError: wiki is not defined

선언되지 않은 변수 값을 읽으려고 하면 참조 오류가 발생

wiki = 10;
console.log(wiki); // 10

선언하지 않은 변수에 값을 대입하면 자바스크립트 엔진이 자동으로 전역변수로 선언하기 때문에 참조 오류는 발생하지 않음

하지만 권장하지 않는 방법이니 반드시 선언하고 사용하자

'use strict';

wiki = 10; // ReferenceError: wiki is not defined

ECMAScript 5 부터 추가 된 strict 문법을 사용하면 선언하지 않은 변수에 값을 대입할때 오류가 발생함

변수 호이스팅

console.log(wiki); // undefined
var wiki;

변수를 선언하기 전에 접근했으니 오류가 발생할 것 같지만 실제로는 발생하지 않고 undefined가 출력 됨

이는 변수를 프로그램 첫 머리로 끌어올리는 자바스크립트의 고유한 특징

console.log(wiki); // undefined
var wiki = 10;
console.log(wiki); // 10

단 선언부만 끌어올려지고 대입부는 끌어올리지 않음

타입

데이터 타입과 동적타입

데이터 타입이란 숫자나 문자처럼 변수에 저장되는 데이터의 종류를 뜻함

C와 JAVA같은 정적 타입 언어는 변수의 타입과 일치하는 데이터만 저장 가능
자바스크립트와 같은 동적 타입 언어는 변수에 타입이 없고 모든 타입의 데이터를 저장 가능

var wiki = 10;
console.log(wiki); // 10

wiki = 'wiki';
console.log(wiki); // wiki

이런 코드가 가능한 것이 동적 타입 언어

데이터 타입의 분류

데이터 타입은 크게 원시타입과 객체타입으로 나눌 수 있음

원시타입

숫자
문자열
논리값
특수 값 (undefined, null)
심벌

객체

원시타입에 속하지 않은 모든 타입
배열, 함수, 정규 표현식 등..

함수

함수란 일련의 처리를 하나로 모아 언제든 호출할 수 있게 만들어 둔 것

함수의 입력값을 인수 출력값을 반환값이라고 부름

함수 선언

function sum(x, y) {
    return x + y;
}

function 키워드를 이용해서 정의
소괄호 안에 x, y는 인수
중괄호 안에 있는 코드가 함수의 실행 작업

return문이 실행되면 제어권은 함수를 호출한 코드로 되돌아가고 return 문에 지정된 값(x+y)이 반환값이 됨

함수 이름

가독성과 유지보수를 위해 함수의 이름은 해당 함수의 기능을 이해하기 쉽게 지어야 함
일반적으로 동사 또는 동사로 시작되는 어휘로 만듦

function saveImage(img){...};
function getMousePosition(){...};

두번째 이후의 단어 첫글자는 대문자로 나머지는 소문자로 작성하는 캐멀 표기법을 권장

함수 호이스팅

console.log(sum(10, 20)); // 30

function sum(x, y) {
    return x + y;
}

자바스크립트 엔진은 변수선언과 마찬가지로 함수 선언을 최상단으로 끌어올림
함수를 정의하기 전에 실행하는 코드도 문제없이 작동

값으로서의 함수

자바스크립트에서 함수는 객체
함수를 선언하면 내부적으로는 함수 이름을 변수 이름으로 한 변수가 만들어지고
해당 변수에 함수 객체의 참조가 저장 됨

function sum(x, y) {
    return x + y;
}

const a = sum;

console.log(a(10,20)); // 30

이 변수값을 다른 변수에 할당하면 해당 변수 이름으로 함수를 실행할 수 있음

Call by reference, Call by value

함수는 원시 값을 인수로 넘길때와 객체를 넘길때 다르게 동작

function add1(x) {
    x += 1;
    return x;
}

let a = 10;

console.log(add1(a)); // 11
console.log(a); // 10

인수에 원시 값을 넘기면 복사본이 인자 x에 할당 됨
이때 x와 a는 메모리에서 별개의 영역을 가짐

즉 x의 값을 변경해도 a가 변경되지 않음

function add1(p) {
    p.x += 1;
    p.y += 1;

    return p;
}

let a = {x: 10, y: 20};

console.log(add1(a)); // { x: 11, y: 21 }
console.log(a); // { x: 11, y: 21 }

객체를 인수로 전달할때는 참조 값이 전달 됨
이때 인자 p와 변수 a는 같은 객체를 참조

함수안에서 x, y를 수정하는 것은 a가 참조하고 있는 객체를 수정하는 것과 같음

인수 여러개를 전달

function moveCircle(x, y, direction, radius, speed){
    //...
}

moveCircle(10, 20, 0, 1, 10);

인수 여러개를 전달할때는 인수의 개수나 위치에 영향을 받는 위와 같은 방법 보다는 객체를 사용한 아래와 같은 방법이 좋음

function moveCircle(params) {
    params.x += 10;
    // ...
}

moveCircle({
    x: 10,
    y: 20,
    direction: 0,
    radius: 1,
    speed: 20,
});