강의보면서 모르는 내용 위주로 정리합니다.
🚩 1. 변수
✅ let
- 재선언은 불가능, 재할당은 가능
- 한 번 선언하고 그 값이 변할 때 사용
✅ const
- 재할당, 재선언 불가능
- 한 번 선언하고 바꾸지 않을 값을 선언할 때 사용
✅ var
- 재할당, 재선언 가능
- 이제는 거의 안씀 (그냥 안 쓰는 방향으로..)
TIP!!
모든 변수는 const로 선언하고 나중에 바뀔 값만 let으로 바꾼다.
🚩 2. 알림창 (alert, prompt, confirm)
✅ alert
확인 버튼만 있다.
✅ prompt
사용자로부터 입력을 받는다.
입력값이 없을 경우를 대비해 기본값을 제공할 수 있다.
//구문
prompt(message, default);
//예시
let sign = prompt("당신의 별자리는 무엇입니까?","전갈자리");
// 실행하면 메세지가 출력되면서 사용자의 입력을 받고,
// 만약 사용자가 입력하지 않으면 기본값인 '전갈자리'가 출력된다.- 기본값이 들어있으면 사용자가 입력하지 않았을 때 null값으로 넘어가지도 않고, 입력할 때 힌트를 주는 용도로도 사용할 수 있다.
✅ confirm
취소/확인 버튼이 있다.
취소를 누르면 false 값이, 확인을 누르면 true 값이 반환됨.
🚩 3. 형 변환
숫자형이 아닌 자료도 나누기 같은 연산은 숫자로 자동 형 변환하여 계산된다. (자동 형변환)
자동 형변환은 오류를 발생시킬 수 있으므로 항상 의도를 갖고 형 변환을 해주어야 한다. (명시적 형변환)
String(): 문자형으로 변환Number(): 숫자형으로 변환- 숫자가 아닌 값이 포함되어있으면 NaN이 반환된다.
🚩 4. 함수
✅ 전역변수와 지역변수
매개변수로 받은 값은 복사된 후 함수의 지역변수가 된다.
let name = 'Mike';
function sayHello(name) {
console.log(name);
}
sayHello(); //undefined
sayHello('Jane'); //"Jane"- 위 예제에서 name이라는 전역 변수를 생성하고 Mike 라는 값을 할당함
- 함수에서는 매개변수로 name을 받고 사용자가 입력한 값을 할당한다. (여기서의 name은 지역변수이다.)
- 따라서 함수 안에서 name(지역변수)는 사용자로부터 입력받은 값이 할당되고, 함수 외부에서 name은 전역 변수로서 Mike 라는 값을 가지게 된다. (함수 내부의 name과 외부의 name은 완전히 다른 변수)
💡 전체 서비스에서 쓰이는 값을 제외하고는 지역변수로 작성하는 습관을 들이는 것이 좋다.
🚩 5. 객체 - method, this
✅ 메소드 method
객체 프로퍼티로 할당된 함수 (메소드도 함수이다.)
const user = {
name : 'Mike',
age : 30,
sayHello : function () {
console.log('Hello~')
}
}- 메소드는
: function을 생략해서 사용할 수 있다. (쓰임은 같음)
sayHello() {
console.log('Hello~')
}✅ this
this는 항상 함수가 호출될 때 결정된다.
메소드 내부에서 this를 작성하면 this는 메소드를 부른 객체를 가르킨다. (this = 객체.메소드 에서의 객체)
let boy = {
name : 'Mike',
sayThis : function() {
console.log(this); //여기서 this가 가르키는건 해당 메소드를 누가 호출하는지에 따라 달라짐
console.log(this.name);
}
}
boy.sayThis(); //sayThis라는 메소드를 호출한게 boy 객체이므로 이 메소드에 쓰인 this가 가르키는건 boy 객체이다.
//따라서, this를 출력하면 boy 객체 자체가 출력되고
//this.name = boy.name이므로 Mike가 출력된다.메소드를 화살표 함수로 작성하면 this가 가르키는게 달라진다.
let boy = {
name : 'Mike',
sayThis : () => {
console.log(this);
}
}
boy.sayThis(); //window 객체 출력💡 객체의 메소드를 작성할 때는 화살표 함수로 작성하지 않는 것이 좋다!!!
🚩 6. 배열
✅ 배열 메소드
pop() : 배열 끝 요소 제거
let days = ['월', '화', '수']
days.pop()
console.log(days) // ['월', '화']push() : 배열 끝에 추가
let days = ['월', '화', '수']
days.push('목')
console.log(days) // ['월', '화', '수', '목']
days.push('금', '토')
console.log(days) // ['월', '화', '수', '목', '금', '토']shift(), unshift() : 배열 앞에 제거/추가
let days = ['월', '화', '수']
days.unshift('일')
console.log(days) // ['일', '월', '화', '수']
days.shift()
console.log(days) // ['월', '화', '수']push와unshift는 한번에 여러 요소를 추가할 수 있다.
Hello, World