[JS 문법 1주차] 자바 기초 문법

1. 변수, 상수

// 변수, 상수
// 주석(comment) --> JS엔진이라고 부르는 js를 구동하는 프로그램이 해석하지 않음
// 터미널 사용하다가 이전에 썼던 명령어 깨끗하게 지우고 싶을 때: clear

// 변수 매커니즘: 값을 메모리에 저장한다. 메모리에 저장했던 값을 읽어들여서 재사용한다.

// [변수의 5가지 주요 개념]

// 변수 이름 : 저장된 값의 고유 이름
// 변수 값: 변수에 저장된 값
// 변수 할당: 변수에 값을 저장하는 행위
// 변수 선언: 변수를 사용하기 위해 컴퓨터에 알리는 행위
// 변수 참조: 변수에 할당된 값을 읽어오는 것

// 변수를 선언할 수 있는 3가지 방법: var, let, const

// 1. var
var myVar = "var";
console.log(myVar);

// 변수 선언 후 할당 나중에 하기
var myVar;
myVar = 3;
console.log(myVar);
// var는 똑같은 이름으로 선언 가능


// 2. let
let myLet = "let";
console.log(myLet);

myLet = 'test';
console.log(myLet);

// let myLet = 3;
// console.log(myLet);
// 재정의 불가능


// 3. const
const myConst = "const";
console.log(myConst);

myConst = "test2";
console.log(myConst);

// const myConst = 3;
// console.log(myConst);
//재정의 불가능

var는 같은 변수 이름으로 재정의 가능, let과 const는 불가능.(빨간 줄 - 오류)

 

var과 let은 값을 재할당할 수 있지만, const는 값을 재할당할 수 없음.

 

정리: var, let, const는 변수를 정의할 때 쓰는 키워드이고,

+ var는 재정의, 재할당 가능

+ let은 재정의 불가능, 재할당 가능

+ const는 재정의, 재할당 불가능

 

 

2. 데이터 타입

// 데이터 타입
// runtime:  코드 실행될 때 변수 타입 결정
// 코드 작성할 때가 아닌, 실제 코드가 실행될 때 데이터 타입 결정됨(터미널에서 코드 실행 시)

function resultNtype(variable) {
  console.log(variable, typeof variable);
}

// 1. 숫자
// 정수(int), 실수(float), 지수(Exp), Nan(Not a number), infinity(양의 무한/ 음의 무한)
let num = 10;
resultNtype(num);

num = 3.14;
resultNtype(num);

num = 2.5e5;
resultNtype(num);

num = "hi" / 2;
resultNtype(num);

num = 1 / 0;
resultNtype(num);

num = -1 / 0;
resultNtype(num);

// 2. 문자 : string(문자열// 문자의 나열)
//  ' ' = " "

let str = "hi";
resultNtype(str);

// 문자열 길이 확인하기
// length
console.log(str.length);

//문자열 결합하기
// concat
let str1 = "hello";
let str2 = "I'm jiwon";

console.log(str1.concat(str2));

// 문자열 자르기
// substr: 자르고 싶은 문자의 첫번째 위치, 그리고 그 위치에서 얼만큼 잘라내고 싶은지의 값을 인수로 받음
// slice: 자르고 싶은 문자의 첫번째 위치, 그리고 마지막 위치를 인수로 받음
console.log(str2.substr(4, 5)); //jiwon
console.log(str2.slice(4, 9)); //jiwon

// 문자열 검색
// search: 해당 단어가 시작되는 위치를 출력함
console.log(str2.search("jiwon")); //4

// 문자열 대체
// replace: 바꿔질 단어, 바꿀 단어를 인수로 받음
console.log(str2.replace("jiwon", "heartsping")) //I'm heartsping


// 문자열 분할
// split: 무엇으로 자를지를 인수로 받음
// 합쳐져 있는 것이 배열 형태로 분할되어 나옴.
let fruits = "apple, banana, kiwi"
let animal = "eela tigera lion"
let name ="nana baba gaga"
console.log(fruits.split(",")) //[ 'apple', ' banana', ' kiwi' ]
console.log(animal.split("a")) //[ 'eel', ' tiger', ' lion' ]
console.log(name.split(" ")); //[ 'nana', 'baba', 'gaga' ]

//3. 불리언(Boolean)
// true, false

let bool = 'true'; //문자열
let bool1 = true; // 참
let bool2 = false; // 참

resultNtype(bool1) //true boolean
resultNtype(bool2)// false boolean

// undefined
let x;
console.log(x); //undefined 값이 할당되지 않음

//null: 값이 존재하지 않음을 '명시적'으로 나타내는 방법
// undefined는 정의되지 않은 값을 말하고, null은 개발자가 의도해서 값이 없음을 나타내기 위해 사용.

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

//object(객체) : key-value pair
let person = {
  name: "jw",
  age: 20,
  isMarried: true,
};

console.log(person) //{ name: 'jw', age: 20, isMarried: true }

// array(배열): 여러개의 데이터를 순서대로 저장하는 데이터 타입(즉, 인덱스를 가지고 있음)
let number = [1, 2, 3, 4, 5]
let foods = ['rice', 'pizza', 'burger']

console.log(foods[1]) //pizza

 

 

2. 형변환

function resultNtype(variable) {
  console.log(variable, typeof variable);
}

// 형 변환
// 데이터 타입의 형태 --> 바꾼다
// 명시적 형 변환: 개발자가 의도적으로 바꾸는 것
// 암시적 형 변환: 자동적으로 바뀌는 것

// 1. 암시적 형 변환
// (1) + 연산자를 문자열과 사용할 때: 문자열과 다른 타입들이 합쳐지면서 새로운 문자열 생성됨(문자열 우선순위가 높음)

let result1 = 1 + "2";
resultNtype(result1); //12 string

result1 = "1" + true;
resultNtype(result1); //1true string

//{}, null, undefined + "문자열" = "문자열"

// (2) - , * 연산자 사용할 때: 숫자가 우선됨
let result2 = 1 - "2";
resultNtype(result2); //-1 number

result2 = 4 * "20";
resultNtype(result2); //80 number


// 2. 명시적 형 변환
console.log(Boolean(0)) //false
console.log(Boolean("")); //false
console.log(Boolean(null)); //false
console.log(Boolean(undefined)); //false
console.log(Boolean(NaN)); //false
console.log(".........................")
console.log(Boolean({})) //true
console.log(Boolean([])); //true
console.log(Boolean("false")); //true
console.log(String(0)); //0
console.log(String(false)); //false
console.log(Number("호랑이")); //NaN
console.log(Number("0")); //NaN

 

 

3. 연산자

// 연산자 (+, -, /, *, %)

// 1. 더하기 연산자
console.log(2 + 1); //3
console.log("2" + 1); //21

// 2. 빼기 연산자
console.log(2 - 1); //1
console.log("2" - 1); //1

// 3. 곱하기 연산자
console.log(2 * 1); //2
console.log("2" * 1); //2

// 4. 나누기 연산자
console.log(2 / 1); //2
console.log("2" / 1); //2

// 5. 나머지 연산자
console.log(2 % 1); //0
console.log("2" % 1); //0


console.log("---------------------------")
// 6. 할당 연산자 (assignment operator)
// 등호 연산자, 더하기 등호 연산자, 빼기 등호 연산자, 곱하기 등로 연산자, 나누기 등호 연산자, 나머지 등호 연산자, 
// exponentiation assignment, bitwise XOR assignment, and assignment, or assignment

let x = 10;
console.log(x); //10

x += 10;
console.log(x); //20

x -= 5
console.log(x) //15

x *= 3
console.log(x) //45

x /= 5
console.log(x) //9

x %= 5
console.log(x) //4

x **= 2
console.log(x) //16

x ^= 2
console.log(x) //10000, 00010 -> 10010 =>18

let y = 3;

x &= y
console.log(x) //10010, 00011 -> 00010 => 2

x |= y;
console.log(x); //00010, 00011 -> 00011 => 3

// 7. 비교 연산자
// 일치연산자(===) : 값, 타입까지 일치해야 true 출력하는 연산자
console.log(2 === 2) //true
console.log(2 === "2") //false

// 불일치 연산자(!==) : 타입까지 일치해야 false 출력하는 연산자
console.log(2 !== 2);  //false
console.log(2 !== "2"); //true

// 작다 연산자, 작거나 같다 연산자, 크다 연산자, 크거나 같다 연산자
console.log(2 < 2);  //false
console.log(2 >= "2"); //true

// ==: 값은 같지만, 타입이 꼭 일치할 필요 없는 연산자
console.log(2 == 2); // true
console.log(2 == "2"); //true


// 8. 논리 연산자 

// 논리곱 연산자: 모두 true일때 true 반환
console.log(true && true) //true
console.log(true && false); //false
console.log(false && false); //false

// 논리합 연산자: 두 값 중 하나라도 true일때 true 반환
console.log(true || true) //true
console.log(true || false); //true
console.log(false || false); //false

// 논리 부정 연산자(!) : 값을 반대로 씀
// 논리곱 연산자: 모두 true일때 true 반환
console.log(!true) //false
console.log(!false); //true

// 9. 상황 연산자(중요!)
// 조건에 따라 값을 선택한다

let result5 = 20;
let result6 = result5 > 5 ? "크다" : "작다";// 크다 //삼항 연산자

console.log(result6)


console.log(result5 > 10 ? "크다" : "작다") //크다

// 9. 타입 연산자
// typeof
console.log(typeof result5) //number

 

4. 함수, 스코프, 전역/지역 변수, 화살표 함수

// 함수 (function)
// input: 매개변수, output: 반환값

// 함수 만드는 방식

// 1. 함수 선언문
// function 함수이름 (매개변수) {
//   로직
// }
function minus(x, y) {
  return x - y;
}

// 2. 함수 표현식
let add = function (x, y) {
  return x + y;
};

// 함수 호출: 함수명();

console.log(minus(1, 2), add(3, 4)); //-1, 7
let result = add(10, 20); 
console.log(result); //30

//스코프, 전역변수, 지역변수
// 선언된 변수가 영향을 끼칠 수 있는 범위 -> 스코프
// 그 변수가 전체 영역에 영향을 끼친다? -> 전역변수
// 그 변수가 특정 함수 내 영역에 영향을 끼친다? -> 지역변수
let globalVar = "나 전역변수";

function callMe() {
  let localVar = "나 지역변수";
  console.log(globalVar, localVar);
}
console.log(globalVar);//나 전역변수
callMe();//나 전역변수 나 지역변수

// console.log(localVar);
// ReferenceError: localVar is not defined

//화살표함수: ES6 부터 만들어진 새로운 문법
// arrow function

let arrowFunc01 = (x, y) => {
  return x+y
}

let arrowFunc02 = (x, y) => x + y //반환값이 있다면 간편하게~, return 형식의 함수 아니면 중괄호 써주기


let arrowFunc03 = x => x; //변수 하나일때 간편하게~

console.log(arrowFunc01(1, 2), arrowFunc02(1, 2), arrowFunc03(1));

 

내일은 공휴일이니까 ㅎ.ㅎ 내일 나머지 강의 듣고 정리할 예정!