[JavaScript] JS 기초

📌 변수명 기본 규칙 

• 변수 이름으로는 문자/숫자/_/$ 만 사용 가능 
• 첫 글자는 숫자 불가
• 예약어 사용 불가 
• 의미를 내포 하는 변수 이름이 좋음 
  • 앞 단어가 명사 -> 변수
  • 앞 단어가 be동사 -> boolean
  • 앞 단어가 동사 -> 함수
• 상수, 고정값은 전체 대문자로 선언

 

📌 데이터 타입

: string, number, boolean, undefined, null, object, array 등 

 

✅ typeof : 해당 자료(변수, 데이터 등)의 데이터 타입을 반환해줌 

• 주의, object안의 자료와 null는 object라고 뜸

console.log(typeof null);
console.log(typeof "hi");
console.log(typeof 77);
// {} 빈 object 선언
console.log(typeof {});

console 확인

✅ 형 변환

prompt : 입력 받는 함수, string으로 저장 됨

문자로 변환 -> String();

숫자로 변환 -> Number();

let mathScore = prompt("수학점수를 입력해 주세요.");
let engScore = prompt("영어점수를 입력해 주세요.");
mathScore = Number(mathScore);
engScore = Number(engScore);
let avgScore = (mathScore + engScore) / 2;
console.log(avgScore);

console.log(Number("abcdefg"));
// NaN(Not a Number) 반환

console.log(Boolean("hi"));
// true 반환 
// 아스키코드로 변환하면 1이상의 특정 숫자를 가지는 것이기 때문에 true 반환

 

📌 백틱(``) 문자

for(let i = 0; i < nameArr.length; i++) {
    console.log(`${i+1} 번째 이름은 ${nameArr[i]} 입니다`);
}

• 문자와 변수 혼용하여 출력 가능 
• `` 안에 다양한 변수 불러 올 수 있음 (array, object ..)
• 단, `` 안에 들어가면 전부 string 처리 됨

 

📌 연산자 

✅ 기본 연산자

// 제곱근
let a = 8 ** 2;
console.log(a);
let num = Math.sqrt(64);
console.log(num);

let result1, result2;
let num = 10, num2 = 10;

result = num++;
console.log(result); // result = 10

result2 = ++num2;
console.log(result2); // result = 11

result 같은 경우 num에 ++하기 전에 result에 num 대입

result2는 ++한 num을 result2에 대입

 

✅ 비교 연산자

let a = 1;
let b = "1";
// 비교 연산자
console.log(a == b); //true
// 일치 연산자
console.log(a === b); //false

비교 연산자(==)는 JS 특성 때문에 자동 형변환이 일어나서 true값이 나오는 것 

일치 연산자(===)는 변수의 값 뿐만 아니라 자료형 까지도 비교

=== 사용하는 것 추천

 

✅ 논리 연산자

// 여성이고, 이름이 Jane 이거나 성인이면 통과
let gender = "M";
let myName = "Tom";
let isAdult = true;
if (gender === "F" && (myName === "Jane" || isAdult === true)) {
  console.log("통과");
} else {
  console.log("돌아가");
}

결과 : 돌아가 반환 

연산을 입력 순서대로 비교하기 때문에 괄호 잘 써주거나 순서 주의하기 

 

📌 반복문

✅ do.. while 문

코드가 최소 1번은 실행됨

// do - while 문
let i = 1;
do {
  console.log(`do-while 문에서 ${i} 번째 반복문을 시작합니다!`);
} while (i < 0);

// while 문
i = 1;
while (i < 0) {
  console.log(`while 문에서 ${i} 번째 반복문을 시작합니다!`);
}

 

📌 함수

✅ 함수 선언문

함수들 미리 다 읽어서 언제 어디서든 호출하여 쓸 수 있음

function sayHello(){
  console.log('Hello');
}

 

✅ 함수 표현식

함수 표현식이 먼저 나와야 호출이 가능

let sayHello = function(){
  console.log('Hello');
}

 

✅ 화살표 함수(arrow function)

let add =function(num1,num2){
  return num1+num2;
}
// 화살표 함수로 변경
let add = (num1,num2)=> {return num1+num2};

 

✔️ 함수 선언문 vs 함수 표현식 vs 화살표 함수 

// 함수 선언문
function sayHello() {
  console.log("Hello");
}
// 함수 표현식
let sayHello = function () {
  console.log("Hello");
};
// 화살표 함수
let sayHello = () => {console.log("Hello")}

 

📌 배열 

: 순서가 있는 list

• length: 배열의 길이 
• push(): 배열 끝에 추가 
• pop(): 배열 끝 요소 제거
• shift(): 배열 앞 요소 제거 
• unshift(): 배열 앞 요소 추가

 

📌 메소드 체이닝

let hello = "Hello";
// .split : 문자를 인수 기준으로 쪼개서 배열로 반환
let helloArr = hello.split("");
console.log(helloArr);

// .reverse : 배열의 순서를 뒤집어서 반환
let reverseArr = helloArr.reverse();
console.log(reverseArr);

// .join : 배열을 인수 기준으로 병합해서 반환 (<-> .split)
let joinStr = reverseArr.join("");
console.log(joinStr);

 

✅ 메소드 체이닝

여러 함수(method)를 연결하여 사용 

let hello = "Hello";
let result = hello.split("").reverse().join("");
console.log(result);

주의, return 값이 있어야만 가능