혼공/혼공 1주차

[혼공] 혼자 공부하는 자바스크립트 1주차 -3

만갱0l 2024. 1. 5. 13:45

오늘은 Chapter02를 시작해보려고 한다. 자료와 변수에 대해 알아보도록 하자! 

 

변수는 변하는 데이터를 저장할 수 있는 메모리를 뜻하며 변수에는 오직 한 개의 데이터만 저장된다. 새로운 데이터가 들어오면 기존에 있던 데이터는 메모리 공간에서 지원지게 된다. 

변수에 저장할 수  있는 데이터의 종류는 문자형(String), 숫자형(Number), 논리형(Boolean), 빈(Null) 데이터가 있다.

위와 같이 box에 값을 두개를 넣었을 때 마지막에 입력한 값이 저장된다.

 

 

먼저 문자형(String)은 문자나 숫자를 큰따옴표(" ")또는 작은따옴표(' ')로 감싸있는 형태로 문자형 데이터에 HTML 태그를 포함하여 툴력하면 태그로 인식한다. 

-> let 변수 = "사용할 문자나 숫자";

typeof를 사용하여 문자형이란것을 알 수 있다.

 

 

숫자형(Number) 단어 의미 그대로 숫자를 의미하며, "100" 과 같이 큰따옴표가 숫자를 감싸고 있다면 숫자가 아닌 문자형 데이터이다. 이 경우 Number("100")을 사용하면 문자형 데이터를 숫자형 데이터로 바꿀 수 있다.

-> let 변수=숫자(또는 Number("문자형숫자"));

typeof를 사용하여 숫자형이란것을 알 수 있다.

 

논리형(Boolean) true(참) 또는 false(거짓)가 있다. 주로 2개의 데이터를 비교할 때 나오는 결과이다.

-> let 변수= true or false; 

 

변수 선언 시 주의사항은 

1. 변수명 첫 글자로는 $,_, 영문자만 올 수 있다.

 = let 1 num=10; (x)

    let $num=10; (o)

 

2. 변수명 첫 글자 다음은 영문자, 숫자, $, _만 포함할 수 있다.

= let 100num=10; (x)

   let num100=10; (o)

 

3. 변수명으로는 예약어를 사용할 수 없다. (예약어란 이미 자바스크립트에서 사용 중인 단어)

= let document=10; (x)

   let num=10; (o)

 

4. 변수명을 지을 때는 되도록 의미를 부여해 작성하는 것이 좋다.

= let num="hello"; (x)

   let num=10; (o)

 

5. 변수명을 사용할 때에 대소문자를 구분해야 한다.

= let num=10; document.write(Num) (x)

   let num=10; document.write(num) (o)

 

문자열자료형(문자결합연산자) 피연산자가 문자형 데이터이다. 여러 개의 문자를 하나의 문자형 데이터로 결합할 때 사용한다. 피연산자로 문자형 데이터가 한 개라도 포함되면 다른 피연산자의 데이터는 자동으로 문자형 데이터로 변환 결합된다.

 

만들 때 \n = 줄 바꿈, \t = 탭, \\ = 역슬래시 자체를 의미한다. 문자열의 문자위치를 나타내는 것을 인덱스라고 하며 길이를 구할 때에는 length속성을 사영하여 문자열 뒤에.(점)을 찍고 length를 입력하면 된다.

 

숫자 자료형(산술 연산자)을 사용하면 숫자 연산자로 기본적인 사칙 연산이 가능하다. 연산을 하기 위해서는 연산 대상 데이터가 반드시 2개가 있어야 한다.

종류 기본형 설명
+ A + B 더하기
- A - B 빼기
* A * B 곱하기
/ A / B 나누기
% A % B 나머지

 

표의 연산자들로 코딩하였을 때의 결과값이다.

 

 

비교연산자는 크다, 작다, 같다 와 같이 비교할 때 사용하는 연산자이다.

종류 설명
 A > B A 가 B 보다 크다.
A < B A 가 B 보다 작다.
A >= B A 가 B 보다 크거나 같다.
A <= B A 가 B 보다 작거나 같다.
A == B A 와 B 는 같다. 
(숫자형이든 문자형이든 표기된 숫자만 일치하면 true로 반환)
A != B A 와 B 는 다르다.
(숫자형이든 문자형이든 표기된 숫자만 다르 true로 반환)
A === B A 와 B 는 같다. 
(표기한 데이터와 자료형이 반드시 일치해야  true로 반환)
A !== B A 와 B 는 다르다.
(표기한 데이터와 자료형이 반드시 불일치해야  true로 반환)

 

비교연산자를 사용하여 논리형데이터로 변환한다.

 

논리 연산자(볼논리합)는 || (or), && (and),! (not)이 있으며, 피연산자가 논리형 데이터인 true 또는 false로 값을 변환한다.

종류  설명
|| or 연산자라하며 값 중 하나라도 true가 존재하면 true로 변환
&& and 연산자라하며 값 중 하나라도 false 가 존재하면 false 변환
! not 연산자라 하며 단항연산자이다. 값 이 true이면 반대로 false 로 변환

 

 

증감연산자는 숫자형 데이터를 1씩 증가시키거나 감소시킬 수 있으며, 피연산자가 한개만 필요한 단항연산자이다. 증감연산자는 변수의 위치에 따라 결괏값이 달라진다.

++ -> 변수의 값을 1만큼 증가시킨다.

-- -> 변수의 값을 1만큼 감소시킨다.

 

연산자에는 우선순위가 있는데 

1. ()

2. 단항연산자 ( --, ++,! )

3. 산술연산자 ( *, / , % , + , - )

4. 비교연산자 ( > , >= , < , <= , == , === ,!== , != )

5. 논리연산자 ( && , || )

6. 대입(복합 대입) 연산자 ( = , += , -= , *= , /= , %= ) -> 아직 이건 사용해 본 적이 없다..ㅎ

 

--------------------------------------------------------------------------------------------------------------------------------------------------------

 

Chapter 02-1 확인문제

1) 다음 연산자들의 피연산자가 어떤 자료형인지 적어보세요.

연산자  피연산자의 자료형
+(문자열연결연산자) 문자열
+(덧셈 연산자) 숫자
&&  논리(볼)
- 숫자
* 숫자
|| 논리(볼)

 

2) 다음 프로그램의 실행 결과를 예측해 보세요 

 

 

3) 다음 프로그램의 실행 결과를 예측해 보세요.

-> 녕 , 하 , 세 , 요

 

4) 다음 프로그램의 실행 결과를 적어보세요. 예측하는 것보다 실제로 코드를 입력해 보고 결과를 확인하는 것이 쉬움.