[js] javascript 기초 (1)

참고: https://youtu.be/KF6t61yuPCY

 

✔️ 변수

 

[ let ]

- 변할 수 있는 값을 선언

 

[ const ] 

- 절대로 바뀌지 않는 상수 (수정 X)

- 보통 대문자로 선언

 

const PI = 3.14;
const SPEED_LIMIT = 50;
const BIRTH_DAY = '2020-01-01';

 

❗Tip

- 모든 변수를 const로 선언

- 변경될 여지가 있는 변수를 let으로 변경

 

1) 변수는 문자와 숫자, $와 _만 사용

2) 첫 글자는 숫자가 될 수 없음

3) 예약어는 사용 불가 ex) class, let 

(참고: https://www.w3schools.com/js/js_reserved.asp)

4) 가급적 상수는 대문자로 사용

5) 변수명은 읽기 쉽고 이해할 수 있게 선언

 

 

✔️ 자료형

 

[ 문자형 String ]

- 더블쿼터, 싱글쿼터, 백틱으로 작성할 수 있음

- 더블쿼터 내 더블쿼터 혹은 싱글쿼터 내 싱글쿼터를 사용할 때는

역슬래시(\)를 쿼터 앞에 붙혀서 사용 가능

- 백틱은 문자형 내부에 변수를 사용하고 싶을 때,

${변수}와 같이 사용할 수 있고 또는 표현식 ${30+1}을

넣어서 사용할 수 있음

 

[ 숫자형 Number]

- 30 또는 3.14와 같은 정수와 실수를 의미

- 더하기(+), 빼기(-), 곱하기(*), 나누기(/), 나머지(%) 연산이 가능

- 1/0과 같은 계산을 하게 되면 무한대(Infinity)를 얻을 수 있음

- 문자열/숫자와 같은 계산을 하게 되면 NaN(Not a Number)을 얻을 수 있음

 

[ 불린형 Boolean ]

- true 참과 false 거짓으로 구분됨

- 연산자와 함께 사용하는 비교 구문에 주로 사영

 

[ null 과 undefined ]

- null은 "존재하지 않는 값"을 의미

- undefined는 "값이 할당되지 않음"을 의미

 

let age;
console.log(age);

// 결과
undefined

let user = null;
console.log(user);

// 결과
null

 

[ typeof 연산자 ]

- 변수의 타입을 확인할 수 있다.

- 다른 개발자가 선언한 변수의 타입을 확인하거나,

API 통신 등을 통해 받아온 데이터를 타입에 따라

처리하는 경우에 주로 사용

 

const name = "Mike"

console.log(typeof 3); // "number"
console.log(typeof name); // "string"
console.log(typeof true); // "boolean"
console.log(typeof "test"); // "string"
console.log(typeof null); // "object"
console.log(typeof undefined); // "undefined"

 

여기서 typeof null이 객체형으로 나오는데 null은 사실 객체가 아니다.

자바스크립트 하위 호환성 유지를 위해 수정하지 않는다고 한다.

 

 

✔️ alert, prompt, confirm

 

[ alert ]

- 알려주는 역할 담당

- 사용자가 확인을 누를 때까지 표시

- 사용자와의 상호작용보다는 일방적 표시

 

[ prompt ]

- 입력 받는 역할 담당

- 취소와 확인 버튼이 생성되며 입력창 생성

- 변수를 입력받고 prompt에서 취소를 하게 되면,

해당 입력받은 변수에는 null이 반환됨

- prompt(arg1, arg2)라고 하였을 때, arg1은 prompt의 메세지를

arg2는 default 값을 설정할 수 있음

 

[ confirm ]

- 확인 받는 역할 담당

- alert와 같이 메세지를 표시

- alert와 다르게 확인과 취소 버튼이 존재

- 확인을 누르면 변수는 true를 반환하고,

취소를 누르면 false를 반환함

 

❗기본 제공 기능의 단점

1) 스크립트 일시 정지 (알림마다 확인눌러야 함)

2) 스타일링 불가능 (브라우저마다 스타일이 다름)

 

 

✔️ 형변환 (Type Conversion)

 

❓형변환이 필요한 이유

 

// String
"Hello" + "World" = "Hello World"

// Number
100 + 200 = 300

// String + Number ?
"100" + 200 = ??

 

예를 들어 prompt로 90과 80을 입력받은 수에

2로 나누게 되면 문자형을 더하여 나눈 9080/2가

console.log에 찍혀 4540이 출력되게 된다.

 

여기서 9080은 "9080" 즉, 문자형에 해당되는데

나눗셈 연산이 가능한 이유는 나눗셈과 같은 표현식은

숫자형으로 자동 변환되기 때문이다.

 

예를 들어 "6" / "2" = 3과 같은 결과를 자동 형변환이라고 한다.

이러한 변환은 오류를 발생시킬 수 있기 때문에

알맞게 자료형을 입력하는 명시적 형변환을 사용해야 한다.

 

이러한 명시적 형변환은 다음과 같이 사용할 수 있다.

 

1) String()은 문자형으로 변환

- 모든 값을 문자형으로 변환이 가능 

 

2) Number()는 숫자형으로 변환

- 숫자만 형변환이 가능

- 형변환되지 않는 값은 NaN을 반환

- true는 숫자 1, false는 숫자 0을 반환

 

3) Boolean()은 불린형으로 변환

- false만 기억하면 됨

- 숫자 0, 빈 문자열(''),  null, undefined, NaN

- 이 값들은 모두 false를 반환하고,

이 외에는 모두 true가 된다.

 

❗주의사항

1) Number(null)은 0이 된다.

2) Number(undefined)는 NaN이 된다.

 

Number(null) // -> 0
Number(undefined) // -> NaN

Number(0) // false
Number('0') // true

Number('') // false
Number(' ') // true

 

 

✔️ 기본 연산자

 

곱셈(*)과 나눗셈(/)은 더하기(+)와 빼기(-)보다

우선순위가 높다. 또한, 파이썬처럼 num = num + 5;를

num += 5; 처럼 줄여서 사용할 수 있다.

 

C언어처럼 num++, num-- 처럼 증감 연산자를 사용할 수 있다.

또한, ++num, --num 처럼 전위와 후위 연산을 진행할 수 있다.

 

%는 나머지를 구할 때 사용할 수 있다.

 

 

✔️ 비교 연산자, 조건문 (if, else)

 

같은가는 ==을 사용하고, 다른가는 !=를 사용한다.

비교 연산에 대해서는 항상 true 혹은 false로

불린형을 반환하게 된다. (이를 동등 연산자라고 한다.)

 

하지만, 이에 대해서 약한 연산과 강한 연산으로 나누는데

이를 일치 연산자라고 한다.

1 == "1" 은 true를 반환하는데, type까지 일치해야하는 비교를

1 === "1" 이라고 사용하게 되고 이는 false를 반환한다.

 

if(조건식) { } 를 사용할 수 있는데, 브라켓은 가독성을 위해 사용해야한다.

 

const age = 30;

if(age > 19) {
	console.log('Hello?');
}

if(age <= 19) {
	console.log('bye');
}

console.log('---------');

// 위의 코드를 else로 간단히 작성

if(age > 19) {
	console.log('Hello?');
} else {
	console.log('bye');
}

// 위의 코드를 else if로 작성

if(age > 19) {
	console.log('Hello?');
} else if(age === 19) {
	console.log('수능');
} else {
	console.log('bye');
}

 

 

✔️ 논리 연산자 (AND, OR, NOT)

 

[ || (OR) ]

- 여러개 중 하나라도 true면 true

- 모든 값이 fasle 일때만 false를 반환

- 첫 번째 true를 발견하는 즉시 평가를 멈춤

 

[ && (AND) ]

- 모든 값이 true면 true

- 하나라도 fasle면 false를 반환

- 첫 번째 false를 발견하는 즉시 평가를 멈춤

 

[ ! (NOT) ]

- true면 false

- false면 true

 

❗Tip

- 만약 전체 데이터에서 80%, 60%, 7%의 데이터가 있다면,

7%, 60%, 80%로 연산자를 배치하여 성능 최적화를 도울 수 있다.

 

 

✔️ 반복문 (for, while, do while)

 

for 문은 초기값 (let i = 0;), 조건 (i < 10;), 코드 실행 후 작업 (i++)

총 세 부분으로 나누어 작성할 수 있다.

이는 0부터 9까지 총 10번의 작업을 수행하는 loop이 된다.

 

while 문은 초기값을 외부에서 선언하고

while (조건식) { } 처럼 작성하고 조건식이 true이면

해당 괄호안의 loop문을 수행하게 된다.

 

do.. while 문은 do { } while (조건식) 처럼 사용할 수 있는데,

while과의 차이점은 적어도 한 번은 실행한다는 것이다.

 

break는 멈추고 빠져나오는,

continue는 멈추고 다음 반복으로 진행하는

키워드로 반복문 안에서 사용할 수 있다.

 

for(let i=0; i<10; i++){
	// 코드~~
}

let i=0;
while(i<10){
	// 코드~~
    i++;
}

do {
	// 코드~~
} while(조건식)

 

❗Tip

- 명확한 횟수가 정해져있다면 for문을,

그게 아니라면 while문을 주로 사용

 

화이팅 💪