[인프런] Javascript입문 - 변수, 연산자 및 기타

* 이 글은 인프런에서 제공하는 호눅스님의 유료 강의 '쉽고 자연스럽게 배워보는 Javascript 입문 - 코드스쿼드 마스터즈 코스 레벨1'를 듣고 공부하며 정리한 글입니다. 강의 내용에 더해, 제가 필기하고 구글링한 내용이 정리되어 있습니다. 초보인 제가 이해한 대로 정리했기 때문에, 부정확한 내용이 있을 수 있음을 감안해 주시길 바랍니다. 강의를 듣고 내용을 정리한 글이기 때문에 문제가 되지 않는다는 인프런 측 답변을 받은 적이 있으나(https://bibi6666667.tistory.com/37), 저작권상 문제가 된다면 보호 모드(비공개)로 전환하겠습니다.

<변수>

 

변수란?

변수 = 데이터(값)를 담을 수 있는 그릇. ** 중요! **
데이터들은 컴퓨터의 메모리의 어딘가에 저장되는데, 그 값들을 구별짓고 재사용하기 위해서 변수를 씁니다.

 

변수 선언하기

변수를 사용하기 위해서는 먼저 선언이 필요합니다.

var a;

-> a라는 변수를 선언하는 (= 만드는) 명령.

---

변수와 대입 연산자 assign

변수에 값을 넣고 싶을 때 = (대입연산자)를 사용한다! 

= : assign. 변수에 값을 할당할 때 사용하는 대입 연산자.

※ =은 수학에서의 '같다' 라는 뜻이 아님. 같다는 ===을 주로 사용합니다.

변수 사용하기

여러 가지 방식으로 변수의 값을 사용할 수 있다.

var a = 7; 
var b = 10; 
var c = a + b; //17

 

아래 내용이 어렵다는 분들이 많습니다. 어떤 뜻일까요?

b = b + 1;

(위의 선언대로) b는 10 이었는데, b에다가 1을 더해서 다시 b에 넣는다.
따라서 이 명령 이후에 b를 출력하면 11이 된다.

 

---

변수 이름(변수명) 잘 짓기

변수의 이름은 매우 중요합니다.

변수명은 의미가 있어야 합니다.
일반적으로 소문자로 시작, 영어, 숫자, _를 주로 사용합니다.

표기법 : 주로 카멜 케이스나 스네이크 케이스 표기법을 사용.
뭘 사용해도 좋지만 통일해서 사용하는 것이 좋다.

카멜 케이스 (낙타 모양)

numPeople
단어와 단어를 연결할 때 대문자를 사용.

스네이크 케이스 (뱀 모양)

num_people
단어와 단어 사이에 언더바(_)를 사용.

 

 

 

---

 

<연산자 및 기타>

증감 연산자

C언어의 잔재인데 조금 쓸데없이 복잡합니다.

우리는 a++; 스타일만 사용합시다.
a++ 은 a = a + 1; 과 같은 의미이다.

마찬가지로 a-- 는 a = a - 1; 과 같은 의미이다.

var a; 
a++; 
a = 0;
a++; 
a--;

※ 변수에 값(숫자)를 넣어준 다음에 변수++;을 해야 적용된다!

var c;
c // undefined
c++; // NaN

c=5;
c++; // 6

 

비교 연산자

비교 연산자를 수행한 결과값은 Boolean입니다. 비교 연산자에는 >, <, >=, <=, ===, != 등이 있습니다.

> 크다
< 작다
>= 크거나 같다
<= 작거나 같다
=== 같다(equal)
!= 같지 않다(not equal)

var a = 3; 
var b = 5;
var c = "5";
a > b; 
a < b;
b === c;

문자열의 길이 구하기

var a = "hello";
a.length; 

. (점)연산자는 객체의 속성을 가져올 때 사용하는 연산자(.operator)
'~의'처럼 읽을 수 있다.
또는 동사처럼 해석되어 '~야 ~해'로 읽을 수 있다.

a.length;
= 문자열a의 길이를 구함.
나중에 다시 설명할 예정입니다. -> '객체'강의에서!

문자열 간단히 조작하기;

var a = "KheLLo" 
a[0]; 
a[1] = "H"; //안 됨 
a.slice(1,4); 
a.toUpperCase();
a.toLowerCase();

※ 프로그래밍 언어에서는 1이 아닌 0부터 숫자를 센다! 첫번째 = 0번째, 두번째 = 1번째...

a[0];
a문자열의 0번째 글자를 가져옴 -> "K"
a[1]="H"; 처럼 선언된 문자열을 바꾸는 기능은 없다.

.slice(시작,끝);
문자열의 일부를 가져옴. 문자열 맨 앞 슬라이스=0. ->"hel"
예를 들어 d="Dragoon" 이라는 문자열은 /D/r/a/g/o/o/n/ 으로 슬라이스 됨.
d.slice(0,2) : 0번째 슬라이스부터 2번쨰 슬라이스 사이의 문자 가져옴 -> "Dr"

.toUpperCase();
문자열을 전부 대분자로 바꾸는 함수(메서드?).
.toLowerCase();
문자열을 전부 소문자로 바꾸는 함수.

위 함수들을 사용해도 문자열 자체가 바뀌는 것은 아니다! 명령에 따른 결과를 보여줄 뿐이다.
바뀐 문자열을 가져오고 싶다면 변수를 따로 선언해야.
즉 DRAGOON이라는 결과값을 원한다면, var d2 = d.toUpperCase(); 로 선언해 d2로 불러 써야 한다.

 

undefined, null, NaN

undefined: 값이 정의되지 않았다.

null: 값이 비어있다.

NaN: 값(숫자)이 아니다.

-> 위의 세 값은 계산이 불가능하다!

console.log()

개발자 콘솔에 ()내의 값울 찍어주는 메서드입니다. (다른 언어에서는 print()로 통함)

var a = 1; 
var b = "더하기"; 
var c = 2; 
console.log(a + " " + b + " " + c + " = " + a + c);

->1 더하기 2 = 3 
(문자열과 문자열은 더하기+로 연결해 출력하면 이어붙여져 나온다)

alert() 과 prompt() 사용해 보기

var ans = prompt("How are you?"); alert(ans);

var ans = prompt("How are you?"); 
alert(ans);

prompt();

문자열을 입력받는 함수.
prompt() 내의 문자열을 화면에 팝업으로 띄우고,
input창에 입력된 값을 그 변수로 가져옴.

예를 들어..
var ans = prompt('지금 시간은'); 을 입력하면

팝업 입력창이 뜨고, 입력값인 '오후 5시 39분'이 변수 ans의 값으로 들어온다.

※단, 입력창에 입력된 값은 무조건 문자열string으로 취급된다. (숫자를 넣어도 "숫자"로 처리함)
문자로 처리된 숫자(str)을 숫자(int)로 변환하고 싶으면 Number(값)으로 변환해야 한다.