24.02.02
오늘은 JavaScript의 변수, 함수, 조건문, 반복문, 타입에 대해 알아보겠습니다.
변수
변할 수 있는 값 (선언하고 할당하여 사용)
var, let, const의 키워드 사용
var : 중복선언 가능, 재할당 가능
let : 중복선언 불가, 재할당 가능
const : 중복선언 불가, 재할당 불가
+ 변수명 지정
1. $와 _를 제외한 여러 문자는 사용 불가능
2. 첫 글자는 숫자가 될 수 없음
3. 대소문자 구별
4. 예약어 사용 불가
5. 유니코드 문자 사용, 허나 주로 실무에서 영어를 사용
+ 변수 특징
1. var, let 두 가지 키워드는 변수, const 키워드는 변경할 수 없는 상수를 의미
2. var, let, const 키워드는 변수를 선언할 때 한 번만 사용
3. var 키워드가 생략된 변수는 엄격모드(strict mode)에서 에러가 발생됨으로 권장되지 않음
4. let과 const는 블록레벨 선언으로 불림, 선언된 코드 블록 밖에서 접근할 수 없음
= const의 경우에는 재정의가 불가능한 특징을 가지고 있으므로 반드시 초기화가 필요
+ 블록 스코프 (Block Scope)
여러 줄의 코드를 하나로 묶어주는 단위를 뜻함 (블록 : {})
블록 안에서만 유효한 코드의 범위를 블록 스코프라 함
+ Error
const values = []; // 1번
values.push(10); // 2번
Q. const가 재할당이 불가하지만 에러가 나지 않는 이유는?
A. 값이 추가되어도 values가 가리키는 값은 주소이기 때문에 에러가 나지 않음, 배열의 주소값은 그대로
함수
function 함수이름(parameter1, parameter2...) { // 함수의 선언
// 실행코드...
return 반환값
}
함수이름(argument1, argument2...) // 함수의 호출
매개변수와 전달인자
Parameter (파라미터) : 매개변수 / 함수와 메서드에 입력 변수 이름 / 선언
Argument (아규먼트) : 전달인자, 인자, 인수 / 함수와 메서드에 실제 입력되는 값 / 실제 값
+ console.log와 return의 구분
console.log : 콘솔 창 표시 (단순 출력)
return : 해당 함수의 실행이 반환되는 값을 전달, 함수 내부에서 return을 만나게 되면 해당 함수는 종료
// 함수
// 읽어볼만한 문헌 : https://ko.javascript.info/function-basics
// 1번
function 안녕(파라미터) {
console.log(파라미터);
console.log('hello');
return 100;
}
let 아규먼트 = 1000;
안녕(아규먼트);
console.log(안녕(아규먼트) + 안녕(아규먼트));
// 2번
function 안녕() {
console.log('hello');
}
안녕();
console.log(String(안녕()) + String(안녕()));
// 3번
function 안녕() {
console.log('hello')
return 10
}
안녕()
console.log(String(안녕()) + String(안녕()))
// 4번
function 안녕() {
console.log('hello')
console.log('hello')
console.log('hello')
return
console.log('hello')
console.log('hello')
console.log('hello')
}
안녕()
+ 함수 이용
1. 재사용성이 높음
2. 유지보수가 용이
3. 구조파악이 용이
+ 함수의 아규먼트에 따른 반환값
function 함수1 (a, b, c) {
return a + b + c
}
// 콘솔창의 기능, 마지막 라인에 한하여 console.log()를 찍지 않아도 return값을 console창에 출력
함수1(10, 20, 30)
함수1(10, 20, 50)
// 다음 실행 값?
console.log(함수1(10, 20, 30))
console.log(함수1(10, 20, 50))
// 필요 이상의 아규먼트를 넣었을 때
함수1(10, 20, 30, 40) // Error내지 않음, 60
// 필요 이하의 아규먼트를 넣었을 때
함수1(10, 20)
/*
function 함수1 (a, b, c) {
return a + b + String(c)
}
함수1(10, 20) // '30undefined'
*/
= 함수에 전달되는 아규먼트 (인자)는 매개변수보다 적거나 많아도 에러가 발생하지 않음
함수 선언 방법
1. 함수 선언문과 함수 표현식
함수는 function + 제목 + ( ) + { }의 조합인 구문 (Statement)으로 선언
제목 없이 선언하여 값으로 할당하는 표현식(Expression)으로 선언하는 것도 가능
// 함수 선언문
function sum(x, y) {
return x + y;
}
// 함수 표현식
let sumXY = function(x, y) {
return x + y;
};
console.log(sum(10, 20));
console.log(sumXY(10, 20));
+ 구문(Statement)과 표현식(Expression)
구문 : JS 명령문, 어떤 작업을 수행하기 위한 코드 블록
ex) if문, switch문, for문 등 포함
표현식 : 값으로 평가될 수 있는 것, 숫자나 문자열 같은 값 자체나 비교 연산자가 해당
= 함수 표현식이라 칭하는 이유 : 함수를 값처럼 사용하기 때문
2. 화살표함수
함수 선언 시 function 키워드를 화살표 기호로 대체하여 표현할 수 있음
화살표함수 선언 시 제목 지정 불가, 표현식으로 사용해야 함
// 읽어볼만한 문헌 : https://ko.javascript.info/arrow-functions-basics
function 함수1(x, y) {
return x + y
}
// 위 함수를 화살표 함수로 작성하면 아래와 같음
let 함수1 = (x, y) => x + y
// 만악 함수 실행시 전달하는 인자가 한 개라면 소괄호를 생략 가능
let 함수2 = x => x + 10
// 화살표 함수 내부에서 한 줄 표현식만 반환한다면 return 키워드를 생략해도 됨
let 함수3 = x => x + 10
let 결과 = 함수3(2);
console.log(결과);
= 이런 방식의 익명 함수 표현식을 다른 언어에선 람다식이라고 칭함
3. 즉시실행함수 (IIFE, Immediately Invoked Function Expression)
함수를 정의함과 동시에 즉시 실행하는 방법
코드를 캡슐화하여 모듈화 된 코드를 작성할 수 있게 함
(function() {
console.log('이 함수는 만들어지자마자 바로 실행됩니다!');
})();
(function() {
document.querySelector(".btn").addEventListener("click", function() {
console.log('click!')
});
})();
조건문
조건에 따라 실행되는 코드
참(Truthy)인 값, 거짓(Falsy)인 값을 반환하는지에 따라 코드를 수행할지 수행하지 않을지 판단
1. if문
/**
if (조건식) {
// 조건식이 참일 때 실행될 코드
}
*/
let test=5;
if(test < 10) {
//codes
}
+ 중괄호 안의 코드가 한 줄이라면 중괄호 아래와 같이 생략해서 쓸 수 있음
if (true) console.log("중괄호를 생략했습니다.");
= 여러 사람이 코드를 보게 될 경우 가독성을 위해 생략하지 않는 것을 추천
+ if-else문
if문은 조건이 참일 때만 실행
그 밖의 상황인 조건이 거짓일 때 사용하는 코드는 else문
let x = 3;
let y = 7;
if(x == y) {
document.write('if문으로 실행되었습니다.');
} else {
document.write('else문으로 실행되었습니다.');
}
if와 else를 결합하여 아래처럼 다양한 경우를 대응하도록 코드를 작성할 수 있음
let score = 69;
let money = 1000;
if (score > 90) {
document.write('참 잘했습니다!<br>');
money += 100000
} else if (score > 80) {
document.write('잘했습니다!<br>');
money += 10000
} else if (score > 70) {
document.write('했습니다!<br>');
money += 1000
} else {
money = 0
}
document.write(money);
= score > 90이 참을 반환하면 첫 번째 블록 안에 코드가 실행됨
score > 90이 거짓을 반환하고 score > 80이 참일 때 두 번째 블록 안의 코드가 실행
이 모든 조건이 거짓을 반환할 경우 else 블록 안의 코드가 실행됨을 의미
2. 삼항연산자 (Conditional Ternary Operator)
if-else 문을 간단하게 표현하는 방법
삼항연산자, 삼항조건연산자, 삼항식 등 여러 가지 이름으로 불림
삼항연산자 기본 구조
조건식 ? 조건식이 참일 때 실행될 코드 : 조건식이 거짓일 때 실행될 코드
조건식이 참을 반환하면 콜론(:) 앞의 코드가 실행되고, 거짓을 반환하면 콜론 뒤의 코드가 실행
let item = true ? console.log('true') : console.log('false');
console.log(item);
item : 변수에 값을 할당하는 삼항연산자
true : Truthy 값, 때문에 console.log('true')가 실행 후 그 반환값이 item에 할당
console.log함수는 반환값이 undefined이므로 item에는 undefined가 할당
+ if문과 삼항연산자의 구조 비교
// if-else 문
if (조건식) {
// 조건식이 참일 때 실행될 코드
} else {
// 조건식이 거짓일 때 실행될 코드
}
// 삼항연산자
조건식 ? 참일 때 실행될 코드 : 거짓일 때 실행될 코드
+ ex)
let price = 5000;
let message = (price>6000) ? '비싸요!' :
(price<3000) ? '엄청싸요!' : '적당해요!';
// 위의 코드는 아래와 같음
let price = 5000;
let message = '';
if (price > 6000) {
message = '비싸요!';
} else if (price < 3000) {
message = '엄청싸요!';
} else {
message = '적당해요!';
}
+ 삼항 조건 연산자가 너무 많은 조건들을 비교할 경우 if문에 비해 가독성이 떨어질 수 있으니 주의해야 함
3. switch문
switch case문은 하나의 변수를 여러 값과 비교하여 실행 코드를 결정하는 조건문
switch case문 기본 구조
switch (표현식) {
case 값1:
// 값1에 대한 실행 코드
break;
case 값2:
// 값2에 대한 실행 코드
break;
...
default:
// 모든 case에 해당하지 않을 때 실행될 코드
break;
}
이 코드에서 표현식은 case 문의 값과 비교할 변수
표현식의 값과 case의 값이 같은 경우 해당 case의 실행 코드가 실행
표현식의 값과 case의 값이 같은 경우 해당 case의 실행 코드가 실행
+ switch문 특징
1. switch 뒤에 오는 표현식들의 값에 따라 실행시킬 코드가 있는 곳으로 옮겨감
2. 코드 실행 후 break에 의해 조건문을 빠져나옴
3. 표현식이 case와 일치하는 경우가 없다면 default문으로 이동
= default문은 필수 아닌 선택사항
+ ex)
switch (new Date().getDay()) {
case 1:
document.write('월요일입니다.');
break;
case 2:
document.write('화요일입니다.');
break;
case 3:
document.write('수요일입니다.');
break;
case 4:
document.write('목요일입니다.');
break;
case 5:
document.write('금요일입니다.');
break;
default:
document.write('금금요일입니다. 주말이 뭐죠?');
break;
}
= JS 내장 Data() 함수를 통해 현재 시간 정보를 반환, getDay() 함수로 시간에서 요일 정보만 추출
switch문은 case마다 break;라는 코드를 작성하도록 되어 있음, 만약 해당 코드 (break)가 없다면?
let price = 0;
let menu = '카페라떼'; // 메뉴를 바꿔보세요!
switch (menu) {
case '아메리카노':
price = 4000;
case '카페라떼':
price = 5000;
case '바닐라라떼':
price = 6000;
case '콜드브루':
price = 5500;
case '딸기라떼':
price = 7000;
case '레몬에이드':
price = 6500;
case '에스프레소':
price = 3500;
case '루이보스':
price = 4500;
default:
console.log('메뉴를 정확히 입력하세요.');
}
= default 문이 실행되어 가격이 4500 출력됨
즉 break가 없다면 switch문을 탈출하지 않고 모든 코드를 순서대로 실행
switch문을 적절하게 사용하고 싶다면 반드시 break를 작성
반복문
const cars = ["BMW", "Volvo", "Saab", "Ford", "Flat", "Audi"];
let text = "";
`
<section>
<h2>BMW</h2>
</section>
<section>
<h2>Volvo</h2>
</section>
...
`
+ 만약 배열 cars에 담긴 내용을 전부 text라는 변수에 넣고 싶다면?
1. 기존 방식 CODE
text += '<section><h2>' + cars[0] + '</h2></section>'
text += '<section><h2>' + cars[1] + '</h2></section>'
text += '<section><h2>' + cars[2] + '</h2></section>'
text += '<section><h2>' + cars[3] + '</h2></section>'
text += '<section><h2>' + cars[4] + '</h2></section>'
console.log(text)
// document.body.innerHTML = text
// document.write(text)
2. 반복문 사용
const cars2 = ["BMW", "Volvo", "Saab", "Ford", "Flat", "Audi"];
let text2 = ''
for (let i = 0; i < cars2.length; i++) {
text2 += '<section><h2>' + cars2[i] + '</h2></section>'
}
text2
= 가장 많이 사용되는 반복문 : for문
+ for문 구성
1. 변수를 선언하는 초기화식
2. 결과 (true or false)에 따라 실행문의 실행 여부를 판단하는 조건식
3. 실행문 이후 변수의 증감을 나타내는 증감식
for(초기화식; 조건식; 증감식) {
실행문;
}
+ for문 다양한 예시
// 반복문
for(var i=0; i<10; i++) {
document.write(i, '<br>');
}
// 1부터 100까지의 짝수의 합
let s = 0;
for (var i = 0; i < 101; i+=2) {
document.write(i, '<br>');
s += i;
}
document.write(s, '<br>');
// 구구단
for (var i = 2; i < 10; i++) {
for (var j = 1; j < 10; j++) {
document.write(`${i} X ${j} = ${i*j} <br>`);
}
}
// 100보다 작은 3의 배수와 5의 배수의 합
s = 0;
for (var i = 0; i < 101; i++) {
if(i%3==0 || i%5==0) {
document.write(i, '<br>');
s += i;
}
}
document.write(s, '<br>');
// 평균 구하기
var value1 = [100, 200, 50, 400, 900];
var value2 = [60, 40, 80, 30, 90];
function average(value) {
var sum = 0;
for(var i=0; i<value.length; i++) {
sum += value[i];
}
return sum/value.length;
}
document.write('평균1 : ', average(value1)); //330
document.write('<br>');
document.write('평균2 : ', average(value2)); //60
// 최댓값 구하기
var value = [100, 200, 50, 400, 900];
function maximum(value) {
var max = 0;
for(var i=0; i<value.length; i++) {
if(max < value[i]) {
max = value[i];
}
}
return max;
}
document.write(maximum(value)); //900
document.write('<br>');
// Math.max.apply() 사용해서 최댓값 구하기
var max2 = Math.max.apply(null, value);
document.write(max2); //900
+ for문 선택적 사용
let i = 0; // 변수 선언
for (; i < 7; i++) {
console.log('count: ' + i)
}
= 조건식 또한 선택적으로 사용 가능
하지만 생략할 경우 무조건 true로 평가되기 때문에 코드를 무한 반복하게 됨
실행문 안에 별도 조건문을 넣어 무한루프에 빠지지 않도록 주의
for (let i = 0;; i++) {
if (i > 7) { console.log(i + '살은 초등학생입니다.' )}
if (i >= 13) break;
}
= for문의 반복 실행은 break문을 통해 빠져나오기
+ 모든 구성요소 생략 시 마찬가지로 무한루프에 빠짐
let i = 0;
for(;;) {
i++;
console.log('count: ' + i)
if(i >= 10) break;
}
+ 초기화식, 조건식, 증감식을 구분하는 사이의 세미콜론(;)은 생략 불가
= 모든 구성요소 생략 시 세미콜론은 반드시 2개 모두 포함되어야 함
while문
주어진 조건식이 참일 때 반복적으로 실행되는 반복문
while문 기본 구조
while (조건식) {
// 조건식이 참일 때 실행될 코드
}
조건식은 Truthy 또는 Falsy값을 반환하는 표현식
조건식이 Truthy를 반환하면 중괄호 안의 코드가 반복적으로 실행
조건식이 falsy 값을 반환하는 순간 반복이 종료
+ ex)
let num = 0;
while (num < 11) {
document.write(num, '<br>');
num += 1;
}
변수 num을 0으로 초기화하고 num이 11보다 작을 때까지 반복적으로 실행
반복문 안에서는 num의 값이 출력되고 num은 1씩 증가
+ do-while 반복문
조건식이 거짓이더라도 반복문이 최소한 한 번은 실행되어야 할 때 사용
이렇게 동작되는 이유는 while 반복문과 다르게 조건식이 반복문 안의 코드 실행 이후에 평가되기 때문
따라서 do-while 반복문을 사용하면 최소한 한 번의 실행이 보장
+ ex)
let input;
do {
input = prompt("숫자를 입력하세요.");
} while (isNaN(input));
console.log("입력한 숫자는 " + input + "입니다.");
= 사용자로부터 입력을 받는 코드를 작성할 때 최소 한 번은 입력을 받도록 할 수 있음
let num = 0;
do {
document.write(num, '<br>');
num += 1;
} while (num < 11);
Break & Continue
// 예시 1
let num = 0;
while (num < 11) {
num++;
document.write(num, '<br>');
if(num > 5){
break;
}
}
// 예시 2
let i = 0;
while (i < 100) {
i++;
if (i === 14) {
console.log(i + '살 부터 중학생이 됩니다.');
break;
}
}
console.log('중학교 입학을 축하합니다');
break : 반복문 종료 후 빠져나옴
continue : 반복문의 다음 반복으로 이동
= 변수 i가 13보다 작다는 조건문에서 continue가 실행되기 때문에 해당 조건의 반복을 넘어 다음 반복으로 이동
따라서 if 조건문에서 flasy값을 반환하는 13 이상의 변숫값부터 console.log(i + '살은 청소년입니다.')가 실행
만약 continue가 실행되지 않았다면 0살은 청소년입니다. ~ 19살은 청소년입니다. 가 모두 실행
for (let i = 0; i < 20; i++) {
if (i < 13) continue;
console.log(i + '살은 청소년입니다.');
}
타입은 2월 5일에 함께 정리해서 올리도록 하겠습니다.
필요 정보나 코드는 제 GitHub에서 확인하시면 될 것 같아요 :)
https://github.com/soohyun020812/ormcamp
GitHub - soohyun020812/ormcamp: 오름캠프 교육에서 활용한 실습 내용들 정리
오름캠프 교육에서 활용한 실습 내용들 정리. Contribute to soohyun020812/ormcamp development by creating an account on GitHub.
github.com