변수 선언
a = 30;
b = "hello" //문자형 String
console.log(a + b); // "30hello"숫자형과 문자형을 섞어서 쓸 수 있지만 결과적으로 모두 문자형으로 반환된다.
-
let : 값이 변할 수 있는 변수
-
const : 한번 선언하면 값이 변하지 않는 상수. 수정이 불가능하며 대문자로 쓰는 것이 좋다
- 변수는 문자와 숫자, $와 _만 사용
- 첫글자는 숫자가 될 수 없음
- 예약어는 사용할 수 없음(JS에서 이미 자체적으로 사용중인 변수)
- 가급적 상수(const)는 대문자로 쓰는 것이 좋음
- 변수명은 읽기 쉽고 이해할 수 있게 선언
String 을 선언하는 3가지 방법
const name1 = "Mike"; //큰 따옴표
const name2 = 'Mike'; //작은 따옴표
const name3 = `Mike`; //백틱 : 문자열 내부에 변수를 표현할 때 사용
const msg3 = `My name is ${name}`;
// 백틱은 여러줄의 문자열도 포함할 수 있다. 따옴표에서 줄바꿈하려면 \n을 써야한다.
const msg3 = `오늘은 맑고 화창한
날씨가 계속 되겠습니다.
내일은 비소식이 있겠습니다.`;
- NaN(Not a number) : 숫자가 아님
- null : 존재하지 않는 값
- undefined : 값이 할당되지 않음
let age; //변수를 선언만 하고 아무것도 할당하지 않음
console.log(age); // undefined
let name = null; //존재하지 않는 값typeof : 자료형 반환,자료형 알아내기
const nmae = "Mike";
console.log(typeof 3); //number
console.log(typeof name); //string
console.log(typeof true); //boolean
console.log(typeof "xxx"); //string
console.log(typeof null); //object(객체형)
console.log(typeof undefined); //undefined하지만, null은 객체가 아니다.
대화상자
- alert() : 무언가를 알려줌
- prompt() 입력받음 : 취소하면 null값이 들어감
- confirm() 확인받음 : 확인:true 취소:false 반환
const name = prompt("이름을 입력하세요.","기본값"); //취소하면 null값이 들어감
alert(`환영합니다 ${name}님!`);
const isAdult = confirm("당신은 성인 입니까?");
console.log(isAdult); //확인:true 취소:false 반환단점
스크립트 일시 정지
스타일링 불가(이러한 단점 때문에 모달창을 만들어 씀)
형 변환
String() ⇒ 문자형으로 변환
Number() ⇒ 숫자형으로 변환 // Number("문자") ⇒ NaN
Boolean() ⇒ 불린형으로 변환 // 0, '', null, undefined, NaN ⇒ falseNumber("안녕"); //NaN
Number(true); //true:1 false:0
Number(null); //0
Number(undefined); //NaN
Number(0) //false
Number('0') //true
Number('') //false
Number(' ') //true비교 연산자
console.log(10 == "10"); //true 동등 연산자 (서로 type이 다른데도 true를 반환함..)
console.log(10 === "10"); //false 일치 연산자 : type까지 비교해준다
가급적 동등 연산자 보다는 일치 연산자를 사용하는 것이 좋다!
논리 연산자
|| (OR)
&& (AND)
! (NOT)
화살표 함수
let add = function(num1,num2){ //함수의 기본형
return num1 + num2;
}
let add = (num1,num2) => { //화살표 함수로 변환
return num1 + num2;
}
let add = (num1,num2) => ( //return까지 생략(일반괄호)
num1,num2
);
let add = (num1,num2) => num1,num2; //return문이 한 줄이라면 괄호도 생략 가능
let add = num1 => num1,num2; //인수가 하나라면 인수의 괄호 생략 가능
let add = () => 1+2; //인수가 없다면 괄호 생략 불가능
객체(Object)
const superman = {
name : 'clark', // [key] : [value]
age : 33, //마지막 쉼표는 있어도 되고 없어도 됨(있는게 수정,삭제에 용이)
}
//접근
superman.name //'clark'
superman['age'] //33
//추가
superman.gender = 'male';
superman['hairColor'] = 'black';
//삭제
delete superman.hairColor;단축 프로퍼티
const name = 'clark';
const age = 33;
const superman = {
name : name, // name:name
age : age, //age:age
gender : 'male',
}프로퍼티 존재 여부 확인
const superman = {
name : 'clark',
age : 33,
}
superman.birthday; //undefined
'birthday' in superman // false //값이 있을지 확신할 수 없을때 주로 사용
'age' in superman // true객체순회 for...in
//for..in 반복문 : **객체를 순회**하면서 값을 얻어올 수 있음
for(let key in superman){
console.log(key)
console.log(superman[key])
}method : 객체 프로퍼티로 할당 된 함수
const superman = {
name : 'clark',
age : 33,
**fly:function(){console.log('날아갑니다')**
}
//단축 구문
const superman = {
name : 'clark',
age : 33,
**fly(){console.log('날아갑니다')}
const user = {
name : 'Mike',
sayHello : function(){
console.log(`hello, i'm ${user.name}`); //이런 방식은 문제가 될 수 있음.
console.log(`hello, i'm ${this.name}` //이렇게 this를 통해 자신의 프로퍼티 사용
}
}**
✨ 객체에서 화살표 함수
화살표 함수는 인반 함수와는 달리 자신만의 this를 가지지 않음.
화살표 함수 내부에서 this를 사용하면, 그 this는 외부에서 값을 가져옴
따라서, 객체 메소드를 작성 할때는 화살표 함수를 사용하지 않는 것이 좋다.
배열(Array) : 순서가 있는 리스트
let students = ['철수','영희',...,'영수'];
student[0] = '민정';- 배열의 특징 배열은 문자 뿐만 아니라, 숫자, 객체, 함수 등도 포함할 수 있음
배열 메서드
push() : 배열 끝에 요소 추가 // 한꺼번에 많은 값을 추가 할수도 있다
pop() : 배열 끝 요소 제거
unshift() : 배열 가장 앞에 요소 추가 // 한꺼번에 많은 값을 추가 할수도 있다
shift() : 배열 가장 앞의 요소 삭제
sort() : 배열을 오름차순으로 정렬
reverse() : 배열을 역순으로 재배치
join() : 배열 요소들 사이에 원하는 문자를 삽입
concat() : 두 배열을 합쳐줌
배열 순회
- for ...of : 배열 각 요소 반환
for(let day of days){ //days 안의 요소를 day에 담아준다
console.log(day)
}- for ...in : 배열 각 요소의 인덱스 반환
for(let idx in days){ //days 요소의 인덱스를 idx에 담아준다.
console.log(day[idx])
}- forEach
days.forEach((data, idx) => { //배열의 요소와 idx를 받아올 수 있다.
console.log(data, idx)
})😡 객체를 순회하는 for...in 과 헷갈리지 말 것!
객체에서는 key를 반환하며 배열에서는 인덱스를 반환한다.
배열에서도 for...in을 쓸 수는 있지만 단점이 많아서 권장하지 않음
