반복문
반복문은 어떤 작업(코드들)이 반복적으로 실행되도록 할 때 사용한다. for문은 반복 횟수를 알고 있을 때 주로 사용하고, while문은 조건에 따라 반복할 때 사용한다.
for 구문
for (초기화; 조건식; 증감문){
// 반복할 내용
}while 구문
for문이 정해진 횟수만큼 반복한다면, while문은 조건식이 true일 경우에 계속해서 반복한다.
조건식에는 비교 또는 논리 연산식이 주로 오는데, 조건식이 false가 되면 반복 행위를 멈추고 while문을 종료한다.
초기화;
while (조건식){
// 반복할 내용
증감문;
}do-while 구문
조건에 따라 반복을 계속할지를 결정할 때 사용하는 것은 while문과 동일하다.
다만, 무조건 중괄호 {} 블럭을 한번 실행하고, 조건을 검사하여 반복을 결정한다.
초기화;
do {
// 반복할 내용
증감문;
} while (조건식);
// 조건식이 false일 경우 (do-while문 종료)for문과 while문의 차이점
| for 문을 사용하는 경우 | while 문을 사용하는 경우 |
|---|---|
| 1. 반복 횟수가 정해진 경우 | 1. 무한 루프나 특정 조건에 만족할 때까지 반복해야하는 경우 |
| 2. 배열과 함께 주로 많이 사용 | 2. 주로 파일을 읽고 쓰기에 많이 사용 |
break문
for문, while문, do-while문을 종료. (반복을 취소)
switch문을 종료.
대개 if문과 같이 사용되어 if문의 조건식에 따라서 for문과 while문을 종료할 때 사용한다.
continue문
for문, while문, do-while문에서 사용하며 for문에서 continue를 만나면 증감식으로 바로 이동하게 한다.
while문, do-while문은 조건식으로 이동하도록 한다.
함수 생성 방법
함수 선언식 (function statement)
func1(); // 함수 호출 (호이스팅)
function func1() {
// 기능 구현
} // 함수 선언- 함수 선언 방식은 함수 리터럴 형식과 같다.
- 함수 선언문은 반드시 함수 이름을 명시해주어야 한다.
- 함수 이름으로 함수를 호출한다.
함수 표현식 (function expressions)
const func2 = function () { // 기능 구현 };
// 변수 func2에 익명함수 할당
func2(); // 함수 호출- 함수 표현식이란 함수 리터럴로 생성한 익명함수를 변수에 할당하는 방법이다.
함수의 참조값이 func2 라는 변수로 저장된다. - 위의 예시에서 func2 는 함수의 이름이 아닌 변수이다. function은 익명함수이고 함수가 할당된 변수인 func2 를 통해 호출할 수 있다. ex)
func2(); - 함수 표현식에서 익명함수가 아닌
const func2 = function func3() { ... }과 같이 함수에 이름이 지정되어 있어도 변수 이름을 사용하여 함수르 호출해야 한다. 함수에 이름을 정하면 코드를 디버깅할 때 도움이 된다. - 함수 표현식에 함수 이름을 지정했다고 해도, 호출 방식에는 영향을 미치지 않는다. (호이스팅 되지 않음)
함수 생성 방법의 차이점
호이스팅 (hoisting)
호이스팅 개념 : 끌어올림. 자바스크립트 엔진이 script 태그를 만나면 자바스크립트 파일을 먼저 쭉 읽으면서 선언된 변수와 함수를 메모리에 저장한다. 이 과정이 끝나면 코드가 위에서부터 차례대로 실행된다.
즉, 코드에서 함수나 변수를 코드의 하단부에 선언했다고 하더라도 코드의 상단부에서 함수를 호출(실행)할 수 있는 JavaScript 만의 특징이다.
func1(); // 'hello'
func2(); // undefined
function func1() { console.log('hello') } // 세미콜론(;) X
const func2 = function() { console.log('hello') }; // 세미콜론 O| 함수 선언식 | 함수 표현식 |
|---|---|
| 호이스팅이 된다. | 호이스팅이 되지 않는다. |
| 선언시 세미콜론 사용 X | 선언시 세미콜론 사용 |
함수 표현식 vs 화살표 함수
화살표 함수 표현식 : ES6부터 추가된 함수 표현식(익명 함수)의 단축 표현.
함수 표현식과 완전히 같지 않으므로 주의해야 한다.
// 함수 표현식
const func1 = function(x) { // 함수 내용 };
// 화살표 함수 표현식
const func2 = (x) => { // 함수 내용 };함수 표현식과 화살표 함수의 차이점
this의 값이 함수를 정의할 때 결정된다.
함수 표현식으로 정의한 함수의 this 값은 함수를 호출할 때 결정된다. 메소드가 어디서 정의되었는지에 상관없이 this는 '점 앞의' 객체가 무엇인가에 따라 '자유롭게' 결정됨.
그러나 화살표 함수의 this 값은 함수를 정의할 때 결정된다. 즉, 화살표 함수 바깥의 this 값이 화살표 함수의 this 값이 된다.
