(1) 과 이어서 자바스크립트 공부 시작! 📖
참고영상: 제로초 ES2021 자바스크립트 강좌 유튜브
undefined 와 null
이 둘은 빈 값(비어있음을 의미)을 표현한다는 공통점이 있지만, 차이점도 있습니다.
undefined
console.log로 출력하면 항상 부수적으로 undefined가 식의 결괏값으로 반환됐습니다.
console.log('hello world')
hello world
undefined돌려줄 게 없으면 undefined를 돌려줍니다.
typeof undefined;
'undefined'typeof로 자료형이 뭔지 가리면 undefined가 나옵니다. 그리고 불 값으로 형 변환했을 때 false가 나옵니다.
!!undefined;
false단, undefined와 false가 같지는 않습니다. 알아두어야 할 것
null
undefined처럼 빈 값을 의미하지만 같지는 않습니다.
undefined == null;
true
undefined === null; //자료형까지 비교했을 때
falsenull도 형 변환을 하면 false가 됩니다.
null과 undefined는 둘 다 빈 값이라서 어떨 때 사용하는지 헷갈릴 수 있습니다. undefined는 기본값이라는 의미라도 있지만, null은 역할이 없습니다. 일부 개발자는 null을 의도적으로 사용하는 경우도 있는데, 변수를 배울 때 알아봅시다.
변수
프로그램을 만들 때 잠깐 동안 특정한 값을 저장해야 하는 상황이 자주 발생합니다.
이때 사용하는 것이 변수입니다.
> let string = 1234;
< undefined
> string
< 1234이렇게 string 이라는 변수의 이름을 설정해준 다음 = 로 값을 넣어주고 그 이름을 다시 입력하면 변수 안에 저장 된 '1234'라는 값을 내어준다.
let numberOne = 123;
undefined
let numberTwo = 456;
undefined
let numberThree = 789;
undefined
numberOne
123
numberTwo
456
numberOne + numberThree
912이렇게 저장된 값을 활용한다.
let total = 32000;
undefined
total
32000
console.log(total);
32000이런식으로 total 처럼 값을 저장하고, 저장한 값을 불러올 수 있게 하는 것이 변수(variable)입니다. 변수를 만드는 행위는 선언(declaration)한다고 표현하므로 앞으로는 변수를 선언한다고 하겠습니다. 변수를 선언함과 동시에 값을 대입하는 행위를 초기화(initialization)라고 합니다. 그리고 변수 선언은 항상 결괏값이 undefined라고 출력됩니다.
값을 대입하지 않은 변수를 입력하면 undefined가 출력됩니다.
let empty;
undefined일단 기본적으로 비어있는 값은 undefined라서 null은 프로그래머들이 직접 쓰지 않으면 자바스크립트에서 볼 일이 많지 않다.
이미 선언한 변수를 다시 선언하는 경우에는 에러가 발생합니다. empty 두 개를 연달아 선언을 해봅시다.
let empty; let empty;
Uncaught SyntaxError: Identifier 'empty' has already been declared(에러 뜻: 이미 선언되었다.) 따라서 변수명이 겹치지 않도록 주의해야 합니다. 최대한 자세하고 그 값이 무엇을 뜻하는지 정확하게 적어야한다. 변수명이 첫글자가 숫자면 에러가 납니다.
(예: let 2banana = 'banana'; -> 이런거 안됨) 대문자도 되긴하는데 보통은 camelCase라고 해서 낙타 등처럼 울룩불룩한 모양으로 kimelIsBabo 이런식으로 처음엔 소문자 단어로 시작해서 다음 단어들은 첫 단어들을 대문자로 쓰는 식으로 작성합니다.
변수 값 수정하기
한 번 저장한 값을 바꿀 수 있습니다. 변수명에 다시 대입 연산자를 사용해서 새로운 값을 입력하면 됩니다.
let change = '바꿔 봐';
undefined
change = '바꿨다';
'바꿨다'
change //변수를 콘솔에 입력해 값이 바뀌었나 확인해봅니다.
'바꿨다'변수의 값을 빈 값으로 바꿀 때는 change = null;을 의도적으로 사용하여 지우면 됩니다.
undefined로 비우면 이 자체도 기본값 역할을 할 수 있기에 이것을 의도적으로 사용하여 지운건지 아닌지 확인할 수 없습니다. 그래서 null을 사용하는 것 입니다.
number라는 변수를 선언하고 초기화했습니다. 만약 number 변수의 값에 3을 더하고 싶다면
이렇게 하면 됩니다.
let number = 5;
undefined
number = number + 3;
8그런데 이 코드를 이렇게 축약할 수도 있습니다. 이때 += 연산자를 사용합니다.
let number = 5;
undefined
number += 3; //number에 3을 더한 후, 결괏값을 다시 number에 저장하라
8그 외에도 /=, -=, *=, %=, **= 연산자 등이 있습니다.
let number = 16;
undefined
number /= 4; //아래식과 같은 뜻입니다.
4
number = number / 4 //위의 식과 같은 뜻입니다.코드에서 같은 문자열이 반복되는데 그걸 수정할 때도 변수를 사용하면 좋습니다.
//수정 전
console.log('엄청 긴 문자열 입니다.');
console.log('엄청 긴 문자열 입니다.');
console.log('엄청 긴 문자열 입니다.');
//수정 후
console.log('엄청 긴 문자열을 수정합니다.');
console.log('엄청 긴 문자열을 수정합니다.');
console.log('엄청 긴 문자열을 수정합니다.');값을 사용할 때와 수정할 때 중복이 발생하는데, 이를 막기 위해 다음과 같이 바꿀 수 있습니다.
//중복되는 문자열을 변수로 만들었습니다.
let string1 = '엄청 긴 문자열입니다.';
console.log(string1);
console.log(string1);
console.log(string1);
//수정 후
let string1 = '엄청 긴 문자열을 수정합니다.';
console.log(string1);
console.log(string1);
console.log(string1);string1 변수의 값만 수정하면 변수를 사용하는 부분이 한번에 수정되어 모든 줄을 일일이 수정할 필요가 없습니다.
상수 만들기
let외에도 변수를 선언하는 예약어로 const와 var가 있습니다.
const는 상수(constant)의 줄임말입니다. 변수와 상수의 차이는 변수는 변하는 수 입니다. 상수는 변하지 않는 수라는 뜻입니다.
상수와 변수의 뜻은 반대인데 let,var,const를 묶어서 변수라고 했을까요. const는 엄밀히 말하면 상수가 아닙니다. const는 나중에 배우는 객체의 내부 값에는 적용되지 않습니다.
그리고 var는 현재는 거의 쓰이지 않습니다.
const value = '상수입니다.';
undefined
value = '바꿀 수 없습니다.';
Uncaught TypeError: Assignment to constant variable.이렇게 한번 설정한 변수를 바꿀 수 없습니다.
const value2; 라고 적으면 let으로 했을 때는 undefined가 출력되는데, const로 할때는 에러 메세지가 뜹니다. 다른걸 넣을 수가 없게 설정이 되어버린 상황입니다. 그래서 무조건 처음 선언할 때 값을 넣어줘야합니다.
var
var로 변수를 선언하면 특별히 변수문(variable statement)이라고 합니다.
let과 상당히 비슷한데 다른 점이 있습니다. 기존에 선언했던 변수를 다시 선언해도 에러가 발생하지 않습니다. 이러한 특징 때문에 실수로 변수를 다시 선언하는 문제가 발생할 수 있습니다.
문제 😀
a와 b라는 변수에 어떠한 값이 들어 있습니다. 두 변수의 값을 서로 바꿔보세요.
let a = 5;
undefined
let b = 3;
undefined
let c = a;
undefined
c
5 //c에 5라는 값이 정확히 들어온 것을 확인
a = b;
3 //a에다가 b를 저장시켜주고
b = c;
5 //b에다가 a의 값(5)을 저장한 c를 저장해주면 5가 나온다.
//그러면 이제 a를 입력하면 3이 나오고, b를 입력하면 5가 나온다.조건문
선언문을 알아봤으니 이제 조건문을 알아볼 차례입니다. 조건문은 주어진 조건에 따라 코드를 실행하거나 실행하지 않는 문입니다. 분기점이나 마찬가지입니다. 내 돈이 500월보다 많으면 아이스크림을 사먹고 500원보다 적으면 사먹지 않는다를 선택할 수 있게 합니다.
if 조건문의 기본 형식
if (조건식) 동작문조건문은 조건식돠 동작문으로 구분됩니다. 조건식이 참인 값이면 내부의 동작문이 실행되고, 거짓인 값이면 동작문이 실행되지 않습니다.
동작문이 하나 이상일 때 if 조건문의 기본 형식
if (조건식) { 동작문1; 동작문2; 동작문3; }동작문이 하나 이상이면 중괄호로 감쌉니다.
코드를 실행해봅니다.
> if (true) {
console.log('hello, if!');
}
< hello, if! //결괏값true라는 값을 직접 넣어줄 필요 없이 true로 형 변환되는 값(참인 값)이나 그것을 담고 있는 변수를 넣어도 됩니다. 조건식에 변수를 넣어보겠습니다.
let condition = true;
if (condition) {
console.log('hello, if!');
}
< hello, if! //결괏값
undefined // 리턴값이 없어서 undefined 라고 나옵니다.조건문으로 다음과 같이 변수의 값을 바꿀 수도 있습니다.
let value = '사과';
let condition = true;
if (condition) {
value = '바나나';
}
console.log(value);
바나나 //결괏값이 '바나나'로 변경되었다.else를 사용해서 두 방향으로 분기하기
앞에서 조건식이 true면 value값을 바나나로 수정했습니다. 만약 조건식이 false일 때 값을 키위로 수정하고 싶다면 이를 위해 else가 있습니다.
if-else 문의 기본 형식
if (조건식) { //조건식이 참일 때 실행 동작문; } else { //조건식이 거짓일 때 실행 동작문; }
if문 뒤에else를 붙이고 다시 중괄호 안에 동작문을 입력하면 됩니다.
if (false) { //이 부분이 거짓이면
console.log('hello, if!');
} else { //이 부분이 참이 됩니다.
console.log('hello, else!');
}
< hello, else! //결괏값위에 식처럼 else는 '또는' 이라는 말로 if와 반댓값을 가지게 됩니다.
let value = '사과';
let condition = false; // else문이 실행됨
if (condition) { //condition이 false니까 실행이 안됨
value = '바나나';
} else { //그래서 '또는'이라는 else가 실행이 됨
value = '키위';
}
console.log(value); //결괏값은 키위가 나오게 된다.
< 키위else-if문의 기본 형식
if (조건식) { 동작문; } else if (조건식) { 동작문; } else { 동작문; }if문 뒤에 else if문을 적고, 그 뒤에 else if문에 해당하는 조건식과 동작문을 추가.
else if문도 if문이나 else문과 마찬가지로 동작문을 여러 개 넣을 수 있고, 동작문이 하나인 경우에는 중괄호를 생략할 수도 있습니다. else if문 뒤에 else문이 반드시 나와야하는 것은 아닙니다. if문과 else if문만 사용해도 되고, if문과 else문을 사용해도 됨.
단, else if문이나 else문을 단독으로 사용할 수 없음
const score = 90;
if (score >= 90) { //90점 이상
console.log('A+');
} else if (score < 90 && score >= 80) { //90점 미만 80점 이상
console.log('A');
} else if (score < 80 && score >= 70) { //80점 미만 70점 이상
console.log('B+');
} else if (score < 70 && score >= 60) { //70점 미만 60점 이상
console.log('B');
} else { // 60점 미만 (마지막으로 '또는' 이어서 score를 쓸 필요가 없다.)
console.log('F')
}
A+ //선언한 score값이 90이라서 A+라는 결괏값이 나옴위 코드는 아래와 같이 축약이 가능합니다.
const score = 90;
if (score >= 90) { //90점 이상
console.log('A+');
} else if (score >= 80) { //90점 미만 80점 이상
console.log('A');
} else if (score >= 70) { //80점 미만 70점 이상
console.log('B+');
} else if (score >= 60) { //70점 미만 60점 이상
console.log('B');
} else { // 60점 미만 (마지막으로 '또는' 이어서 score를 쓸 필요가 없다.)
console.log('F')
}왜냐면 코드는 위에서부터 아래로 내려오기때문에.
중첩 if 조건문 사용
if나 else, else if문의 중괄호 안에 동작문을 넣을 수 있다는 사실을 활용할 수 있다.
조건문도 문이기 때문에 중괄호 안에 다시 넣을 수 있습니다.
let first = true;
let second = false;
if (first) {
console.log('첫 번째 조건 충족!'); //first가 true기 때문에 일단 실행 됨
if (second) {
console.log('두 번째 조건도 충족!'); //second가 false라서 실행이 안된다.
} else {
console.log('두 번째 조건은 불충족!'); // '또는'인 else가 실행된다.
}
} else {
console.log('첫 번째 조건 불충족!'); //첫 if가 이미 참이기 때문에 반대인 else는 실행되지 않는다.
}
< 첫 번째 조건 충족!
< 두 번째 조건은 불충족!하지만 중첩 if 조건문은 되도록이면 하지 않는 것이 좋습니다. 조건문이 중첩되어 들여쓰기가 싶어질수록 코드 읽기는 어려워집니다. 그러므로 중첩 if문을 if-else문으로 변환해 코드의 가독성을 높혀야합니다. 앞의 코드를 보기 좋게 바꾸어 보겠습니다.
let first = true;
let second = false;
if (first && second) { //first와 second 모두 true가 아니기 때문에 실행이 안된다.
console.log('첫 번째 조건 충족!');
console.log('두 번째 조건도 충족!');
} else if (first) { //first만 ture기때문에 이게 실행된다.
console.log('첫 번째 조건 충족!');
console.log('두 번째 조건은 불충족!');
} else { //둘 다 false여서 이것도 실행 안된다.
console.log('첫 번째 조건 불충족!');
}switch 조건문으로 분기하기
조건문에는 if문 이외에도 switch문이 있습니다. if문과 switch문은 조건을 충족할 때 실행된다는 공통점도 있지만, 차이점도 있습니다.
switch문의 기본 형식
switch (조건식) { case 비교조건식: 동작문; }switch문에는 조건식 두 개가 사용됩니다. switch옆 소괄호 조건식의 값이 case의 비교 조건식 값과 일치(===)하면 해당 동작문이 실행이 됩니다. 보통 조건식에 변수를 넣고, 비교 조건식에는 변수와 비교할 값을 넣습니다.
(예) let value = 'A'; switch (value) { case 'A': console.log('A'); } A //결괏값
동작문을 여러 개 둘 수도 있습니다. 이때는 if문과는 다르게 중괄호가 없어도 된다.
단, 중괄호가 있는 것돠 없는 것에는 차이가 있습니다.
let value = 'A';
switch (value) {
case 'A':
console.log('A');
console.log('B');
}
A //결괏값
B //결괏값if문의 else if처럼 여러 방향으로 분기할 수도 있습니다. case를 여러 번 사용하면 됩니다.
let value = 'B';
switch (value) {
case 'A':
console.log('A');
case 'B':
console.log('B');
case 'C':
console.log('C');
}
B //결괏값
C //결괏값B만 출력될 것이라고 예상했지만, B와 C가 모두 출력됩니다. switch문은 일치하는 case를 발견하면 일치 여부와 상관없이 그 아래 case들의 동작문을 모두 실행합니다.
따라서 원하는 결과만 얻으려면 수동으로 case에서 빠져나와야 합니다. 이때 break문이 사용됩니다.
let value = 'B';
switch (value) {
case 'A':
console.log('A');
break;
case 'B':
console.log('B');
break;
case 'C':
console.log('C');
break;
}
B //결괏값 어떠한 case도 일치하지 않을 때 동작하는 case도 만들 수 있다.
단, 이 때는 case 대신 default라는 특수한 예약어를 사용한다.
let value = 'F';
switch (value) {
case 'A':
console.log('A');
break;
case 'B':
console.log('B');
break;
case 'C':
console.log('C');
break;
default:
console.log('아무것도 일치하지 않음');
}
아무것도 일치하지 않음 //결괏값default에는 break문을 붙이지 않아도 된다. 마지막 case라서 다음에 실행될 것이 없기 때문
그리고 default는 어디에나 위치할 수 있다.
