안녕하세요
코딩앙마 JavaScript 기초 정리 본문
https://www.youtube.com/watch?v=KF6t61yuPCY&list=WL&index=17&t=800s
코딩앙마님의 자바스크립트 강의로 기초를 다집니다.
변수
변수를 선언할 때 상수는 가급적이면 대문자로 선언합니다.
대화상자
prompt()
prompt()를 이용하면 대화상자를 띄워 이용자에게 값을 입력받도록 할 수 있습니다.
const name = prompt("이름?");
두 번째 요소로 입력창의 디폴트 값을 정할 수 있습니다.
const name = prompt("이름?", "2020-10-");
문자형으로 입력받게 됩니다.
아무런 값을 입력받지 안았다면 name에는 null object가 들어갑니다.
alert()
alert("환영. " + name + ".");
confirm()
confirm()함수는 취소와 확인 창을 띄웁니다.
const isAdult = confirm("성인?");
확인 : true 를 반환합니다.
취소 : false 를 반환합니다.
결제하시겠습니까? 정말 삭제하시겠습니까?와 같이 사용자의 액션을 한 번 더 확인해줄 때 도움이 됩니다.
단점
스크립트가 일시 정지됩니다.
대화상자의 스타일을 정할 수 없습니다.
형변환
String() 문자형으로 변환
Number() 숫자형으로 변환
Number로 형변환한 다양한 값을 기억해두면 좋습니다.
Number(true) = 1,
Number(false) = 0,
Number(null) = 0,
Number(undefined) = NaN
0과 "0" 그리고 ''"과 " " 은 출력되는 값이 다릅니다.
Boolean(0) // false
Boolean('0') // true
Boolean('') //false
Boolean(' ') //true
Boolean() 불린안형으로 변환
Boolean(0, "", null, undefined, NaN)을 출력하면 모두 false가 됩니다,
이 외에는 모두 true를 반환합니다.
자동 형변환
("6" / "2" =3) 과 같이 문자열을 계산식에 넣으면 자동으로 숫자로 형변환하여 계산합니다.
명시적 형변환을 통해 의도적인 출력을 하도록 합니다.
증가연산자
let num = 10;
let result = ++num 은 num에 1을 더한 값을 출력합니다. > 11
let result = num++ > 10
은 피연산자 뒤에 위치한 후위 증가/감소 연산자는 먼저 다른 연산을 수행한 후, 피연산자의 값을 증가/감소시킨다.
비교연산자
const a = 1;
const b = "1"
console.log(a == b)(동등연산자) 는 문자형인 "1"과 1을, 같은 1로 읽습니다. 결과는 true 입니다.
console.log(a === b)(일치연산자) 는 타입까지 구분하여 false가 됩니다.
가급적이면 일치연산자를 통해 판별하여 에러를 미연에 방지합니다.
do while 반복문은 조건을 이후에 판별하기 때문에 조건을 최소한 한 번은 실행하게 됩니다.
let i = 0;
do{
i++
console.log(i)
} while (i < 10)
switch
switch는 if문과 동일합니다.
여러 입력값을 다룰 때 편하다고 합니다.
break를 실행하지 않으면 최초로 실행된 case 이후의 모든 코드가 실행됩니다.
switch(element) {
case "a" :
console.log(1)
break;
case "b" :
console.log(2)
break;
case "c" : // 동일한 결과를 출력할 케이스는 두 개 이상이어도 됩니다.
case "d" :
console.log(3)
break;
default : // default가 if문의 else역할을 합니다.
console.log(null)
function name(parameter)
fuction : 함수
name : 함수명
parameter : 매개변수
논리연산자 || 를 활용해 매개변수를 입력받지 않았을 때 default를 정하는 방법입니다.
function hello(name){
let hasName = name || 'friend';
let msg = `Hi, ${hasName}`
}
매개변수가 없다면 "Hi, friend" 를 출력합니다.
hello()
매개변수가 있다면 "Hi, young" 을 출력합니다.
hello('young')
매개변수의 default 값을 간단하게 지정할 수 있습니다.
function hello(name = 'friend'){
let msg = `Hi, ${hasName}`
}
함수는
한 번에 한 작업에만 집중합니다.
여러 작업이 한 함수에 들어간다면 이를 잘게 나누어 개별 함수로 만들어 이용합니다.
함수선언문, 함수표현식
함수선언문 은 호이스팅이 적용되어 어디서든 호출 가능합니다. 더 자유롭게 코딩할 수 있습니다.
함수표현식 은 함수선언문과 동일하지만 호이스팅이 적용 안됩니다.
화살표함수
한 줄로 표현이 가능합니다.
let hello = (name) => `Hello, ${name}`;
인수가 없는 화살표함수는 중괄호를 생략할 수 없습니다.
let hello = () => {
console.log('Hello.')
}
객체
const man {
name : 'young',
age : 10,
}
접근 방법
man.name;, man['age'];
추가 방법
man.nationality = 'Korea';
man['hairColor'] = 'black';
삭제 방법
delete man.hairColor;
객체 단축 프로퍼티
es6 문법에서는
const name = 'young';
const age = 10
const man = {
name : name,
age : age,
}
를,
const name = 'young';
const age = 10
const man = {
name,
age,
}
로 축약할 수 있습니다.
객체의 프로퍼티 존재 여부 확인 방법
존재하지 않는 프로퍼티를 입력하게 되면 undefined를 출력합니다.
man.asdnbjan; // undefined
in 연산자를 이용하여 true, false 값을 반환할 수 있습니다.
'birthDay' in man; // false
'age' in man // true
for ... in 반복문으로 객체의 모든 프로퍼티를 순회할 수 있습니다.
for (let key in man){
console.log(key)
console.log(man[key])
}
객체에서 method란 객체 프로퍼티로 할당 된 함수입니다.
const man = {
sleep : function(){
console.log('Good night.')
}
}
축약형은 다음과 같습니다.
const man = {
sleep(){
console.log('Good night.')
}
}
this를 활용하여 this가 위치한 객체의 프로퍼티를 불러옵니다.
let man = {
name : 'young',
sayHi : function () {
console.log(`Hi, ${this.name}`) // young
}
};
man.sayHi()
this 차체를 출력하면 객체를 반환합니다.
let man = {
name : 'young',
logThis : function () {
console.log(this);
}
};
man.logThis();
Object { // 출력결과
name: "young',
logThis: function () { }
}
배열
arr.length : 길이 반환
arr.push('1', '2', '3') : 배열 끝에 추가
arr.pop() : 배열 끝 요소 제거
arr.unshift('1', '2', '3') : 배열 맨 앞에 추가
arr.shift() : 배열 맨 앞의 요소 제거
배열에서 for ... of 는 index를 얻지 못하지만 간결하게 표현할 수 있게 됩니다.
let nums = [1, 2, 3]
for (let num of nums){
console.log(num)
}