자바스크립트 기초

폭주하는 세발자전거 2023. 4. 26. 22:57

2023. 4. 26. 22:57

변수

어떤 정보에 이름을 붙여서 저장하고 싶을 때 사용한다. (데이터가 저장되는 메모리 공간)

let name = "Arony";
const ten = "10";

줄 마지막에 들어간 세미콜론(;)은 줄이 끝나는 마지막에 붙여주는 마침표 같은 의미이다.

문자열(String)은 항상 "큰따옴표"나 '작은따옴표'로 감싸주어야 한다.

변수를 선언하기 위해서는 조건이 있다.

1. 문자, 숫자, $, _만 사용 가능

const MyHome = "...";
let _ = 1;
let $ = 3;

2. 첫 글자 숫자 사용 불가

let 1stGrade = "A+"; ❌

3. 예약어(위에 표) 사용금지

abstract	arguments	await*	boolean
break	byte	case	catch
char	class*	const	continue
debugger	default	delete	do
double	else	enum*	eval
export*	extends*	false	final
finally	float	for	function
goto	if	implements	import*
in	instanceof	int	interface
let*	long	native	new
null	package	private	protected
public	return	short	static
super*	switch	synchronized	this
throw	throws	transient	true
try	typeof	var	void
volatile	while	with	yield

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

const MAX_SIZE = 99;

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

let a = 1; ❌
let userNumber = 3; ✅

자바스크립트에서 변수를 선언할 때는 변하지 않는 값은 const, 변할 수 있는 값은 let으로 선언한다.

자료형

자바스크립트는 문자열, 숫자, 배열, 불린(boolean), 객체 등의 데이터형을 가진다.

문자형(String)

const name1 = "Arony"; //큰 따옴표
const name2 = 'Mike'; //작은 따옴표
const name3 = `Lora`; //백틱

``백틱은 문자의 내용을 변수로 표현해줄때 사용하면 편리하다.

const message = `My name is ${name1}`;
console.log(massage);
//"My name is Arony";

바로 표현식을 넣는것 또한 가능하다.

let msg = `나는 ${20+3}살 입니다.`
console.log(msg);
//"나는 23살 입니다."

숫자형 (Number)

const age = 30; //정수형
const PI = 3.14; //실수형

console.log(1 + 2); //더하기
console.log(10 - 3); //빼기
console.log(3 * 4); //곱하기
console.log(12 / 4); //나누기
console.log(9 % 2); //나머지

사칙연산 가능, 정수형과 실수형으로 나뉜다.

const name = 'jenny';
const y = name / 2;

console.log(y); // NaN, Not a number

숫자와 관련된 작업을 할 때 NaN인지 아닌지 유의하면서 코딩을 해야한다.

불린(boolean) : 참, 거짓

let a = true; //참
let b = false; //거짓

let name = 'Ammy';
let age = 30;

console.log(name == 'ammy'); //true
console.log(age > 40); //false

null과 undefined

let age;
console.log(age); // undefined

변수를 선언만 하고 아무것도 할당하지 않은 경우 undefined를 출력한다.

let user = null;

만약, 변수에 null값을 부여한다면. 위에서의 예시에서 유저는 존재하지 않는다는 의미가 된다.

typeof 연산자

const name = 'hooper';

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

예제처럼 변수를 사용하는 개발자가 직접 작성 했다면 typeof 연산자를 거의 사용할 일이 없다.

다른 개발자가 작성한 변수의 타입을 알아야 하거나 API 통신모듈을 통해 받아온 데이터를 타입에 따라 다른 방식으로 처리해야할 때 많이 사용된다.

null 은 객체가 아니지만 자바스크립트의 초기버젼의 오류라고 한다. 하위호환성을 위해 수정하지는 않는다고 한다.

❗주의사항❗

문자형 선언시에 ``백틱이 아닌 ""('')에 문자 내용에 변수 선언시 결과 출력에 값이 적용 안될 수 있으니 주의!

const fruit = 'apple';
const message = `My favorite fruit is ${fruit}`;

const message2 = "My favorite fruit is ${fruit}";
console.log(message);
console.log(message2);

문자형과 숫자형도 합칠 수 있다.

const name = 'jenny';

const a = '나는 ';
const b = ' 입니다.';

console.log(a + name + b); //나는 jenny 입니다.

const age = 30; //number
console.log(a + age + '살' + b); //나는 30살 입니다.

대화상자

alert(); : 웹 브라우저의 경고 창에 데이터를 출력, 사용자와 상호작용을 하기 보단 일방적으로 알리는 용도로 사용

let a = '어서오세요 사용자님';
alert(a);

porompt(); : 사용자가 키보드로 입력하는 데이터를 변수에 저장

let a = '당신의 이름을 적어주세요.';
prompt(a);

여기서 값을 입력하지 않고 취소를 한다면 null(아무 내용이 없는)이 된다.

const name = prompt('이름을 입력하세요.');
alert('환영합니다, ' + name + '님');

==

const name = prompt('이름을 입력하세요.');
alert(`환영합니다, ${name} 님 `);

prompt는 디폴트(default)값도 입력 할 수 있다.

const date = prompt('예약일을 입력해주세요', '2020-10-'); // 두번쨰 인수는 디폴트 값을 입력할 수 있다.

디폴트 값이 미리 들어가 있으면 무언가 안내하거나 힌트를 줄 때 유용하다.

confirm(); : 확인을 받는다. alert와 다른 점은 확인과 취소가 있다. 확인을 누르면 true, 취소를 누르면 false 값이 남는다.

const isAdult = confirm('당신은 성인입니까?');
console.log(isAdult);

결제하시겠습니까? 나 정말 삭제 하시겠습니까? 등의 사용자의 행동을 한번 더 확인 해 줄 때 많이 사용된다.

⛔단점⛔1. 창이 떠 있는 동안 스크립트 일시 정지, 창을 닫기 전까지 이후 동작에 제약이 있다.2. 스타일링을 할 수 없다. 브라우저마다 위치와 모양이 조금씩 다르다. ~~디자이너가 싫어한다.~~→ HTML과 CSS로 만드는 모듈창도 많이 사용되지만 기본 메서드는 빠르고 적용이 간단하단 장점으로 많이 사용된다.

형 변환(Type Conversion)

string() → 문자형으로 변환Number() → 숫자형으로 변환Boolean() → 불린형으로 변환형 변환이 필요한 이유? 문자열과 문자열을 더 하면 문자열로 합쳐서 반환해준다. 숫자와 숫자를 더하면? 합친 값을 반환해준다. 하지만 자료형이 다르면 의도치 않은 값이 도출될 수도 있다.

const mathScore = prompt('수학 몇 점?');
const engScore = prompt('영어 몇 점?');
const result = mathScore + engScore / 2;

console.log(result);

prompt로 입력 받은 값은 문자형이다. 숫자 90이 아니라 문자 "90"이다. 문자와 문자를 입력 받으면 그대로 더해준다. "90" + "70" = "9070" / 2 = 4535

"9070"은 문자형인데 나누기 2가 작동한 이유는 무엇일까?

숫자형이 아니더라도 나누기 같은 표현식은 숫자형으로 자동 변환되어 계산된다.

"6" / "2" = 3 이 나오는데 이러한 과정을 자동 형변환이라고 한다. 자동으로 되서 편리하다고 생각 할 수 있지만 원인을 찾기 힘든 에러를 발생 시킬 수 있어 항상 의도를 가지고 원하는 타입으로 변환해 주는 것이 좋다. = 명시적 형변환

명시적 형변환을 할 수 있는 방법

string() → 문자형으로 변환

console.log(String(3), String(true), String(false), String(null), String(undefined));
// "3" "true" "false" "null" "undefined"

Number() → 숫자형으로 변환

console.log(Number(3), Number(true), Number(false));
//3 1 0

Boolean() → 불린형으로 변환

true→ 밑에 예시 외에 다른 상황

false→숫자 0, 빈 문자열" ", null, undefined, NaN

❗주의사항❗: 버그 없는 코드를 위해 외워야 하는 상황

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

Number(0)  // 숫자, false
Number("0")  // 문자열, true

Number("")  // false
Number(' ')  // 여백(빈공간), true

연산자(Operator)

산술 연산자

연산자	의미
+	덧셈
-	뺄셈
*	곱셈
/	나눗셈
%	나머지 계산
**	거듭제곱 계산
++	1 증가
--	1 감소

나머지를 사용할 때 ?

홀수 : X % 2 = 1, 짝수 : Y % 2 = 0

예시) 어떤 값이 들어와도 5를 넘기면 안될 경우 : X % 5 = 0~4 사이의 값만 반환

거듭제곱을 사용할 때 ?

const num = 2 **3;
console.log(num); //8

우선순위

* / (곱셈과 나눗셈) > + -(덧셈과 뺄셈), 원하는 값을 얻기 위해서는 괄호를 적절히 사용해야 한다.

연산자 줄여서 사용하기

let num = 10;
num += 5;
//num = num + 5;

console.log(num); //15


//더하기 외에 다른 연산자도 줄여 사용할 수 있다. +, -, *, /, %
num *= 5;
console.log(num); //50

num -= 5;
console.log(num); //5

num %= 5;
console.log(num); //0

증가 연산자, 감소 연산자

let num = 20;
num++;

console.log(num); //21


let num = 20;
num--;

console.log(num); //19

증감 연산자를 앞에 붙여주는지, 뒤에 붙여주는지에 따라서도 값이 달라진다.

let num = 10;
let result = num++;

console.log(num);  // 10, 증가 되지 않는다. 증가 시키기 위해선 


let num = 10;
let result = ++num; /* 증가연산자를 앞에다가 붙여주면 된다. 
뒤에 붙일 경우 증가시키기 전의 값을 result에 부여한다. */

console.log(num); // 11

비교연산자, 조건문

비교 연산자	의미	설명
==	같다	데이터형이 달라도 값이 같으면 true
===	값과 데이터형이 같다	데이터형도 같아야 true, 데이터형이 다르면 false
!=	다르다	데이터형이 달라도 값이 같으면 true
!==	값과 데이터형이 다르다	값이 같아도 데이터 형이 다르면 false
>	크다
<	작다
>=	크거나 같다
<=	작거나 같다

값은 늘 boolean 형으로 반환한다. true or false

조건문

어떤 조건에 따라 이후의 행동이 달라지게 해준다.

if~ 구문 : 조건식의 참 거짓 여부에 따라 특정 코드들이 수행되게 할 수도 있고 수행되지 않게 할 수도 있다.

if~else~ 구문 : 짝수/홀수, 합격/불합격, 수신/비수신, 회원/비회원 등의 두다지 요소의 조건이 존재할 때 사용한다. (흑과 백)

if~ else if~ else 구문 : 2개 이상의 조건이 필요할 때

if문 (괄호) 안에 들어가는 조건을 평가해서 true일 경우 실행해 준다.

const age = 30;

if (age > 19) {
/* if 함수 안의 조건이 맞을 경우 {}를 실행 */
    console.log('환영합니다.');
} else {
/* if 함수에서의 조건이 맞지 않았을 때 else 구문을 실행해준다.*/
	console.log('안녕히가세요.');
}

console.log();

const age = 15;

if (age > 19) {
    console.log('환영합니다.');
} else {
    console.log('안녕히가세요.');
}

console.log();

const age = 19;

if (age > 19) {
    console.log('환영합니다.');
} else if (age === 19) {
    console.log('수능시험 화이팅!!!');
} else {
    console.log('안녕히가세요.');
}

console.log();

논리 연산자

논리연산자	설명
&& AND	여러 조건이 모두 true일 경우 최종 결과가 true. 하나라도 false일 경우 false를 반환
\|\| OR	여러 조건 중 하나라도 true면 true. 모든 값이 false 일 때 false를 반환
! NOT	결과가 true일 경우에 false로 변경하고, false일 경우에 true로 반환한다.

펭수는 펭귄이거나 OR, 여자이다. = true : 둘 중 하나만 맞아도 true이기 때문에

펭수는 펭귄이고 AND, 여자이다. = false : 여자가 아니다. 둘 중 하나라도 다르면 false

✔️평가 ✔️

OR은 첫번째 true를 발견하는 즉시 평가를 멈춘다.

레이디 가가는 여자이거나 OR, 한국인이거나, 군인이거나... = 여자라는 조건이 일치하므로 true를 반환하고 종료

AND은 첫번째 false를 발견하는 즉시 평가를 멈춘다.

레이디 가가는 여자이고 AND, 미국인이며 군인인 동시에 가수이다. = 첫번째 거짓값인 군인에서 종료.

//이름이 Jenny이거나 성인이면 통과

const name = 'David';
const age = 28;

if (name === 'Jenny' || age > 19) {
    console.log('통과');
}
//통과

//이름이 Jenny이고 성인이면 통과

const name = 'David';
const age = 28;

if (name === 'Jenny' && age > 19) {
    console.log('통과');
} else {
    console.log('돌아가세요');
}
//돌아가세요.

const name = 'Jenny';
const age = 22;

if (name === 'Jenny' && age > 19) {
    console.log('통과');
} else {
    console.log('돌아가세요');
}
//통과

//성인이 아닐시 돌아가도록 안내하기

const age = prompt('나이를 입력해주세요');
const isAdult = age > 19;

if (!isAdult) {
    console.log('접속하실 수 없습니다. 돌아가주십시오.');
}

console.log();

논리연산자에는 우선순위가 존재한다.

//남자이고, 이름이 Mike 이거나 성인이면 통과

const gender = 'F';
const name = 'Jane';
const isAdult = true;

//if (gender === 'M' && name === 'Mike' || isAdult)
if ((gender === 'M' && name === 'Mike') || isAdult) {
    console.log('통과');
} else {
    console.log('돌아가세요');
}

//통과. 통과한 이유? 남자도 아니고 이름이 Mike도 아닌데? AND가 OR 보다 우선순위가 높아 먼저 평가되기 때문이다.
//의도한대로 결과값을 보기 위해선

if (gender === 'M' && (name === 'Mike' || isAdult)) {
    console.log('통과');
} else {
    console.log('돌아가세요');
}

//돌아가세요. 이렇게 괄호를 활용하여야 한다.


const gender = 'M';
const name = 'Jane';
const isAdult = true;

if (gender === 'M' && (name === 'Mike' || isAdult)) {
    console.log('통과');
} else {
    console.log('돌아가세요');
}

//통과

반복문

for문

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

let i = 0; = 초기 값

i < 10; = 조건, false가 되면 멈춘다.

i++ = 코드 실행 후 작업

for (let i = 3; i < 10; i++) {
   console.log(i)
}

/* i 라는 변수의 값은 3으로 설정
i가 10보다 작을 때까지 반복문을 실행하고 코드가 한번 실행 되고 난 후 i++를 작업.
i값이 코드 실행 후 1씩 늘어나는 것이다.

1. let i = 3; 이 초기 값으로 최초 실행
2. i = 3이고, 10보다 작으므로 true
3. console 창에 3이라는 값을 입력해 보여준다.
4. i++ 코드를 만나 1만큼 증가되어 4가 된다.
5. i = 4이고, 10보다 작으므로 true
6. console 창에 4이라는 값을 입력해 보여준다.
7. i++ 코드를 만나 1만큼 증가되어 5가 된다.
....
종료지점, i가 10이 되면 10보다 작은 숫자가 아니므로 false. 코드가 종료된다.
*/

while문

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

let i = 0;

while(i < 10){
    console.log(i)
    i++;
}

/* 최초의 i = 0 이다.
i는 10보다 작다는 조건문을 충족하므로 {}안에 있는 코드를 실행시킨다. 
무한루프에 빠지지 않으려면 i++로 증가시켜주어야 한다. */

do while문

let i = 0;

do{
    //코드
    i++;
}
while(i < 10)

do while과 while의 차이점

do while은 적어도 한번은 실행 한 후 조건을 체크한다. while은 조건문을 충족하지 않으면 처음부터 실행하지 않는다.

반복문을 빠져나오는 코딩

break : 즉지 멈춘 후 빠져나온다.

while(true){
    let answer = confirm("계속할까요?")
    if(!answer){
        break;
    }
}

continue : 코드 실행을 멈추고 다음 반복으로 진행한다.

for(let i =0; i < 10; i++){
    if(i%2){
        continue;
    }
    console.log(i)
}
/* 최초의 i = 0이다, i가 10보다 작을 때까지 반복되고, i는 코드가 한번 실행된 후  1씩 증가한다.
0을 2로 나누면 나머지가 0이기 때문에 continue를 만나지 못하고 console을 실행해준다.
1이 증가 된 후 1을 2로 나누면 나머지가 1이기 때문에 continue문을 만나 
console을 실행하지 않고 넘어간다. 짝수만 남게 되는 코드
*/

✔️평가 ✔️

코드를 작성하는 작성자마다 차이는 있지만 명확한 횟수가 나와 있다면 for문을 아니라면 while을 사용하는데 do while은 잘 사용하지 않는다고 한다. 개발자는 쉽게 일하고 코드를 줄이려고 노력해야 한다. 반복문은 필수로 익힐것!

switch문

사실 if~else 문을 알고 있다면 모르고 있어도 괜찮은 코드이다. 모든 switch문은 if~else문으로 작성이 가능하다.케이스가 다양할 경우 보다 간결하게 작성 할 수 있다는 장점이 있다.

switch(평가){
case A : //A일때 코드 
case B : //B일때 코드
... }

if(평가 == A){
//A일때 코드
} else if (평가 == B){
//B일때 코드
}

siwtch 괄호 안의 값과 동일한 케이스 값을 찾아 코드를 실행한다. break 문을 만나면 코드를 빠져나간다.

//사고 싶은 과일을 물어보고 가격 알려주기

let fruit = prompt("무슨 과일을 사고 싶나요?");

switch(fruit){
    case "사과" : console.log("100원입니다.");
    case "바나나" : console.log("200원입니다.");
    case "키위" : console.log("300원입니다.");
    case "멜론" : console.log("400원입니다.");
    case "수박" : console.log("500원입니다.");
    case "복숭아" : console.log("600원입니다.");
    case "키위" : console.log("700원입니다.");
    case "망고" : console.log("800원입니다.");
    case "포도" : console.log("900원입니다.");

복숭아 값만 결과로 보이지 않고 다른값도 보인이유?

복숭아를 입력받아 switch의 조건문이 복숭아에서 true가 되어 그 이후의 값들이 모두 호출된것이다. 이를해결하기 위해서 break를 작성해주어야 한다.

//사고 싶은 과일을 물어보고 가격 알려주기

let fruit = prompt("무슨 과일을 사고 싶나요?");

switch(fruit){
    case "사과" : console.log("100원입니다.");
    break;
    case "바나나" : console.log("200원입니다.");
    break;
    case "키위" : console.log("300원입니다.");
    break;
    case "멜론" : console.log("400원입니다.");
    break;
    case "수박" : console.log("500원입니다.");
    break;
    case "복숭아" : console.log("600원입니다.");
    break;
    case "키위" : console.log("700원입니다.");
    break;
    case "망고" : console.log("800원입니다.");
    break;
    case "포도" : console.log("900원입니다.");
    break;
}

하지만 사용자가 미리 코딩해 두지 않은 과일을 적는다면 아무런 결과 값도 도출하지 않는다. (에러 메세지도 없다.)

이를 위해 if 문에서 사용 했던 else와 같은 역할을 해줄 코드가 있다. 바로 default 이다.

//사고 싶은 과일을 물어보고 가격 알려주기

let fruit = prompt("무슨 과일을 사고 싶나요?");

switch(fruit){
    case "사과" : console.log("100원입니다.");
    break;
    case "바나나" : console.log("200원입니다.");
    break;
    case "키위" : console.log("300원입니다.");
    break;
    case "멜론" : console.log("400원입니다.");
    break;
    case "수박" : console.log("500원입니다.");
    break;
    case "복숭아" : console.log("600원입니다.");
    break;
    case "키위" : console.log("700원입니다.");
    break;
    case "망고" : console.log("800원입니다.");
    break;
    case "포도" : console.log("900원입니다.");
    break;

    default : console.log("판매하지 않는 과일입니다.");
}

추가 팁! 동일한 값일 경우 이어서 작성도 가능하다.

//사고 싶은 과일을 물어보고 가격 알려주기

let fruit = prompt("무슨 과일을 사고 싶나요?");

switch(fruit){
    case "바나나" : console.log("200원입니다.");
    break;
    case "키위" : console.log("300원입니다.");
    break;
    case "멜론" : console.log("400원입니다.");
    break;
    case "수박" : 
    case "자몽" : 
    console.log("500원입니다.");
    break;


    default : console.log("판매하지 않는 과일입니다.");
}

함수(Function)

서비스를 만들다보면 같거나 비슷한 동작들이 생기기 마련이다. 이러한 동작들을 자주 사용하거나 여러곳에서 사용하게 되면 하나로 만든 다음 재활용 하는 것이 좋다. 중복되는 코드도 줄어들고 유지보수도 편해지기 때문이다. 함수는 이것을 가능하게 해준다.

function sayHello(name){
    console.log(`Hello, ${name}`)
}

/* function = 함수
sayHello = 함수명, 사용자의 편의대로 변경이 가능
(name) = 매개변수,  인수. 존재 할 수도 있고 존재하지 않을 수도 있다. 하나 이상일 수도 있다. 
여러개일 경우 쉼표로 구분 가능
{ } = 중괄호 내부에 있는 함수의 실행코드를 작성해준다.
*/

sayHello("Mike");

//매개 변수가 없는 함수, 에러 메세지를 보여주도록 만들어보자.

function showError(){
    alert("에러가 발생했습니다. 다시 시도해주세요.");
}

showError();

함수의 장점 : 유지보수가 쉽다. 만약 기획자가 "다시 시도해주세요." 라는 문구 변경을 원한다면 여러군데에서 사용하고 있어도 함수로 선언해주 코드만 변경 해주면 빠르게 수정이 가능하다.

//매개 변수가 있는 함수

function sayHello(name){
    const msg = `Hello, ${name}`;
    console.log(msg);
}
sayHello("Jenny");
sayHello("Tomy");
sayHello("Anna");


//결과 값 : Hello, Jenny
//Hello, Tomy
//Hello, Anna

함수를 만드는 목적은 중복을 줄여주는것이다. 함수를 한번 만들어두면 매개변수를 바꿔가며 다양하게 대응이 가능하다.

//매개 변수가 있는 함수

function sayHello(name){
    let msg = `Hello`;
    if(name){
        msg = `Hello, ${name}`;
    }
    console.log(msg);
}
sayHello(); // Hello

매개변수에 값을 넣어주지 않았을 때 Hello만 출력이 되는데 매개변수가 없을때 name은 어떤 값을 가지고 있을까?

//매개 변수가 있는 함수

function sayHello(name){
    console.log(name); // undefined
    let msg = `Hello`;
    if(name){
        msg = `Hello, ${name}`;
    }
    console.log(msg);
}
sayHello();

console.log(name); 을 통해 name의 값이 undefined인것을 확인했다.

function sayHello(name){
    let msg = "Hello";
    if(name){
        msg += ", " + name;
        //동일한 결과가 나오는 코딩 : msg += `, ${name}`
    }
    console.log(msg);
}
sayHello("Yoony");
//Hello, Yoony

함수 안에서만 사용하는 변수를 지역변수라고 하는데 위의 코드에서 msg가 지역변수이다. 지역변수를 전역변수로 사용하고 싶다면 함수 안에서 선언한 변수를 함수 바깥으로 빼주어야 한다.

지역변수와 전역변수

//지역변수 전역변수
let msg= "Hello"; //전역변수(global varable)
console.log("함수 호출 전");
console.log(msg);

function sayHello(name){
    let msg = "Hello";
    if(name){
        msg += `, ${name}`;
    }
    console.log("함수 내부");
    //지역변수(local varable)
    console.log(msg);
}
sayHello("Yoony");

console.log("함수 호출 후");
console.log(msg);

let msg= "welcome";

function sayHello(name){
    let msg = "Hello"
    console.log(msg + " " + name);
}

console.log("Jane"); // Jane

'코린이 개념잡기 > JavaScript' 카테고리의 다른 글

예약어 (0)	2024.01.19
데이터의 종류(자료형) (0)	2024.01.19
자바스크립트 4 객체의 메소드와 속성 (0)	2023.03.23
자바스크립트 3 함수와 메소드(method) (0)	2023.03.22
자바스크립트 2 변수 (0)	2023.03.20

FE가 되고싶니? 나도✨