2. JS 기초(기초 문법)

변수와 상수

let, const

let a = 4; //변수
const b = 3; //상수

 

 

입력

prompt, interface

//브라우저 환경에서의 입력
let s1= prompt("입력 문구"); //브라우저 환경 입력



//node.js 환경 입력
const readline = require('readline');
const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout
});

let count = 0;

rl.on('line', (line) => {
  count++;
  
  if (count === 3) {
    rl.close();
  }
});

 

 

출력

console.log

console.log(count); //출력

 

 

특수값

null, undefined, true, false

//특수 값
null  // 개발자가 의도적으로 비어 있는 상태로 설정하는 것
undefined // 선언은 했지만 값이 할당되지 않은 경우 (초기화x)
true //참
false //거짓

 

형변환

parseInt, 문자열 자동 형변환

//js에서는 숫자와의 산술연산, 비교연산을 하면 자동으로 문자열을 정수형으로 변환
//단, +는 문자열 연결이 우선순위가 높기에 + 제외
let result = "401123" / 2;

typeof(10); //타입 반환 함수
parseInt("2"); //정수 변환
parseFloat("2.2"); //실수 변환

 

 

문자열

`${}`, str.length , str[i], str.slice, str.split,  str1 + str2

//문자열
const intro = "안녕하세요";
const str = `문자열 포맷팅 ${count}`;

intro.length //문자열 길이
intro[2]; //문자열 인덱스 접근
let lst = intro.split(',') //토큰 기준으로 문자열 쪼개기
intro.slice(1,5); //문자열 슬라이스
intro + str //문자열 연결

 

 

객체

//객체외 배열
let obj1 = { //객체
  'key' : 'value'
}

 

 

배열

arr.length, arr[i], arr.indexOf("3"), arr.includes, arr.slice, arr.join, arr.push, arr.pop, arr.unshift, arr.shift

//배열
let arr1  = ['a', 'b', 3]; 
const [ar1, ar2, ...ar3] = arr1; //배열 - 각 요소 별 이름 붙이기
//...ar3은 배열을 받는 인자

arr1.length //배열 길이
arr1[2] //배열 접근
arr1.indexOf(3) //배열 값 찾기 (없으면 -1)
arr1.includes(3) //배열 값 포함 확인 (true,false)
arr1.slice(1,3) //배열 슬라이싱
arr1.join(",") //토큰을 기준으로 문자열 형성
arr1.push(3) //배열 마지막 값 삽입
arr1.pop() //배열 마지막 요소 꺼내기
arr1.unshift(3) //배열 첫 부분 값 삽입
arr1.shift() //배열 처음 요소 제거

arr1.concat() //배열을 합쳐서 사용

//아래는 인자로 함수를 전달함
arr1.forEach() //배열의 요소를 반복하면서 작업 진행
arr1.map((v) => v*10) //배열의 요소들을 모두 순회하여 return 값을 모다 새로운 배열을 만듬
arr1.filter() //배열의 요소를 반복하면서 true인 요소들만 모아 새로운 배열 생성
arr1.reduce() //배열의 요소를 순회하여 누적된 결과를 만듬

 

 

함수

//함수
function min(a,b){
    return a < b ? a : b;
}

console.log(min(3,5));

 

//함수도 하나의 데이터 타입!! return 부분에도 사용 가능
const f2 = (a,b) => a < b ? a : b //단일 리턴값 하나 인경우 ()
const f3 = (a,b) => {  // 코드 여러줄을 넣고 싶다면 {}
    if(a<b){
        return a;
    } else {
        return b;
    }
}
console.log(f2(3,5));

//클로저 함수
//부모 함수의 환경을 기억하여, 부모 함수 실행이 끝난 뒤에도 원래 있던 환경에 접근할 수 있도록 하는 함수
//주로 상태를 기억해야하는 상황에서 자주 사용
function getConfig() {
    let count = 0;
  
    return () => {
      count++;
      console.log(`버튼이 ${count}번 클릭되었습니다.`);
    };
} // 이러면 buttonClickCounter

const config = getConfig();
console.log(config());

 

예외처리

try-catch

//예외처리
try{
  const error = new Error("Something went wrong");
  console(error.message)

} catch(err){


} finally{

}