자바스크립트 기초 1

oasis·2023년 2월 20일
JavaScriptfrontend
1

JavaScript

목록 보기
1/6
post-thumbnail

변수

alert() //경고 띄우는 함수

console.log() // 로그 찍는 함수

변수를 선언하는 방법: let과 const

변수 선언시 변하지 않는 값은 const, 변할 수 있는 값은 let으로 선언

let name = "Mike";
let age = 30;
  • 위와 같은 방법으로 변수에 let을 선언하면, 나중에 같은 이름의 변수를 선언했을 때 에러를 통해 알 수 있게 됨
    • 에러를 발생시키고 싶지 않다면 의도적으로 let을 빼고 변수를 선언하면 됨
const
  • 절대 변하지 않는 상수: 수정 불가

    • pi, 최댓값, 생일 등 바뀌지 않는 값 입력

    • 대문자로 선언

      💡 tip : 일단 const로 선언하고 변수를 바꿀 필요가 생기면 let으로 바꿔주면 됨

변수 규칙

  1. 변수는 문자와 숫자, $와 _만 사용
  2. 첫글자는 숫자 x
  3. 예약어 사용할 수 없음
  4. 상수는 대문자
  5. 변수명은 읽기 쉽고 이해할 수 있게

자료형

문자열

const mike = "Mike";
const mike = 'Mike';
const mike = `Mike`;
const name = "Mike";

const message = "I'm a boy.";
const message1 = 'I\'m a boy.'; // 문자열 내 따옴표 사용시 백슬래시

const message2 = `My name is ${name}`; //백틱 써줘야 포매팅 가능함
console.log(message2)

const message4 = `나는 ${30+1}살 입니다.`;
console.log(message4)

숫자형

const x = 1/0;
console.log(x) //Infinity

const name = "Mike";
const y = name / 2;
console.log(y) // NaN : Not a Number
  • 사칙연산은 알고 있는 것과 동일
  • 문자열을 나누었을 때 Nan에 항상 유의할것

null과 undefined

  • null : 존재하지 않는 값
  • undefined : 값이 할당되지 않음

typeof연산자

const name = "Mike";

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"
  • 다른 개발자가 작성한 변수의 타입이나
  • api통신등을 통해 받아온 데이터를 타입에 따라 다른 형식으로 처리해야할 때 씀
  • null ≠ 객체 ( 자바스크립트 초기의 오류 - 호환성 위해 수정하지 않음)

자료형 더하기

const a = "나는 ";
const age = 30; // number
console.log(a+ age + "살");
  • 숫자형과 문자열을 합치면 숫자도 문자열이 된다는 것에 주의

대화상자

alert : 알려줌

prompt : 입력 받음(취소시 null 반환)

confirm : 확인 받음(확인, 취소) → True, False 반환

const name = prompt("이름을 입력하세요.", "홍길동"); // prompt(문구, default)

alert("환영합니다. " + name + "님");
alert(`환영합니다. ${name}님. 자바스크립트입니다.`); // 백틱이용
const isAdult = confirm("당신은 성인입니까?"); // 확인과 취소 버튼 나옴

console.log(isAdult) // 확인 -> True, 취소 -> False
  • 결제하시겠습니까? 또는 정말 삭제하시겠습니까? 등에 활용

단점

  1. 창이 떠있는 동안 스크립트 일시 정지(확인버튼으로 꺼줘야함)
  2. 위치와 모양 정할 수 없음 - 스타일링 X

형변환

String() : 문자형으로 변환

Number() : 숫자형으로 변환

Boolean() : 불린형으로 변환

형변환이 필요한 이유

  • 연산시 자료형이 다르면 의도치 않은 결과가 나타날 수 있음
const mathScore = prompt("수학 점수를 입력하세요"); // 80
const engScore = prompt("영어 점수를 입력하세요");  // 90
const result = (mathScore + engScore) / 2;

console.log(result); // 4045
  • prompt 입력은 무조건 문자형이므로 이러한 결과가 나타난다.
  • “8090” / 2 이 동작해서 4045가 나타나는 것
  • “6” / “2” : 자동 형변환 → 원인을 찾기 힘들어짐 ⇒ 명시적 형변환이 필요함

String()

console.log(
Stirng(3),
String(null),
String(undefined)
);

//"3" "null" "undefined"

Number()

console.log(
  Number("ff"), // Nan
  Number(true), // 1
  Number(false),// 0
  Number("22"), // 22
	Number(null), // 0
	Number(undefined) // NaN
);

Boolean()

  • 숫자 0

  • 빈문자열 ‘’

  • null

  • undefined

  • NaN

    ⇒ 이외에는 모두 true

연산자

증가연산자, 감소연산자

let num = 10;

let result = num++; // 증가시키기 전의 값을 result에 넣음
console.log(result); // 10

let result1 = ++num; // 증가시키기 전의 값을 result에 넣음
console.log(result1); // 11

비교연산자, 조건문

비교연산자

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

console.log(a == b); // true
console.log(a === b); // 일치연산자, 타입까지 비교함 fasle

조건문

const age = 49;

if(age<19){
  console.log("안녕히 가세요.");
} else if(age===19) {
  console.log("수능 파이팅");
} else {
  console.log("환영합니다.");
};
console.log("=====================")

논리연산자

|| : or

&& : and

! : not

  • or 은 첫번째 true를 발견하는 즉시 평가를 멈춘다.
  • and 는 첫번째 false를 발견하는 즉시 평가를 멈춘다. → 조건의 순서를 조절해서 더 많이 거를수 있는 조건을 먼저 두는게 좋음
// 이름이 TOM이거나 성인이면 통과

const name = "Mike";
const age = 23;

if(name==="Tom" && age > 19){
  console.log('통과');
} else{
  console.log('돌아가!');
}
// 나이를 입력받아 성인이 아니면 돌아가라고하기

const age = prompt("나이 입력");
const isAge = age > 19;

if (!isAge) {
  console.log("돌아가!")
}
// 우선순위
// 남자이고, 이름이 mike이거나 성인이면 통과

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

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

//의도한대로 만들려면
if(gender==='M' && (name ==='Mike' || isAdult)){
 console.log('통과');
} else{
  console.log('돌아가');
} // 돌아가
  • and가 or 보다 우선순위가 높아서 먼저 평가된다.
  • 성인이면 무조건 true이기 때문에 통과함

반복문 loop

동일한 작업을 여러번 반복

let i = 0;
while(i<10){
  console.log(i);
  i++;
}
  • break : 만나는 즉시 멈추고 반복문 빠져나옴
  • continue : 멈추고 다음 반복으로 진행
for(let i=0; i<10; i++){
  if(i%2){
    continue;
  }
  console.log(i);
}
// 0 2 4 6 8
  • 반복횟수가 정해져있으면for, 아니면 while사용

switch

case가 다양한 경우 간결하게 사용이 가능함

함수

// 이름을 모르는 경우 함수

function sayHi(name){
	let msg = 'Hello';
	if(name){
		msg += ", " + name;
	}
	console.log(msg)
}

let name = '융도';
sayHi();
sayHi(name);
  • 함수 내에서 선언한 지역변수 msg는 함수 안에서만 사용할 수 있음

전역변수와 지역변수

// 전역변수와 지역변수

let msg = "welcome";

function sayHi(name){
	let msg = "Hello" // let으로 지역변수 선언 가능
	console.log(msg+ ' ' + name);
}

sayHi('mike') // Hello mike
console.log(msg) // welcome -> 전역변수
// 전역변수와 지역변수

let name = "Mike";

function sayHi(name){
	console.log(name);
}

sayHi(); // undefined
sayHi("Jane");
  • 매개변수로 받은 값은 복사된 후 함수의 지역변수가 된다.
  • 전체 서비스 공통 변수를 제외하고는 지역변수를 쓰는 습관이 좋다.
function sayHello(name){
	let newName = name || 'friend';
	let msg = `Hello, ${newName}`
	console.log(msg)
}

sayHello();
sayHello('Jane');
//default

function sayHello(name = 'friend') {
	let msg = `hello, ${name}`;
	console.log(msg)
}
// return

function add(a, b) {
	return a + b;
}

let result = add(3,45)
console.log(result);
  • 리턴문이 없거나 return만 있으면 undefined 반환

함수

  1. 한번에 한작업만 집중한다.
  2. 읽기 쉽고 어떤 동작인지 알 수 있게 네이밍 - 동사 위주
profile
oasis
다음 포스트

자바스크립트 callback

0개의 댓글