오늘은 자바스크립트의 기초인 조건문, 반복문, 함수를 배웠다.
특이하게도 오늘은 일정상 하루종일 나 혼자 공부를 해야 하는 날이었어서, 조금 여유롭게 수업을 들었다.
조건문과 반복문에 대해 간단히 이야기 해 보자.
우선 조건문은 말 그대로 특정 조건에서만 실행되는 문장이다.
if(조건){
실행될 코드
}
다음과 같은 형식을 가지고 있으며, 괄호 안의 조건이 참(true)인 경우에만 코드가 실행된다.
let num = 1
if(num % 2 == 1){
console.log("홀수입니다")
}
//result = "홀수입니다"
괄호 안의 조건인 num % 2 == 1, 즉 "num은 홀수이다"가 true라면 "홀수입니다"라는 문장을 출력하도록 한다.
num은 1이고, 홀수이므로 조건을 만족하기 때문에 "홀수입니다"를 출력하게 된다.
if는 'else if' 또는 'else'와 함께 쓰일 수 있는데, else if는 또 다른 조건을 설정해 주는 것이고, else는 if와 else if로 설정된 조건 이외의 모든 조건들이 해당된다.
if(num > 0){
console.log("양수입니다")
} else if(num < 0){
console.log("음수입니다")
} else{
console.log("0입니다")
}
다음과 같은 코드는 num > 0인 조건, num < 0인 조건, 그리고 두 조건을 제외한 모든 조건까지 총 3개의 조건을 가지고 있다.
num=3이라면 "양수입니다", num=-2라면 "음수입니다", num=0이라면 "0입니다"라는 출력 결과가 나올 것이다.
다음은 반복문.
반복문은 문장을 반복 하는데 사용되는 코드이다.
무언가를 여러번 써야 할 때, 일일히 적는 방법이 가장 쉽겠지만, 양이 많으면 적기도 귀찮고 시간도 오래 걸릴 것이다.
이런 불편함을 해결하기 위해 반복문을 사용하는 것이다.
반복문은 총 3가지 종류가 있다.
종류 | 형태 | 특징 |
for | ![]() |
-명확한 반복 횟수 -중첩 편리 -배열, 문자열에 자주 쓰임 |
while | ![]() |
-조건이 true인 경우에만 반복 -조건이 false가 되면 반복 중지 -무한루프가 가능하므로 종료 조건 명시 필수 -조건 확인 -> 종료 여부 판단 -> 실행 |
do-while | ![]() |
-조건의 true, false 여부에 상관 없이 무조건 코드를 한번 실행 -실행 -> 조건 확인 -> 종료 여부 판단 |
let i = 0
for(i; i < 3; i++){
console.log(i)
}
while(i < 3){
console.log(i)
i++
}
do{
console.log(i)
i++
}while(i < 3)
위 세 코드의 출력 결과는 모두 0, 1, 2로 같다.
마지막은 함수. 함수는 내가 몰랐던 내용들이 몇 있어 시간을 많이 투자하였다.
우선 함수 선언문과 함수 표현식.
함수 선언문은 하나의 함수를 선언해주는 것이고, 함수 표현식은 변수에 함수를 저장하여 사용하는 방식이었다.
function seoneon(){
console.log("함수 선언문")
}
let pyohyeon = function(){
console.log("함수 표현식")
}
위쪽이 함수 선언문, 아래쪽이 함수 표현식이다.
두 방법 모두로 함수를 선언할 수 있으며, 호출 방법은 똑같다.
함수 이름에 ()만 붙여주면 된다.
seoneon()
//result = "함수 선언문"
pyohyeon()
//result = "함수 표현식"
반복문이나 조건문처럼 함수의 괄호 안에도 무언가가 들어갈 수 있다. 이를 '매개변수'와 '전달인자'라고 한다.
매개변수는 함수 선언시, 전달인자는 함수 호출시 각각 괄호 안에 들어가는 인자를 말한다.
function number(num){
console.log(num)
}
//매개변수 = num
number(10)
//전달인자 = 10
//result = 10
위 코드에서, 함수를 호출할 때 쓰인 전달인자 10이 매개변수 num이 되는 것이다.
즉, 함수를 호출했다면 현재 num = 10인 상태라는 것이다.
나는 둘다 매개변수라고 부르는 줄 알았는데, 아니었다.
함수를 처음 배울 때 이 매개변수와 전달인자 덕분에 꽤나 헤멨던 기억이,..,
함수의 마지막은 return.
return은 함수의 결과를 내보내는 명령어이다.
함수는 선언->코드 실행->결과의 순서를 따르는데, 이때 결과를 return으로 받는 것이다.
function number(num){
return num * 10
}
console.log(number(10))
//result = 100
return이 있다는 것은, 어찌 됐건 이 함수의 결과값이 존재한다는 것이다. 따라서 함수를 변수처럼 사용 가능하다.
길고 긴 하루를 지나, 부트캠프 7일차의 날이 저물고 있다.
사실 어제 제시간에 출석을 하지 못해 조퇴 처리가 되었다.
금토일 3일을 바쁘게 보내다 보니 나도 모르게 월요일에 알람 소리를 못듣고 계속 자버린 것이었다.
오늘 디스코드로 다른 분들이 활동하시는 것을 보았는데, 스터디나 자료 공유 등 열심히 활동하시는 분들이 많이 보였다.
단 6일만에 나태해져 버린 나 자신이 조금 부끄러워졌다.
어제의 일을 교훈 삼아 나도 다시 파이팅 해봐야겠다.
파이팅~~
'Frontend Study' 카테고리의 다른 글
[FE Bootcamp] 9일차_계산기 만들기 (0) | 2023.02.23 |
---|---|
[FE Bootcamp] 8일차_조건문, 반복문 문제풀이 (0) | 2023.02.22 |
[FE Bootcamp] 6일차_자바스크립트 기초 (0) | 2023.02.20 |
[FE Bootcamp] 4일차_FLEX BOX (0) | 2023.02.16 |
[FE Bootcamp] 3일차_CSS 기초 (0) | 2023.02.15 |