자바스크립트 Beginner

▶ 자료형

변수명(식별자)

1. camelCase

var sendEmailDate

2. snake_case

var send_email_date

 

 

#변수 자료형

1. 기본형, 단순형, 원시형

- number

- string

- boolean

- undefined

- null

- symbol

2. 참조형, 객체(object)

---

[숫자]

정수(integer)와 실수 구분이 없음

var price = 10000;

 

[문자열 string]

큰 따옴표 / 작은 따옴표 둘 다 사용 가능하다.

var myname = "테킷";

var myname2 = '멋사';

var myname3 = "\"사자\"";

따옴표를 문자로써 사용하고 싶다면 역슬래쉬를 이용한다.

 

[참거짓 boolean]

var isTrue = true;
var isFalse = false;

 

[undefined]

var a;

변수가 선언만 되고 값이 할당되지 않은 상태 undefined.

---

[객체]

- 속성의 모음으로 이루어진 데이터.

- 속성에는 어떤 데이터 타입이라도 할당 가능.

- 속성의 구분은 ,로

- 속성의 정의는  속성명(키): 속성값

var student = {
	grade: 1,
    	school: "lion school"
}

[객체의 값 호출]

var gradeInfo = student.grade;

console.log(student.class);
console.log(student['class']);

//객체의 값을 호출하는 방법은 두가지

[객체의 키 호출]

var key = Object.keys(student)[0];

[객체에 속성 추가]

student.class = 3;

 

[비어있는 객체 선언]

var teacher = new Object();
var teacher = {

};

생성자(new)를 사용해 선언할 수도 있다.

 

 

[symbol]

고유한 속성을 갖도록 해준다.

var name1 = "김멋사";
var name2 = "김멋사";

console.log(name1 == name2);  //true

var name3 = Symbol("이테킷");
var name4 = Symbol("이테킷");

console.log(name3 == name4);  //false

var myclass = {
    [Symbol("이테킷")]: 1,
    [Symbol("이테킷")]: 2
}

 

---

▶ 연산자

- 1개의 표현식에 대해 산술, 대입, 논리, 타입 등을 평가하여 값을 생성하는 작업

 

1. 산술 연산자

var a = 10;
var b = 3;

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

var c = 7;
console.log(++c);	//8
console.log(c++);	//7
console.log(c);		//8

console.log(--c);	//6
console.log(c--);	//7
console.log(c);		//6

 

2. 대입 연산자, 할당 연산자

var d = 2;
d = 10;
console.log(d);

console.log(d += 3);	//5
console.log(d -= 3);	//-1
console.log(d *= 3);	//6
console.log(d /= 3);	//3.3333
console.log(d %= 3);	//1

 

 

3. 비교 연산자

console.log(2 == 2);		//true
console.log(2 == "2");		//true 암묵적 형변환 (자바스크립트가 타입을 먼저 일치시키고 비교함)
console.log(2 === "2");		//false 타입까지 같은지 비교

console.log(2 != 2);		//false
console.log(2 != "2");		//false
console.log(2 !== "2");		//true

console.log(4 > 2);		//true
console.log(4 < 2);		//false
console.log(4 >= 2);		//true
console.log(4 <= 2);		//false

 

4. 논리 연산자

논리합(or)

피연산자 중에 하나라도 참이면 참

console.log(true || true);			//true
console.log(true || false);			//true
console.log(true || false || false);		//true
console.log(false || false);			//false

console.log(2 > 4 || 5 == 5);	//true

논리곱(and)

피연산자 모두가 참이어야 참

console.log(true && true);			//true
console.log(true && false);			//false
console.log(false && false);			//false

console.log(2 > 4 && 5 == 5);	//false
console.log(2 < 4 && 5 == 5);	//true

부정(not)

피연산자의 boolean 값을 부정

console.log(!true);			//false
console.log(!false);			//true

console.log(!(5 > 4));		//false

 

 

5. typeof 연산자

console.log(typeof 1);				//number
console.log(typeof "1");			//string
console.log(typeof true);			//boolean
console.log(typeof undefined);			//undefined
console.log(typeof Symbol());			//symbol

console.log(typeof null);		//object라고 나옴. null값에 대한 검증이 필요하면 ===비교연산자를 사용하는 것이 낫다

---

▶ 문자열 다루기

1. 문자열 선언

var greeting = "Hello";
var farewell = 'bye';

var greeting = "Hello";
var farewell = 'bye';
var myname = '김테킷';

var sentence = greeting + myname;
var sentence2 = greeting + ' ' + myname;
var sentence3 = greeting + '\n' + myname;
console.log(sentence);		//Hello김테킷
console.log(sentence2);		//Hello 김테킷
console.log(sentence3);		//Hello
				//김테킷

var farewell = 'bye';
console.log(farewell + 2);	//bye2   그냥 숫자와 병합된다

 

 

2. 이스케이프 시퀀스

\로 시작하는 특수한 문자의 형태

var sentence = greeting + '\n' + myname;
console.log(sentence);		//Hello
				//김테킷

var sentence = greeting + '\t' + myname;
console.log(sentence);		//Hello	김테킷

var sentence = greeting + '\'' + myname;
console.log(sentence);		//Hello'김테킷

var sentence = greeting + '\"' + myname;
console.log(sentence);		//Hello"김테킷

var sentence = greeting + '\\' + myname;
console.log(sentence);		//Hello\김테킷

 

3. 템플릿 리터럴

멀티라인 텍스트 작업 가능

이스케이프 시퀀스 필요X

var a = `안녕하세요?
여러분!!`;
console.log(a);		//안녕하세요?
			//여러분!!			개행이 자동으로 된다.

var price = 1000;
var b = '이 물건은 ' + price + '원 입니다.'
console.log(b);		//이 물건은 1000원 입니다.

var c = `이 물건은 ${price}원 입니다.`
console.log(c);		//이 물건은 1000원 입니다.

var d = `이 물건은 ${200 + 450}원 입니다.`
console.log(d);		//이 물건은 650원 입니다.

 

4. 문자열 함수

- indexOf

문자열의 특정 값이 시작되는 위치/순서. (0부터)

var abc = "I am Iron man";

console.log(abc.indexOf("man"));		//10
console.log(abc.indexOf("I"));			//0

 

-slice

문자열의 일부를 잘라낼 때

끝에 적은 순서의 문자는 포함되지 않는다.

var abc = "I am Iron man";

console.log(abc.slice(0, 3));		//I a
console.log(abc.slice(0, 4));		//I am

 

- toUpperCase(), toLowerCase()

모든 문자를 대문자/소문자로 변경

var abc = "I am Iron man";

console.log(abc.toUpperCase());		//I AM IRON MAN
console.log(abc.toLowerCase());		//i am iron man

 

- startWith(), endsWith()

특정 문자로 시작하는지/끝나는지 검증

대소문자를 구분한다

var efg = 'This is my car.';

console.log(efg.startsWith('Th'));		//true
console.log(efg.startsWith('TH'));		//false

console.log(efg.endsWith('car.'));		//true

 

- includes()

특정 문자가 어느 위치에든 있는지 검증

console.log(efg.includes('is'));		//true