[개발일지46일차] 자바스크립트 변수

최유정·2021년 9월 1일

자바스크립트

목록 보기

2/3

1.학습일지

변수

변수선언 : comic박스를 생성한 상태

var comic;

변수 초기화 :comic박스 안에 원피스 데이터를 할당한 상태

comic = "원피스";

변수 적용이 잘 됐는지 확인
console.log 작성 후 개발자도구에서 확인.

console.log(comic);

선언+초기화

var apple = "사과";

a b c 변수를 한 번에 동시 선언

var a, b, c;

var a,
    b,
    c;

var computer;

console.log(computer);

!!!중요!!!

**undefined도 데이터 중 하나. 모든 변수는 선언과 동시에 undefined가 자동으로 할당된다.

**최초 선언, 최초 초기화시에는 undefined -> 데이터 할당.

변수 안에 들어가는 데이터는 언제든지 변경 가능하다.

var house;
house = "집";

console.log(house);      집

house = "아파트";

console.log(house);      아파트

변수 이름 짓기 요령

최소 2개 이상 단어 조합으로 짓기.

var score = 10; 이것보다는
- 캐멀 케이스 방식
  var mathScore =10;
- 스네이크 케이스 방식
  var math_score=10;
주의점

var math-score-student = 100; 사용불가
변수명 첫번째 글자로에 _ $ 외 다른 특수문자 사용불가
var _math
var $math
영어+숫자 조합은 가능하지만
숫자(먼저)+영어 조합은 불가
var apple10; O
var 10apple; X
가능한 자세한 변수이름으로 작성. 변수명으로 데이터를 유추할 수 있게끔

데이터 타입 = 데이터 종류

원시 타입

문자열 (String)
검은색으로 출력되면 문자열

var msg1 = "Hello"; 큰따옴표
var msg2 = 'welcom'; 작은따옴표

var msg3 = "she's girl" 축약어는 큰 따옴표 안에
var msg4 = 'she\'s girl' 작은따옴표 안에 축약어를 넣고싶으면 역슬래쉬\사용
숫자 (Number)
파랑색으로 출력되면 숫자

var num1 = 10; 정수
var num2 = -10; 음수
var num3 = 3.14; 소수점 다 가능

console.log(num1 + num2); 연산작업 가능
논리(Boolean): T or F

console.log(true);
console.log(false);
console.log(1 === 2);
console.log(10 < 20);
console.log(10 === 10 || 20 === 30);

AND(&&) OR(||) 로 여러 조건 넣을 수 있다.
var num30 = 30;
var num40 = 40;
var num50 = 50;

console.log(num30 === num40 && num30 === num50 ); false
console.log(num30 === num40 || num30 === num50 ); false
undefined
null

참조타입

배열 (Array)
함수 (Function)
객체 (Object)

연산작업

1. 숫자
사칙연산 가능

var a = 20;
var b = 10;

console.log(a + b);
console.log(a - b);
console.log(a * b);
console.log(a / b);
console.log(a % b);

2. 문자
+제외한 사칙연산 가능

var str1 = "20";
var str2 = "10";

console.log(str1 + str2);  문자 이어붙이기 2010
console.log(str1 - str2);
console.log(str1 * str2);
console.log(str1 / str2);
console.log(str1 % str2);

* 활용법

var firstName; = "Youjeong"
var lastName; ="Choi"

console.log(firstName + lastName);   YoujeongChoi
" "공백 하나하나 모두 문자로 인식
console.log(firstName + " " + lastName);   Youjeong Choi
				

var str11 = "현재 시간은";
var time = 10;
var str12 = "시 입니다"
console.log(str11 + time + str12);  현재 시간은 10시 입니다

최종적으로 문자열 데이터 출력.

3. ++ , -- 연산자

var num10 = 10;
console.log(--num10); 9 :변수 안에 들어간 숫자를 -1씩 차감시키겠다 (선차감)
console.log(--num10); 8 :마지막 변수 9에서 -1씩 차감되니까 8

console.log(++num10); 11 :변수 안에 들어간 숫자를 +1씩 차감시키겠다
console.log(++num10); 12 :마지막 변수 11에서 +1씩 차감되니까 12

주의점(연산자 위치에 따라 값 달라짐)

console.log(num10--);  첫번째에서는 10이 출력되고 그 다음에 -1차감 (후차감)
console.log(num10);	앞에서 -1차감 됐기 때문에 9출력

4. +=, -+, *=, /=, %=

var num20 = 20;
num20 = num20 + 10; **자기 자신에게 새로운 값 업데이트할 때  num20 +=10; 으로 표현

console.log(num20); 30

5. 비교 연산자 >, <, ==, ===, <=, >=, !=, !==

var a = 10;
	var b = 20;
	var c = 30;

	console.log(a > b); false
	console.log(a < b); true
	console.log(a >= b); false
	console.log(a <= b); true 로 표현

같다

	console.log(a == b); false
	console.log(a === b); false

다르다

	console.log(a != b); true
	console.log(a !== b); true

==와 ===차이 : 엄격함 정도

	var num10 = 10;
	var num20 = 20;

	var str10 = "10";
	var str20 = "20";

	console.log(num10 == str10); true
	console.log(num10 ===str10); false 데이터 타입까지 고려하면서 더 엄격하게 따짐

	console.log(num20 != str20); false
	console.log(num20 !== str20); true 애초에 데이터 타입이 다르기 때문에