Javascript 기초

회사에서 vue.js로 프론트엔드 작업을 해야 해서 javascript좀 정리해봅니다.

 

1. 변수 선언 - let과 const

let 변수명; // 같은 이름의 변수를 선언하면 error 발생
const 변수명; // 상수 선언. 절대로 바뀌지 않는다. 주로 대문자로 선언

* tip - 우선 모든 변수를 const로 선언하고 나중에 바뀔 여지가 있는 변수만 let으로 선언해주는 것이 좋다.

 

2. alert, prompt, confirm

const name = prompt('이름을 입력하세요'); // 사용자로부터 값을 입력받을 때 사용
alert(`안녕하세요, ${name}님. 환영합니다.`);
comfirm('성인입니까?');

3. 형변환

prompt로 입력받은 값은 문자형으로 입력받아진다.

따라서 prompt로 입력받은 숫자(ex : 90) + 80 이렇게 하면 문자열 9080이 나온다.

자동 형변환은 의도치 않은 에러를 발생시킬 수 있으므로 명시적 형변환을 하는 것이 좋다.

Number("1234") // 숫자 1234
Number(true) // 1
Number(null) // 0
Number(undefined) //NaN

Boolean(0) // false
Boolean('0') // true
Boolean('') //false
Boolean(' ') // true
// Boolean() : 0, '', undefined, NaN -> false

4. 연산자 - Operators

* ++ : 증가 연산자

* -- : 감소 연산자

* 비교 연산자

const a = 1;
const b = "1";

console.log(a == b); // true. 타입까지 비교하지 않기 때문
console.log(a === b); // false. 타입까지 비교하기 때문

5. 함수(function)

중복되는 코드를 줄이기 위해 함수 사용

중복되는 알고리즘을 수정해야 할 때, 함수가 없다면 여러 번 수정해야겠지만, 함수가 있음으로써 함수만 고치면 된다.

// 함수 예시
function sayHello(name) {
	console.log(`Hello, ${name}`);
}

sayHello('Chaeyoun');

* 함수 표현식

// 함수 표현식 예시
let sayHello = function(){
	console.log('Hello');
}

// 함수 선언문은 어디서든 호출 가능

// 화살표 함수(arrow function)
let add = (num1, num2) => num1 + num2;

6. Object - 접근, 추가, 삭제

// object
const superman= {
	name : 'clark',
    age : 33,
}

// 접근
superman.name // 'clark'
superman['age']

// 추가
superman.gender = 'male';
superman['hairColor'] = 'black';

// 삭제
delete

// 프로퍼티 존재 여부 확인
'birthDay' in superman; // false
'age' in superman; // true

7. 객체 고급

// 객체에 method 추가
const superman = {
	name : 'clark',
    age : 33,
    fly : function() { // fly()로 줄여쓰기 가능
    	console.log('fly');
    }
}

// 화살표 함수 주의점
// 화살표 함수는 일반 함수와 달리 자신만의 this가 없다.
// 화살표 함수 내부에서 this를 사용하면 그 this는 외부에서 값을 가져온다.

8. 배열(Array)

배열안에 그냥 다양하게 넣을 수 있음

배열명.length; => 배열길이 구하기~

배열에서는 for of를 권장한다!