변수 선언
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();
'JS' 카테고리의 다른 글
[JS] 배열에서 특정 값의 개수 구하기 (0) | 2023.01.17 |
---|---|
[JS] Templete Literal : 백틱(``), 달러(${}) (0) | 2023.01.16 |
[JS] join() 메서드 (0) | 2023.01.13 |
[JS] Math 객체 (0) | 2023.01.13 |
[JS] Number vs parseInt (0) | 2023.01.13 |