자바스크립트 기초 문법 정리.
참고 강좌 영상 : https://youtu.be/b1tZWuLAcQU
위 강좌 #8 ~ #11 을 참고하였다.
반복문
for문
for(let i = 0; i < 10; i++){
console.log(i);
}
// i=0에서 시작해서 반복마다 i에 1을 더하며, i가 10 미만인 경우 다시 반복하고 아니면 종료한다.
for(변수; 조건; 실행){
반복할 코드
}
의 구조로 이루어져 있다.
값이 변하는 변수 i가 for문 안에서 let으로 정의되었다.
while문
let i = 0;
while(i<10){
console.log(i);
i++;
}
//i가 10 미만인 경우 계속 반복한다.while(조건){
반복할 코드
}
의 구조로 이루어져 있다.
반복할 코드 안에 '조건'를 종료시킬 수 있는 코드를 작성해야 한다.(예컨대 i++)
그렇지 않으면 조건에 아무런 변화가 없이 늘 true라서
무한루프가 실행된다.
do.. while문
let i = 0;
do {
console.log(i)
i++;
} while(i<10)
// do문 안의 코드를 while의 조건이 만족하는 한 계속 반복한다.while문 과의 차이는,
while의 조건 판별보다 do문 실행이 먼저이므로
최소한 do문을 1번은 실행한다는 것이다.
break, continue
break : 실행 즉시 반복문을 빠져나온다.
continue : 실행 즉시 다음 반복을 실행한다.
// break문
while(true){
let answer = confirm('계속 할까요?');
if(!answer){
break;
}
}
// confirm 대화상자의 '확인' 클릭 시 반복, '취소' 클릭 시 '!answer == true'가 되어 break 실행.
// 반복문을 빠져나온다.// continue문
for(let i = 0; i < 10; i++){
if(i%2){
continue;
}
console.log(i)
}
// i%2==0(false) 즉, 짝수이면 continue가 무시되고 console.log 실행.
// i%2==1(true) 즉, 홀수이면 continue가 실행되고 다음 반복으로 넘어감.
Tip!
for문 : 명확한 횟수가 정해져 있을 때.
while문 : 명확한 횟수가 정해지지 않았을 때.
사용하면 좋다.
switch문
if else문으로도 작성할 수 있는 switch문.
하지만 case가 몇가지로 분류될 때 간결한 코드 작성을 위해 사용할 수 있다.
잘못된 switch문의 사용부터 알아보자.
//잘못된 switch문
switch(fruit){
case '사과' :
console.log('100원 입니다.');
case '바나나' :
console.log('200원 입니다.');
case '키위' :
console.log('300원 입니다.');
case '멜론' :
console.log('500원 입니다.');
case '수박' :
console.log('500원 입니다.');
}
// 해당 case 이하 모든 코드를 실행한다.
해당하는 case로 이동하는 것은 성공하지만, 그 이하 모든 코드를 실행한다.
따라서 해당하는 case의 코드만 실행하고 싶다면, 코드에 break문을 추가해야 한다.
올바른 switch문 사용 + default 사용(예외처리)
let fruit= prompt('무슨 과일을 사고 싶나요?');
switch(fruit){
case '사과' :
console.log('100원 입니다.');
break;
case '바나나' :
console.log('200원 입니다.');
break;
case '키위' :
console.log('300원 입니다.');
break;
case '멜론' :
case '수박' :
console.log('500원 입니다.'); // 가격이 같은 과일 묶기
break;
default :
console.log('그런 과일은 없습니다.');
}모든 case에 해당하지 않는 경우에 실행할 코드는 'default'로 작성한다.
함수
반복해서 실행하는 코드를 묶어서 '함수'로 정의할 수 있다.
function sayHello(a, b, c)
console.log(`Hello, ${a}, ${b}, and ${c}!`);
}
function : 함수 정의
sayHello : 함수명
a, b, c : 매개변수(인자)
매개변수가 있는 함수 작성
function sayHello(name){
let msg = `Hello, ${name}`;
if(name){
msg += name;
}
console.log(msg);
}
sayHello() // "Hello"
sayHello("Woojin") // "Hello, Woojin"매개변수를 입력하지 않으면 name == undefined가 되어 if문이 실행되지 않는다.
* msg라는 변수는 함수 안에서 선언된 '지역 변수'이다.
함수 외부에서는 정의되지 않는다.
전역 변수와 지역 변수
반대로 함수 밖에서 정의되는 변수는 '전역 변수'로, 함수 내부에서 사용할 수 있다.
전역 변수를 함수 내부에서 재정의하면, 함수 밖에서도 적용된다.
let은 중복 선언이 불가능하고 재정의(수정)만 가능했다.
그런데
전역으로 let a = 1;
지역으로 let a = 2;
라고 작성하면
전역변수 a와 지역변수 a가 각각 선언되며, 서로 간섭하지 않는다.
매개변수 또한 지역변수로, 전역변수로 같은 이름의 변수가 선언되어도 영향을 받지 않는다.
Tip!
전체 서비스에서 공통적으로 사용하는 변수 외에는 '지역 변수'로 사용하는 것이 좋다.
result (결과값 반환)
함수의 결과값을 반환할 때는 result를 사용한다
function add(num1, num2){
return num1 + num2;
}
console.log(add(1,2)); // 3함수를 실행하면 return에 해당하는 값을 반환한다.
function showError(){
alert('에러가 발생했습니다.');
}
console.log(showError()); // undefinedreturn을 정의하지 않은(또는 return만 적혀 있으면) 함수는 undefined를 반환한다.
return; 을 종료 목적으로 작성할 수도 있다.
Tip!
- 함수는 한 번에 한 작업만
- 읽고 파악하기 쉽게 네이밍 (JS는 카멜 표기법 사용 -> 낙타처럼 getName 대문자로 구분)
함수 표현식 & 화살표 함수
호이스팅
sayHello():
funtion sayHello(){
console.log('Hello');
}이 함수는 동작한다.
왜냐하면, Javascript는 코드 실행 시 선언된 모든 함수 코드를 먼저 실행하고 나머지 코드를 실행하기 때문이다.
이를 호이스팅(hoisting)이라고 한다.
이 순서를 거스를 수 있는 방법이 '함수 표현식' 이다.
함수 표현식
let sayHello = function(){
console.log('Hello');
}위와 같은 코드를 '함수 표현식'이라고 한다.
호이스팅에 걸리지 않고, 해당 코드에 도달해야 함수가 선언된다.
귀찮으니 그냥 함수 선언문을 사용하자.
화살표 함수
//함수 선언문
function sayHello(name){
let msg = `Hello, ${name}`;
if(name){
msg += name;
}
console.log(msg);
}
//화살표 함수
const sayHello = (name) => { // 매개변수 1개는 괄호 생략 가능
let msg = `Hello, ${name}`;
if(name){
msg += name;
}
console.log(msg);
}
return문이 한 줄인 경우 더 간단하게 축약이 가능하다.
//함수 선언문
function add(num1, num2){
result = num1 + num2;
}
//화살표 함수
const add = (num1, num2) => {
return = num1 + num2;
}
//화살표 함수(더 축약)
const add = (num1, num2) => num1 + num2;