[JS] Javascript 이론 (1)

변수 선언

var

var i;  // 선언, "undefined"가 저장됨
var sum = 0;  // 선언과 초기화
var i, sum; // 한 번에 여러 개의 변수를 함께 선언할 수 있음
var i=0, sum=10, message=”Hello”;  
// 선언과 초기화를 동시에 해줄 수 있음
name = "javascript";  // 선언되지 않은 변수는 전역 변수가 됨

• var문에서 변수에 초기 값을 지정하지 않는다면, 변수는 값이 설정될 때까지 undefined 값을 갖게 된다.
• hosting
  • 자바스크립트 코드는 함수 안에 있는 모든 변수를 함수 맨 꼭대기로 끌어올린 것처럼 동작한다.

var scope = “global”;
function f() {
 console.log(scope);  
//"undefined"를 출력한다.(global이 아니다)
 var scope = “local”;
 console.log(scope);  //"local"을 출력한다.
}

=> 실제로 실행되는 코드는 이렇다.

function f() {
 var scope;  
//끌어올림(hoisting)이라고 한다.(대신, 정의만 끌어올려진다)
 console.log(scope);  // "undefined"가 저장되어 있다.
 scope = "local";  // 초기화는 끌어올려지지 않는다.
 console.log(scope);
}

 

let

let i;  // 선언, "undefined"가 저장됨
let sum = 0;  // 선언과 초기화
let i, sum; // 한 번에 여러 개의 변수를 함께 선언할 수 있음
let i=0, sum=10, message=”Hello”;  
// 선언과 초기화를 동시에 해줄 수 있음

• 블록 유효 범위
  • let은 변수가 선언된 블록, 구문 또는 표현식 내에서만 유효한 변수를 선언한다. 이는 var 키워드가 블록 범위를 무시하고 전역 변수나 함수 지역 변수로 선언되는 것과 다른 점이다.
• 프로그램이나 함수의 최상위에서는 let과 var는 서로 다르게 행동한다.
  • var는 전역 객체의 프로퍼티를 생성하지만, let은 전역 객체의 속성 값을 생성하지 않는다.
• hoisting되지 않습니다.
  • 변수가 초기화(선언)되기 전에 참조할 경우 ReferenceError가 발생한다.

 

const 

• 블록 범위의 상수를 선언한다. (let과 같은 블록 유효범위)
• 상수의 값은 재할당할 수 없으며 다시 선언할 수도 없다. 그래서 처음 선언할 때, 반드시 초기화를 해야한다.
• 보통 대문자를 사용해서 선언한다. (강제는 아니지만 관습!)

const MY_NUM = 7;

함수 선언

1. named function declaration (명명 함수 선언)

function hello() {
// ...}

가장 대중적인 방법이다. 함수의 이름이 hello가 된다.

호이스팅 되기 때문에 이 함수는 어느 스코프에서든 호출 할 수 있는 함수가 된다.

2. anonymous function expression (익명 함수 표현)

var hello = function () {
//...
}

이름이 없는 함수를 변수에 담은 방식이다.

이름이 없는 함수긴 한데, 자바스크립트 엔진이 이름을 변수명으로 추정하여 넣는다.

3. named function expression (명명 함수 표현)

var hello = function originalName() {
// ...
}

2와 거의 동일하다. 다른 점은 함수 이름이 명확하게 선언되어 있으므로 JS 엔진에 의해 추론되지 않는 다는 것이다.

4. Immediately-invoked expression (즉시 실행 표현)

var hello = (function () {
//...
})()

즉시 실행 함수로, 클로져를 활용할 수 있다. 내부 함수는 변수나 다른 함수등을 쓸 수 있지만,이 함수 밖에서는 완전히 캡슐화되어 접근 할 수 없다. 가장 흔해 빠진 예제 중 하나로는 카운터가 있다.

var myCounter = (function (initialValue = 0) {
  let count = initialValue
  return function () {
    count++
    return count
  }
})

myCounter()// 2
myCounter()// 3
myCounter()// 4

외부 함수에서 넘겨준 1을 가지고, 내부에서 처리를 하여 리턴하고 있다.

5. arrow function (화살표 함수)

var hello = () => {
//...}

리턴

const f1 = (x, y, z) => x + y + z

const f2 = (x, y, z) => {
  return x + y + z
}

위 f1 f2는 값이 같다. object를 바로 리턴하려면 괄호를 씌우면 된다.

const f3 = (x, y, z) => ({ x, y, z })

• 디버깅 : console.log 를 활용하여 디버깅을 해보며 개발자 도구를 통하여 확인하기
  • 에러 검출
• html 문서(DOM)에 접근하기 : 버튼을 누르면 자바스크립트의 함수가 특정 태그의 값을 바뀌는 등, 자바스크립트에서 html의 내용물을 조작하는 방법에 대해 이해합니다.

<div>
	<button id="idname" class="classname">버튼</button>
</div>

const button;
button = document.getElementById("idname"); //해당 id값을 가진요소를 반환
button = document.querySelector("#idname"); //해당 선택자를 만족하는 요소 반환
button = document.getElementByClassName("classname")[0]; //선택된 요소중 첫번째

const button = document.getElementsByClassName("div")[0].getElementsByClassName("Button")[0];

• 이벤트 리스너
  • 자바스크립트에는 다양한 이벤트 들이 있습니다. 이러한 이벤트들이 발생했을 때, 원하는 기능을 수행 할 수 있게끔 해주는 이벤트 리스너에 대하여 이해합니다.
  • 이벤트 리스너는 항상 on + '이벤트명'으로 명명된다.DOM 구조에서 이벤트는 매우 다양하지만,  자주 쓰는 이벤트는 아래와 같다.
    • onblur(객체가 focus를 잃었을 때),
    • onchange(객체의 내용이 바뀌고 focus를 잃었을 때),
    • onclick(객체를 클릭했을 때),
    • ondblclick(더블클릭할 때),
    • onerror(에러가 발생했을 때),
    • onfocus(객체에 focus가 되었을 때),
    • onkeydown(키를 눌렀을 때),
    • onkeypress(키를 누르고 있을 때),
    • onkeyup(키를 눌렀다 뗐을 때),
    • onload(문서나 객체가 로딩되었을 때),
    • onmouseover(마우스가 객체 위에 올라왔을 때),
    • onmouseout(마우스가 객체 바깥으로 나갔을 때),
    • onreset(Reset 버튼을 눌렀을 때),
    • onresize(객체의 크기가 바뀌었을 때),
    • onscroll(스크롤바를 조작할 때),
    • onsubmit(폼이 전송될 때) 등이 있다.
  • localStorage
    
    • 웹을 종료해도 데이터를 저장시키고 싶을 때 사용되는 개념

JavaScript의 최신문법 ES6 문법

let

let은 변수의 재선언은 불가능하지만, 재할당은 가능하다.

let name = 'miniddo';
console.log(name);	// miniddo

let name = 'happy';	// 변수 재선언 불가능
console.log(name);
// Uncaught SyntaxError: Identifier 'name' has already been declared

name = 'love';		// 변수 재할당 가능
console.log(name);	// love

const

const는 변수의 재선언, 재할당 모두 불가능하다.이러한 이유로 const는 재할당을 하지 않은 전역변수에 주로 쓰인다.

재할당이 필요한 경우는 let을 사용한다.

const name = 'miniddo';
console.log(name);	// miniddo

const name = 'happy';	// 변수의 재선언 불가능
console.log(name);
// Uncaught SyntaxError: Identifier 'name' has already been declared

name = 'love';
console.log(name);
// Uncaught TypeError: Assignment to constant variable

화살표 함수 선언

function() {} → () ⇒ {}

var test = () => { //함수 선언 - 생각만 하고 있는 상태
	//코드의 집합
}

test(); //함수 호출 - 코드를 실행

• function이라는 말을 생략하고 [=>]라는 화살표 기호를 사용했다고 하여 화살표 함수라고 부릅니다.
• 화살표 함수를 쓰면 구문을 더 짧고 간결하게 작성 가능합니다.

1) 표현식(명령문)이 한개인 경우

함수명 = () => 표현식;

표현식이 하나면 { }를 생략할 수 있습니다.

// 응용 코드
hello = () => alert("Hello World!");

hello();

 

2) 표현식(명령문)이 여러 개인 경우

함수명 = () => { 표현식1; 표현식2; };

표현식이 여러개이면 반드시 코드블록 { }에 묶어서 처리해야합니다.

hello = () => {
var a = 10;
var b = 10;

  console.log(a + b);
};

hello();