JavaScript

개발자들은 버튼을 누르면 창을 여닫는 기능을 추가하고 싶지만 HTML로는 이런 기능을 구현할 수 없었기에 JavaScript가 개발되었습니다. 원래의 명칭은 Script였는데 당시 Java의 인기에 편승하고자 이름을 JavaScript로 바꾸게 되었습니다.

DOM

위 소스 코드를 아래 그림 처럼 펼쳐 놓은 것이 DOM입니다.

JavaScript는 이 DOM에 있는 element(태그)에 접근하여 데이터를 변경할 수 있습니다.

변수

값을 저장하는 공간입니다. 쉽게 생각하면 텅 빈 박스 하나 만든다고 보시면 됩니다. 이 박스의 이름을 지정해 주는 것이 변수명입니다. JavaScript에서의 '='는 '오른쪽의 값을 왼쪽에 저장한다.'라는 의미입니다.

var 변수명 = 저장할 값
let 변수명 = 저장할 값
const 변수명 = 저장할 값

var(변수 재선언 O, 변수 재할당 O)

같은 변수명을 가진 변수를 아래와 같이 재선언, 재할당 할 수 있습니다.

var a = 1;    
console.log(a)  // 1 출력
var a = 2;
console.log(a)  // 2 출력
var a = 3;
console.log(a)  // 3 출력
a = 4;
console.log(a)  // 4 출력
a = 5;
console.log(a)  // 5 출력

변수 선언을 여러 번해도 에러없이 각각 다른 값이 출력될 수 있습니다.

필요할 때 마다 변수를 사용할 수 있다는(편리하다는) 장점이 될 수 있지만, 같은 이름의 변수명을 남용하는 문제와 메모리 공간의 낭비를 야기할 수 있는 단점이 있습니다. 이를 보완하기 위해 ES6부터 let, const가 추가되었습니다.

let(변수 재선언 X, 변수 재할당 O)

위의 var와 다르게 같은 이름을 가진 변수명을 재선언 할 수 없지만, 변수의 값을 재할당 할 수 있습니다.

//재선언 불가

var a = 1;
console.log(a)  // 1 출력
var a = 2;     // 에러발생!

//재할당 가능

var a = 1;
console.log(a)  // 1 출력
a = 2;
console.log(a)  // 2 출력
a = 3;
console.log(a)  // 3 출력

재선언 시 터미널창 또는 개발자도구에 아래와 같이 뜨게 됩니다.

Uncaught SyntaxError : Identifier '재선언한 변수명' has already been declared

const(변수 재선언 X, 변수 재할당 X)

변수를 재선언 할 수도, 재할당 할 수도 없습니다.

var a = 1;
console.log(a)  // 1 출력
var a = 2;      // 에러 발생!
a = 3;          // 에러 발생!

결론을 말하자면 값을 변경해야 하는 변수는 let으로 변수를 선언하고, 값을 고정해야 하는 함수는 const로 변수를 선언함으로써 메모리 공간의 낭비와 불필요한 변수의 남용을 막아야 합니다.

번외. 변수에 저장된 값은 어디에 있을까용? - 메모리 공간(하드디스크(HDD, SDD)와 램(RAM))

변수를 선언하면 변수의 값은 하드디스크(HDD, SSD)에 저장됩니다. 하드디스크는 한 번 저장되면 장치가 종료되어도 저장된 값이 삭제되지 않습니다. 하드디스크는 용량이 크기에 처리하는 속도가 느립니다. 그래서 저장된 값은 램(RAM)으로 이동합니다. 램(RAM)은 용량이 작은 대신에 처리 속도가 빠르기 때문입니다. JavaScript의 경우 램(RAM)에 어느 정도의 공간을 차지할 지 자동으로 할당해줍니다.

오브젝트(Object, 객체)

JavaScript의 자료형 중 하나 입니다. 객체형를 제외하고 나머지 자료형들은 오직 하나의 데이터(문자열, 숫자 등)만 담을 수 있어 원시형(primitive type)이라 부릅니다.
선언하는 변수가 많으면 저장 공간을 낭비하게 됩니다. 객체형은 원시형과 달리 다양한 데이터(키로 구분된 데이터 집합이나 복잡한 개체(entity))를 중괄호{} 를 이용하여 담을 수 있어서 이런 변수 선언의 남용을 방지 할 수 있습니다.

자바스크립트에서 거의 모든 것이 객체형으로 되어 있습니다.

오브젝트에 대한 자세한 내용(추가 예정)

오브젝트 접근 방법

오브젝트명.프로퍼티키명

프로퍼티(Property): 오브젝트 안에 들어있는 값을 뜻한다. '()'괄호가 없다.

오브젝트명.메소드명()

메소드(Method): 쉽게 설명하자면 오브젝트 안에 들어있는 함수이다. '()'괄호가 있다.

함수(function)

어떤 특정한 목적을 수행하는 소스를 만들 때 사용합니다.

function sum(x, y){
  alert( result ); //실행할 소스
  return x+y;// return: 함수 호출 시, 호출한 곳에 특정한 값 반환
}

let result = sum(1,2); //함수 호출

매개 변수(argument))

매개변수(parameter)를 이용하면 임의의 데이터를 함수 안에 전달할 수 있습니다. 매개변수는 인수(argument) 라고 불리기도 합니다.

만일 매개 변수에 값을 정의하지 않으면 그 값은 undefined가 됩니다.

return

함수를 호출했을 때 함수를 호출한 곳에 특정 값을 반환하게 할 수 있습니다.

return은 함수 내 어디서든 사용할 수 있습니다. 함수의 소스 코드를 해석하는 도중 return을 만나면 함수 실행은 즉시 중단되고 함수를 호출한 곳에 값을 반환합니다. 함수 하나에 여러 개의 return문이 올 수도 있습니다.

return의 값을 저장시킬 변수를 꼭 만들어 주어야 합니다.