TIL 240812 (자바스크립트 기초문법 다지기 1)

1. 변수와 상수

변수 : 값을 메모리에 저장하고, 저장된 값을 읽어들여서 재사용하는것

변수의 5가지 주요 개념이 있는데 내가 잘 몰랏던 3가지만 정리해보았다.

변수 할당 : 변수에 값을 저장하는 것

변수 선언 : 변수를 사용하기 위해 컴퓨터에 알리는 것

변수 참조 : 변수에 할당된 값을 읽어오는 것

 

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

변수	var	let (ES6)	const (ES6)
재선언	O	X	X
재할당	O	O	X

 

2. 데이터 타입

2 - 1 숫자

(1) 정수	ex) 10
(2) 실수	ex) 3.14
(3) 지수형(Exp)	ex) 2.5e5 (2.5 x 10 ^ 5)
(4) NaN (Not a Number)	ex) "World" / 2
(5) Infinity	ex) 1 / 0
(6) - Infinity	ex) -1 / 0

 

2 - 2 문자 (string)

문자열 길이	str.length
문자열 결합	str1.concat(str2)
문자열 자르기	str.substr(7, 5)  // 7 이후부터 5개 str.slice(7, 12)  //  7이후부터 12까지
문자열 검색	str.search(변수)
문자열 대체	str.replace(변수, 바꿀변수)
문자열 분할	str.split(나누는기준)

 

2 - 3. 불리언(boolean)

true와 false를 나타내는 데이터 타입

 

2 - 4. undefined (정의하지않은)

값이 할당되지 않은 변수

ex) let x;

 

2 - 5 null

값이 없음을 '명시적' 으로 표현

ex) let y = null;

 

2 - 6 Object (객체)  key - value pair

ex)

let person = {

    name : 'choi',

    age : 20,

    gender : 남자,

};

 

2 - 7 array (배열)

여러 개의 데이터가 순서대로 저장되어 있는 것

 

ex)

let number = [3, 4, 5, 6, 7];

let fruit = ['peach', 'watermelon', 'orange'];

 

 

3. 형변환

3 - 1 암시적 형 변환

문자열	ex)  console.log(1 + "9"); // "19"       console.log("3" + true); // "3true"
숫자	ex) console.log(3 - "5"); // -2       console.log("3" * "4"); // 12

 

3 - 2 명시적 형 변환

Blooean	ex) console.log(Boolean(0));  // false console.log(Boolean("false"));  // 값이 있어서  true console.log(Boolean({}));  // 객체는 true로 판단
문자열	ex) console.log(String(345));  // "345" console.log(String(false)); // "false"
숫자	ex) console.log(Number("345"));  // 345 console.log(Number(true));  // 1

 

4. 연산자

4 - 1 산술 연산자

더하기(+)	ex) console.log(2 + 3);  // 5
빼기(-)	ex) console.log(3 - "2");  // 1
곱하기(*)	ex) console.log(4 * 2);  // 8
나누기(/)	ex) console.log(10 / 2);  // 5
나머지(%)	ex) console.log(7 % 2);  // 1

 

4 - 2 할당 연산자

등호 연산자 (=)	ex)  let x = 10; console.log(x);     // 10
더하기 등호 연산자(+=)	ex) let x = 10; x += 5; console.log(x);         // 15
빼기 등호 연산자(-=)	ex) let x = 10; x -= 5; console.log(x);        // 5
곱하기 등호 연산자(*=)	ex) let x = 10; x *= 2; console.log(a);  // 20
나누기 등호 연산자(/=)	ex) let x = 10; x /= 2; console.log(a);   // 5
나머지 등호 연산자(%=)	ex) let x = 10; x %= 2; console.log(a);  // 0

 

4 - 3 비교 연산자

 

일치 연산자(===)	console.log(3 === 3);   //  true console.log("3" === 3);  //  false           타입까지 일치해야 true를 반환
불일치 연산자(!==)	console.log(3 !== 3); // false console.log("3" !== 3); // true  타입까지 일치해야 false를 반환
작다 연산자(x<)	console.log(2 < 3); // true
크다 연산자(x>)	console.log(3 > 4); // false
작거나 같다 연산자(x<=)	console.log(3 <= 3); // true
크거나 같다 연산자(>=)	console.log(3 >= 4); // false

 

4 - 4 논리 연산자

논리곱 연산자(&&) (두 값이 모두 트루일때)	console.log(true && true);      // true console.log(true && false);     // false
논리합 연산자(||) 두값중 하나라도 true인경우	console.log(true || true);   // true console.log(true || false);   // true
논리부정 연산자(!) 값을 반대로 바꿈	console.log(!true);      // false let a =true console.log(!a);  // false

 

4 - 5 삼항 연산자 ( 중요!)

// condition ? true인경우 : false인경우  << 기본 양식

console.log(true ? '참' : '거짓');   // 참

console.log(false ? '참' : '거짓');   // 거짓

console.log(1 === 1 ? '참' : '거짓');   // 참

console.log(1 !== 1 ? '참' : '거짓');   // 거짓

let y = 20;

let answer = (y < 10) ? "작다" : "크다";

console.log(answer);                     //  크다

4 - 6 타입연산자(typeof)

console.log(typeof 345);   // "number"

console.log(typeof "345");   // "string"

 

 

5. 함수 (function 기능)

input과 output을 가지고 있는 기능의 단위

5 - 1 함수 선언문

// function add (매개변수) {

//     // 함수 내부에서 실행할 로직

// }

 

// 두 개의 숫자를 입력 받아서 덧셈을 한 후 내보내는 함수

function add(x, y) {

    return x + y;

}

console.log(add(2, 3));  // 5

 

5 - 2 함수 표현식

let add2 = function (x, y) {

    return x + y;

}

console.log(add2(4, 5));  // 9

 

함수를 호출한다 (= 사용한다)

함수명() > add(입력값)

함수의 input > 매개변수(매개체가 되는 변수)

return문 뒤에 오는 값 : 반환값

input 은 매개변수, output은 반환값

 

6. 스코프

변수의 영향 범위

7 . 전역 변수

변수가 전체코드에 영향

8. 지역변수

함수 내 에서만 영향

9. 화살표함수 (ES6 신 문법)

일반적인 함수

function add(x, y) {    //  이런식의 함수부터 익숙해지고  

    return x + y;       // 화살표 함수에 익숙해지자

}

 

기본적인 화살표 함수

let arrowFunc01 = (x, y) => {

    return x + y;

};

 

한 줄로 한 화살표 함수 ( 중괄호 안에 코드가 한줄일 때 가능) 중괄호도 같이 삭제

let arrowFunc02 = (x, y) => x + y;

 

ex)

function testFunc(x) {

    return x;

}

// 화살표 함수로

let arrowFunc03 = x => x;

 

다른 프로그래밍 언어와 문법이 거의 비슷하긴 하지만 다시 한번 문법을 공부하게 되어서 좋았다.

남은 문법도 잘 정리해 보아야겠다.