[JS] 자바 스크립트 기초 문법

변수

var num = 10 + 20;

키워드 식별자 연산자 표현식 세미콜론 순서

키워드

자바 스크립트 프로그래밍 언에서 어떤 역할이나 기능이 정해진 특별한 단어

다른 용어로 예약어 라고도 함

식별자

자바 스크립트 내부에서 변수,함수 등에 부여되는 이름

변수는 컴퓨터의 메모리에 저장되는데, 메모리 자체는 추상적이기 때문에 사람이 이해하고 사용하기 쉽게 메모리 내 특정 공간을 식별할 수 있는 식별자를 사용해 나타냄

var, let,const 등의 키워드와 사용시에는 식별자보단 변수명이라고 함

연산자

어떠한 연산 작업을 하는데 사용하는 기호

표현식

10+20 부분, 하나의 값을 반환하는 식 또는 코드

값

더 이상 평가할 수 없는 데이터 의미

10+20 표현식으로 도출된 30은 더 이상 평가할 수 없기 때문에 값이 됨

세미콜론

자바 스크립트에서 하나의 문이 끝났음을 의미

선언,할당,초기화

변수 선언

var num;

변수 초기화

var num = 10 + 20;

---

let 키워드

변수를 선언하는 키워드에는 var 말고도 let이 있음(새로 추가 되었음)

let num = 10+20;

기존의 var 키워드로 선언한 변수명은 중복해서 사용 가능

ex)

var num = 10+20;
var num = 50;

위와 같이 변수명이 중복된다면 기존에 값을 덮어 버림
-> 이때 let 키워드는 변수명의 중복 선언을 막음

호이스팅이란 var 키워드로 변수를 선언하고 할당했을 때, 변수 선언을 js의 스코프 맨 위로 올려 실행하는 것

console.log(num);
var num = 10;

result
undefined

변수를 선언하고 할당하는 초기화 이전 num이라는 변수를 출력함
-> 오류가 아니라 undefined를 출력함

var num; // 선언이 최상위로 올라옴
console.log(num);
num = 10;

반면 let 키워드는 호이스팅이 일어나지 않음

또한 var 키워드와 let 키워드는 참조하는 스코프가 조금 다름

---

상수

const 키워드 사용
-> let 키워드와 다르게 const는 재할당이 안됨

let,var의 경우에는 재할당이 가능

let num = 10;
num = 30;
console.log(num);

const num = 10;
num = 30;
console.log(num); -> 오류 발생

const num;
num = 10; // 선언을 먼저하고 할당을 나중에 해도 오류

---

식별자 명명 규칙

식별자에 키워드 사용 불가, 공백 포함 불가

첫글자는 영문 소문자, _ , $ 기호만 사용 가능 -> 강제적

식별자는 영문으로 작성, 의미있는 단어로 작성 -> 관용적

카멜 표기법(변수명, 함수명), 언더스코어(상수명), 파스칼 표기법(생성자 함수명) 주로 사용

ex) firstName, FIRST_NAME, FirstName

---

자료형

기본 자료형 : string, number, boolean, undefined, null, symbol 자료 형

참조 자료형 : object

---

문자열

따음표는 짝을 맞춰서 사용

let string1 = "Hello, World!"
let string2 = 'Hello, World!'

문자열을 연결할때는 +로 연결

let string = '문자열은 큰 따음표(")나' + "작은 따음표(')로 감싸면 됩니다.";
console.log(string);

이스케이프 문자 예시

let string = '문자열은 큰 따옴표(")나 작은 따음표(\')로 감싸면 됩니다.';

\' : 작은 따옴표 , \" : 큰 따옴표, \n : 줄 바꿈, \t : 수평 탭, \\ 역슬래쉬

탬플릿 문자열이란 백틱(`)으로 문자열을 정의하는 방법
-> 큰따옴표 작은 따옴표 영향 안받음
-> 그냥 따옴표랑 다르게 엔터 시 줄바꿈 적용, 문자열에 변수 또는 식 대입 가능

let string = '문자열은 큰따옴표나
작은 따옴표로 감싸면 됩니다.';

let dan = 3;
let gugu = 8;
let string = `${dan} 곱하기 ${gugu}은 ${dan * gugu} 입니다.`;

---

숫자형

정수와 실수를 구분하지 않고, 전부 하나의 숫자 자료형으로 취급
-> 다만 자바스크립트는 실수를 부동 소수점 방식으로 표현하는데, 이 경우엔 실수 계산이 정확하지 않음

let sum = 0.1 + 0.2;
console.log(sum);

0.30000000000004

실수 계산시 값이 정확하지 않다는 점을 인식하자!

논리형 : 참, 거짓

let boolean1 = true;
let boolean2 = false;

let boolean3 = 10 < 20;
let boolean4 = 10 > 20;

변수 공간을 선언 후 데이터 할당안할시 자바 스크립트 내부적으로 변수와 상수 공간에 임시로 데이터 할당 -> undefined

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

변수나 상수를 선언하고 의도적으로 선언한 공간을 비워둘 때 null 할당

let empty = null;
console.log(empty); // null

---

객체

js의 거의 모든 데이터와 자료구조는 객체

객체 자료형에서 파생되는 자료형 -> 배열, 객체 리터럴, 함수

배열을 통해 복수의 데이터 정의, 인덱스 통해 접근

let studentScore = [80,70,60,50]; 
console.log(studentScore[1]);

배열에는 자바스크립트의 모든 자료형 정의 가능

객체 리터럴이란 객체를 정의할때 중괄호({ })를 사용하며, 중괄호 안에는 키-값으로 이러우진 속성들이 들어감

{
	key1:value1
    key2:value2
}

배열과 다르게 키로 구분한다는 것이 장점

let studentScore = [80,70,90,60];

let studentScore = {
	koreanScore:80,
    englishScore:70,
    mathScore:90,
    scienceScore:60
};

console.log(studentScore.koreanScore); //80
console.log(studentScore['englishScore']); //70

---

연산자

이항 산술 연산자
-> +, - , * , / , %(나머지) , **

단항 산술
-> ++, --

단항 부정
-> -

let num = 10;
let subNum1 = ++num;
let subNum2 = num++;

subNum1 -> 11, subNum2 -> 10

대입 연산자 (= )

복합 대입 연산자
-> +=, -=, *=, /=, %=, **=

비교 연산자
-> ==, ===(값과 자료형이 같은지), !=, !==(값과 자료형이 다른지), <, <=, >, >=

10 == '10' // true
10 === '10' // false

논리 연산자
-> &&, ||, !
-> 어떠한 피연산자든 모두 논리형으로 평가
-> "", undefined,0, null을 빼면 다 true

삼항 연산자
-> x?y:z

---

형변환

// 암시적 형변환
const result = 10 +"10";
console.log(result); // 1010

위 경우 js 내부적으로 숫자형 데이터를 문자형 데이터로 변환

let num = 10;
let strNum = "10";
if(num == strNum){ // 문자열을 숫자형으로 형 변환
	console.log('equals');
}

---

조건문

if(조건식){
	
} else if( 조건식2){ 

} else{

}

switch(key){
  case value1:
    //key가 value1일때 실행
  case value2:
    // key가 value2일때 실행
  	break;
  default:
    // 아무 것도 일치하지 않을때 실행 문
    break;
}

if문은 조건에 식 사용, switch문은 조건에 값 사용

let score = 90;
if(score >= 90 && score < 100){
	console.log("A++ 학점");
}

switch(score){
	case 90:
    (중략)
    case 98:
    case 99:
    	console.log("A++ 학점")
}

보통 범위를 이용한 조건일때는 if, 값이 하나일때는 switch

---

반복문 다루기

while(조건식){
	// 조건식이 참이면 실행
}

do{

} while(조건식);

for(초기값; 조건식; 증감식){
	// 블록문
}

let arr = ["banana", "apple", "orange"]
for(let i = 0; i < arr.length; i++){
	console.log(arr[i]);
}

for..in

for (가변수 in 배열/객체 리터럴){
	// 블록 문
}

왼쪽에는 배열 또는 객체 리터럴을 탐색해서 키를 저장할 임시 변수를 놓음

let obj = {name:"철수", age : "20"};
for(let key in obj){
    console.log(key + ": "+ obj[key]);
}

name : 철수
age : 20

let obj = [ "orange", "banana", "apple"];
for(let abc in obj){
    console.log(abc + ": " + obj[abc]);
}

0: orange
1: banana
2: apple

break,continue문 사용

---

코드 예시

1부터 100 합

var sum = 0;

for(var i = 1; i<=100; i++){
    sum += i;
}
console.log(sum);

숫자 1부터 999까지 짝수가 몇 개 인지 출력하는 코드

let count = 0;

for(let i = 1; i< 1000; i++){
    if(i%2 == 0){
        count++;
    }
}

console.log(`짝수의 갯수는 ${count}개 입니다`);

1단 부터 9단

for(let dan = 1; dan <= 9; dan++){
    for(let num = 1; num <=9; num++){
        console.log(`${dan} * ${num} = ${dan * num}`);
    }
}

100부터 999까지 정수 중에서 암스트롱 수에 해당하는 수 모두 출력
-> 각 자릿수를 세제곱한 수의 합과 자신의 수가 같은 경우

for(let num = 100; num <= 999; num++){
    if(parseInt(num/100) ** 3 + parseInt(num%100/10) ** 3 + (num%100%10) ** 3 == num)
        console.log(num);
}