JavaScript 기초 문법 정리 Part1 - 변수 ,자료형, 알림창, 형변환, 조건문, 반복문

개발 지식/HTML, CSS

JavaScript 기초 문법 정리 Part1 - 변수 ,자료형, 알림창, 형변환, 조건문, 반복문

Prcnsi 2022. 6. 11. 22:48

728x90

안녕하세요 이번 시간에는 아래 유튜브 강의를 보고 자바스크립트의 기본에 대해 정리해봤습니다.
기본적인 내용은 알고있었지면 아래 강의를 통해 확실히 기본을 다질 수 있었습니다.
강의가 정말 쉽게 잘 되어 있어서 추천드립니다:)
https://www.youtube.com/watch?v=KF6t61yuPCY

오늘 배운 새로운 부분은 console.log와 자료형 let과 const와 변수를 표현하는 표기법입니다. 나머지는 기존에 알고 있던 내용에 문법만 바뀐 것이어서 무리 없이 이해할 수 있었습니다. 정리하면 console.log는 자바스크립트의 기본 출력 함수이고 let은 변수, const는 상수를 저장합니다. 그리고 ``안에서만 변수를 ${}과 함께 출력할 수 있고 변수만 출력하려면 나머지는 아래 예제와 함께 확인해봅시다.
(어째 자바스크립트 강의인데 기본 언어를 복습하는 느낌이 드는 건 왜일까요..?)

1. 자바스크립트의 출력 함수 - console.log( )

자바스크립트에는 크게 alert와 console log가 있음 alert는 알림 창으로 나옴
그래서 예를 들어 아래와 같은 코드가 있을 때 화면에 알림 창을 띄워줌
그래서 콘솔 로그는 그냥 이 javascript라는 언어의 print문입니다.

이에 비해 console log는 콘솔(개발자 도구의 콘솔)에 내용을 출력해 줍니다.

자료형에는 let과 const가 있음 let으로 변수를 선언하면 동일한 이름의 다른 변수가 있는지 확인할 수 있고
let은 한 번 선언 후에 다른 값으로 바꿀 수 있음 const는 바뀌지 않는 상수를 선언할 때 사용
그래서 정리하면 자바스크립트에서 변수를 선언할 때 변하지 않는 값은 const 변할 수 있는 값은 let으로 선언
함. 팁은 전부 const로 선언한 뒤 바뀔 일 있는 것들은 let으로 바꿔주면 됨 그리고 특수문자는 \(역슬래시)를 앞에 넣어주면 특수문자로 인식함 ``(그레이브)은 문자열 내에 변수를 표현할 때 사용은 ${변수명} 문자열 밖에서 변수 표현할 거면 ${ } 안 쓰고 바로 변수명만 써도 됨

2. 연산자

연산자는 기존에 더하기(+), 곱하기(*), 빼기(-)는 동일하되 나누기는 '/'기호로, 나머지는 '%' 기호로 구할 수 있습니다.
그리고 +=, -=와 같이 줄여서 표기 가능합니다. 동등 연산자(==)와 일치 연산자(===)가 있는데 동등 연산자는 자료형을 고려하지 않고 일치 연산자는 자료형까지 고려해서 일치하는지 여부를 반환해준다.

typeof로 자료형을 알 수 있으나 null은 객체가 아니지만 표기는 object로 나옵니다.

3. alert, prompt, confirm

다음으로는 alert(알림 용도), prompt(사용자에게 값을 입력 받음), confirm에 대해 알아보자
alert는 알려주고 prompt는 입력받고 confirm은 확인받는다. prompt함수는 2번째 인자로 디폴트 값을 줄 수 있음
참고로 아래와 같이 변수를 출력하는 데 있어서 따옴표 밖에다 name과 같은 변수를 둘 때는 그냥 적어도 되지만 따옴표 안에 넣을 때는 마찬가지로 ``과 ${변수}를 사용해서 출력을 해주어야 해요. 또한 prompt로 입력받은 값은 문자형으로 저장됩니다.

const name=prompt("이름을 입력하세요.");
//alert("안녕하세요"+name+"님!");
alert(`안녕하세요 ${name}님!`);

4. 자료형 변환

String() -> 문자형으로 변환
Number() -> 숫자형으로 변환
Boolean() ->불린 형으로 변환

Boolean은 숫자 0이나 빈 문자열, null, undefined, NaN일 때 false 반환하고 나머지는 true 반환(공백도 true)
참고로 Number(null)은 0이고 Number(undefined)는 NaN이 된다고 합니다..
그래서 아래 Number 예시로 수학 영어점수에 각각 20,30을 주면 이렇게 됩니다.
이때 Number로 감싸주지 않으면 자동 형 변환이 되어서 이상하게 계산됩니다. 따라서 Number()과 같은 함수로 명시적 형변환이 필요합니다.

5. 조건문

조건문은 기존의 조건문과 동일하되 print문 대신 console.log가 들어간다는 점만 다릅니다.
예를 들어 아래 예시에서 prompt에 나이를 20으로 입력하면 아래 콘솔 창에 입력한 문구가 출력됩니다.

5. 논리 연산자

|| - OR
&& - AND
! - NOT

그리고 참고로 조건식에 대한 결과를 변수에 담으면 Boolean 값이 반환됩니다.
위 조건식과 논리 연산자를 이용하면 웹페이지에서 비밀번호, 비밀번호 확인을 입력받고 자바스크립트로도 일치하는지에 대한 처리를 해줄 수 있습니다.

그리고 우선순위는 AND가 OR보다 높습니다. 즉 AND로 연결된 두 식은 괄호를 써주지 않아도 된다~
아래가 그 예시입니다.

6. 반복문

반복문은 간단해서 텍스트로만 정리했습니다.
do while은 while과 동일하지만 순서를 보면 do while은 초기 1회는 무조건 실행한다는 점이 다르다.
그리고 break는 멈추고 빠져나오고 continue도 마찬가지로 멈추고 다음 반복으로 진행한다. 이때 이중 반복문 혹은 다중 반복문이라면 한 스코프만 빠져나간다. 그리고 당연하지만 반복문을 돌릴 때 변수는 "변수"이므로 let으로 변수를 선언해줘야 나다.

명확한 횟수가 정해졌으면 for문을 그게 아니라면 while문을 사용하며 do while은 거의 사용 안 함
case문은 if/else문으로 동일한 기능 구현이 가능하지만 케이스가 다양할 경우 좀 더 간결하게 표현할 수 있음
아래는 간단한 반복문 예시입니다.

그럼 읽어주셔서 감사합니다.

728x90