[TIL] 1주차

*변수

 

1. 변수의 주요 개념

1) 변수 이름 : 지정된 값의 고유 이름

2) 변수 값 : 변수에 저장된 값

3) 변수 할당 : 변수에 값을 저장하는 행위

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

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

 

2. 변수 선언 3가지 방법

1) var

var myVar = "Hello World";

2) let

let myVar = "Hello World2";

3) const

const myVar = "Hello World3";

 

* 차이점

- var 는 똑같은 변수 이름으로 선언 가능

- const 는 재할당 불가능

- var보다는 let 사용 => 호이스팅관련문제

---

* 데이터 타입

1. runtime : run 하는 time

코드를 작성할 때가 아니라, 실제 코드가 실행될 때 데이터 타입이 결정된다

 

2. 숫자

1) 정수

let num1 = 10;
console.log(typeof num1); //number

2) 실수(float)

let num2 = 3.14;
console.log(typeof num2); //number

3) 지수형(Exp)

let num3 = 3.14;
console.log(typeof num3); //number

4) NaN

let num4 = "Hello"/2;
console.log(typeof num4); //NaN

숫자가 아님

 

5) Infinity(무한대)

let num5 = 1/0;
console.log(typeof num5); //Infinity

-Infinity

let num6 = -1/0;
console.log(typeof num6); //Infinity

 

3. 문자열

1) 모양

let str = "Hello World";
console.log(typeof str); // String

2) 기능

2-1) 길이 확인

let str = "Hello";
console.log(str.length); // 5

2-2) 문자열 결합하기(concatenation)

let str1 = "Hello";
let str2 = "World!";
let result = str1.concat(str2);
console.log(result); //Hello World!

2-3) 문자열 자르기

let str3 = "Hello World!";
console.log(str3.substr(0,5)); // Hello
//substr(from, length) from: 어디서부터 length: 몇개

console.log(str3.slice((0,3))) // Hel
//slice(start,end) start:시작위치, end:끝나는 위치

2-4) 문자열 검색

let str4 = "Hello World!"
console.log(str4.search("World")); // 7

2-5) 문자열 대체

let str5 = "Hello World!"
let result01 = str5.replace("World", "Javascript");
console.log(result01); // Hello Javascript!

2-6) 문자열 분할

let str6 = "apple, banana, kiwi";
let result02 = str6.split(",") //자르는 기준을 넣어주기
console.log(result02) // ['apple', 'banana', 'kiwi']

 

4. 불리언(Boolean)

참(true / 1), 거짓(false / 0) 판별

let bool1 = true;
let bool2 = false;

console.log(bool1) // true
console.log(bool2) // false
console.log(typeof bool1) // boolean

 

5. undefined

정의되지 않은 값

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

 

6. null

값이 좀재하지 않음을 '명시적'으로 나타내는 방법

의도적으로 넣은 값

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

 

7. object(객체) 

key-calue pair

let person = {
	name: "choi",
    age: 20,
    isMarried: true,
   };
   console.log(typeof person); // object

 

8. array(배열)

여러 개의 데이터를 순서대로 저장하는 데이터 타입

let number = [1,2,3,4,5];
let fruits = ['apple', 'banana', 'orange'];

각자 인덱스를 가지고 있음(위치에 대한 정보가 있다, 0부터 시작)

---

*형변환

1. 명시적 형 변환

개발자가 의도적으로 바꾸는 것

원하는 형을 쓰고 ()안에 원하는 값을 넣으면 됨

1) Boolean

Boolean을 써주고 ()안에 원하는 값을 넣으면 됨

console.log(Boolean(0));
console.log(Boolean(""));
console.log(Boolean(null));
console.log(Boolean(undefined));
console.log(Boolean(NaN));

//모두 false

console.log(Boolean("false"));
console.log(Boolean({}));

// 위의 둘은 true "문자열" 안에 값이 있고 {}객체이면 true가 나온다

2) 문자열

let result5 = Stirng(123);
console.log(result5); // 123
console.log(typeof result5); // string

let result6 = Stirng(true);
console.log(result6); // true
console.log(typeof result6); // string

let result7 = Stirng(false);
console.log(result7); // false
console.log(typeof result7); // string

let result8 = Stirng(null);
console.log(result8); // null
console.log(typeof result8); // string

let result9 = Stirng(undefined);
console.log(result9); // undefined
console.log(typeof result9); // string

3) 숫자

let result10 = Number("123");
console.log(result10); // 123
console.log(typeof result10); // number

 

2. 암시적 형 변환

의도하지 않았지만 자동으로 바뀌어짐

 

1)  "string" + ? = "string"

let result1 = 1 + "2";
console.log(result1); // 12
console.log(typeof result1); // string

let result2 = "1" + true;
console.log(result2); // 1true
console.log(typeof result2); // string

문자열과 더하면(+) 문자열로 변환됨

 

2) 숫자( + 제외 -, * , /  )

let result3 = 1 - "2";
console.log(result3); // -1
console.log(typeof result3) // number;

let result4 = "2" * "3";
console.log(result4); // 6
console.log(typeof result4); // number

---

*연산자

1. 더하기( + )

2. 빼기 연산자( - )

3. 곱하기 연산자( * )

4. 나누기 연산자( / )

5. 나머지 연산자( % )

 

6. 할당연산자(assignment)

1) 등호연산자(=)

let x = 10;

2) 더하기 등호 연산자(+=)

let x = 10;
x += 5;
console.log(x); // 15

3) 빼기 등호 연산자(-=)

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

4) 곱하기 등호 연산자 (*=)

위와 동일하게 진행됨

 

5) 나누기 등호 연산자 (/=)

위와 동일하게 진행됨

 

7. 비교연산자

1) 일치 연산자(===) 

true / false 반환

타입까지 일치해야 true 반환

console.log(2 === 2); // true
console.log("2" === 2); // false

2) 불일치연산자 (!==)

console.log(2 === 2); // false
console.log("2" === 2); // true

3) 작다 연산자( < ) , 작거나 같다 연산자 (<=)

4) 크다 연산자 ( > ) , 크거나 같다 연산자 (>=)

아는 거라 예시 없이 넘어감

 

8. 논리 연산자

1) 논리곱 연산자(&&)

값이 모두 true 여야만 true

 

2) 논리합 연산자( || )

값이 하나만 ture 이면 true

 

3) 논리부정 연산자( ! )

값을 반대로 바꿈

console.log(!true); //false
let a = true;
console.log(!a); // false

 

9. 삼항연산자 : 조건에 따라 값을 선택

let x = 10;
let result = (x>5) ? "크다" : "작다";
console.log(result); // 크다

참이면 앞의 값이 할당, 거짓이면 뒤의 값이 할당

---

*함수

input 과 output 을 가지고 있는 단위

function () {}

 

1. 함수 선언문

function add (매개변수) {
	// 함수 내부에서 실행할 로직
 }

input : 매개변수 : 매개체가 되는 변수

output: return문 뒤에 오는 값: 반환값

function add(x,y) {
	return x + y;
  }

 

2. 함수 표현식

let add2 = function(x,y) {
	return x + y;
 }

3. 함수 호출(=사용)

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

console.log(add(3, 4)) // 7

 

4. 스코프

어디까지 영향을 끼치나

 

1) 전역변수

코드 전체에서 쓰이는 변수

전체영역에 선언

스코프가 크다

 

2) 지역변수

지역 안에서만 쓰이는 변수(괄호 내에서만 쓰이는 )

스코프가 작다

 

5. 화살표함수

ES6부터 등장한 신함수

const arrowfunc01 = (x,y) => {
	//함수내용 입력
 }
 
 const arrowfunc02 = (x,y) => //함수내용이 한줄일때는 {} 필요 없음
 
 const arrowfunc01 = x => x += 10 
 // 매개변수도 하나일때는 () 필요 없음

 

---

* 조건문

1. if문

if(true 또는 false가 나올 수 있는 조건) {
	//main logic
}

2. if-else 문

if(){
	// main logicn #1
} else{
	// main logic #2
 }

3. if-else if-else

if(){
	// main logicn #1
} else if{
	// main logic #2
}else{
	// main logic #3
}

4. switch

let fruit = "사과";
switch(fruit){
	case "사과":
    	console.log("사과입니다.");
        break;
    case "배":
    	console.log("배입니다.");
        break;
    case "바나나":
    	console.log("바나나입니다.");
        beak;
    default:
    	console.log("아무것도 아닙니다.");
        break;
}

break 붙이는 것 유의

---

 

* 조건문 중첩

 

1. 조건문 중첩

- 조건문을 중첩해서 많이 쓰는 것은 좋지 않음. 하지만 어쩔 수 없을 때가 있으니까..

 

2. 조건부 실행

1) && 조건

let x = 10;

if(x > 0) {
	console.log("x는 양수입니다.");
} // x는 양수입니다.

x > 0 && console.log("x는 양수입니다."); //x는 양수입니다.

// 둘 다 같은 코드임

&& 조건때문에 뒤에가 실행된다

 

2) || 조건

let y; //y에는 undefined
let z = y || 20;

console.log(z); // 20

y의 값이 설정되어 있지않다면(undefined 라면) 기본적으로 20을 셋팅해줘!

 

3) falsy한 값, truthy한 값

if 조건 안에 들어갈 값들 중 ture가 될, false가 될 값

 

falsy 한 값 : 0, "", null, undefined, NaN, false

 

---

 

*객체

key-value pair

하나의 변수에 여러개의 값을 넣을 수 있음

문자열, 숫자, 함수 등 값에 제한이 없음

 

1. 기본적인 객체 생성 방법

let person = {
	name : "홍길동",
    age : 30,
    gender: "남자",
};

2. 생성자 함수를 이용한 객체 생성 방법

function Person(name, age, gender) {
	this.name = name;
    this.age = age;
    this.gender = gender;
}

let person1 = new Person("홍길동", 30, "남자");
let person2 = new Person("춘향이", 16, "여자");

3. 접근하는 방법

console.log(person.name); // 홍길동 
// 객체이름.원하는 키

 

4. 객체 메소드(객체가 가진 여러가지 기능 : Object.~~~)

1) Object.key : keys를 가져오는 메소드

let keys = Object.keys(person);
console.log(keys); // ['name', 'age', 'gender']

2) Object.values : values를 가지고 오는 메소드

let values = Object.values(person);
console.log(values); // ['홍길동', 30, '남자']

3) Object.entries : key와 value 값을 묶어서 배열로 만든 배열

let entries = Object.entries(person);
console.log(entries); // [['name','홍길동'],['age',30],['gender','남자']]

4) Object.assign : 객체 복사

let newPerson = {};
Object.assign(newPerson, person);
console.log(newPerosn); // {name:'홍길동', age:30, gender:'남자'}

/-* assign(target, source)
target 어디에? source 뭐를? 복사할래 *-/

//값들을 변경해서 복사하고 싶을 때
let newPerson2 = {};
Object.assign(newPerson2, person, {gender:"여자"});
console.log(newPerosn2); // {name:'홍예린', age:30, gender:'여자'}

5) 객체 비교

크기가 상당히 큼! 그래서 메모리에 저장할 때 별도의 공간에 저장

변수는 객체 별도 공간에 대한 주소를 저장하게 됨

So, 똑같은 객체를 비교해도 각각 저장된 "주소"는 다르기 때문에 보통 비교하듯이 하면 false 가 나옴!

 

그럼 어떻게 비교하나?

객체를 문자열화 시켜서 비교

let person01 = {
	name : "홍길동",
    age : 30,
    gender: "남자",
};

let person02 = {
	name : "홍길동",
    age : 30,
    gender: "남자",
};

console.log(person01 === person02) // false
consoel.log(JSON.stringify(person01) === JSON.stringify(person02)) // true

 

6) 객체병합

let person01 = {
	name : "홍길동",
    age : 30,
};

let person02 = {
    gender: "남자",
};

// ... : spread operator 
// 안에 있는 key-value 를 다 풀어줘! 라는 거임

let perfectMan = {...person1, ...person2};
//{name: '홍길동', age' 30, gender: '남자'}

---

* 배열

1. 배열 생성

그냥 나열! 대신 순서가 중요함(0부터 시작)

let fruits = ["사과", "바나나", "오렌지"];

2. 배열 크기 지정

let number = new Array[5]; //길이만 지정해서 새로 생성

console.log(fruits.length); //3
console.log(number.length); //5

3. 요소 접근

console.log(fruits[0]); // 사과 
console.log(fruits[1]); // 바나나 
console.log(fruits[2]); // 오렌지

4. 배열메소드

1) push

새로운 요소 넣기

let fruits = ["사과", "바나나"];
console.log(fruits); // ['사과', '바나나']

fruits.push("오렌지");
console.log(fruits); //['사과', '바나나', '오렌지']

2) pop 

마지막 요소 삭제 메소드

let fruits = ["사과", "바나나", "오렌지"];
console.log(fruits); // ['사과', '바나나', '오렌지']

fruits.pop();
console.log(fruits); //['사과', '바나나']

3) shift

맨 앞의 요소 삭제 메소드

let fruits = ["사과", "바나나", "오렌지"];
console.log(fruits); // ['사과', '바나나', '오렌지']

fruits.shift();
console.log(fruits); //['바나나', '오렌지']

4) unshift

맨 앞에 요소 추가(un + shift 니까 ㅎㅎ)

let fruits = ["사과", "바나나", "오렌지"];
console.log(fruits); // ['사과', '바나나', '오렌지']

fruits.unshift("배");
console.log(fruits); //['배', '사과', '바나나', '오렌지']

5) splice

위치를 선택해서 삭제 후 새로운 요소 넣기

let fruits = ["사과", "바나나", "배"];

fruits.splice(1,1,"배");
console.log(fruits); // ['사과', '배', '키위']

/*- splice(start, delete, string)
start: 삭제할 부분의 시작 위치, delete : 삭제할 갯수, string: 새롭게 넣을 요소 *-/

6) splice

let fruits = ["사과", "바나나", "키위"];

let slicedFruits = fruits.slice(1,2);
console.log(sliceFruits); // 바나나

// slice(start, end) begin: 시작할 위치, end: 마칠 위치(end 미포함) 까지 복사, 새로운 배열 생성

7) forEach

배열의 각 요소 하나하나를 돌아가며 무언가를 수행해주는 메소드

let number = [1,2,3,4,5];

number.forEach((funtion(item){
	console.log(item);
}); //1 2 3 4 5
// 매개변수 자리에 함수를 넣는 것 : 콜백함수
//꼭 item 이 아니어도 됨. 원하는 이름 정해서 밑에 사용할 때만 이름 잘 넣기

8) map

반드시 return 이 필요

function을 통해 새로운 배열을 생성해 내기 때문!

항상 원본 배열의 길이만큼 return이 됨.

function의 내용이 없을 시 원본배열의 길이만큼 undefined로 채워짐

let number = [1,2,3,4,5];

let newNumber = number.map(function(item){
	return item * 2;
}); 

console.log(newNumber); // [2, 4, 6, 8, 10]

9) filter

필터에 맞는 것만 return 해서 새로운 배열을 만들어냄

let numbers = [1,2,5,4,5];

let filterNumber = numbers.filter(function (item) {
	return item === 5;
 });
 
 console.log(filterNumber); // [5,5]

10) find

let numbers = [1,2,3,4,5]

let result = numbers.find(function(item){
	return item > 3;
});

console.log(result); // 4
// 함수에 해당되는 첫번째 요소만 반환

 

*새로운 배열이 나오는 것들은 모두 return 이 필요했다는 것!

 

---

* for문

for(초기값; 조건식; 증감식) {
	//main logic
}

1) 배열과 함께

const arr = [one,two,three,four,five];
for(let i = 0; i < arr.length; i++) {
	console.log(i);
    consoele.log(arr[i]);
 }
 /*-
 0
 one
 1
 two
 2
 three
 3
 four
 4
 five
 -*/

2) for ~ in

객체의 속성을 출력하는 문법

let person = {
	name:"John",
    age: 30,
    gender: "male",
};

for (let key in person) {
	console.log(key)
}
// name age gender

---

*break continue

 

1. while

while (조건) {
	//main logic
}

2. do while

먼저 실행 -> 조건 판별

do{
	//main logic
} while(조건)

3. break continue : for문과 같이 쓰인다!

for(let i=0; i<10; i++){
	if(i === 5){
    break;
    }
    console.log(i);
}
// 0 1 2 3 4

break : 거기서 멈추기

for(let i=0; i<10; i++){
	if(i === 5){
    continue;
    }
    console.log(i);
}
// 0 1 2 3 4 6 7 8 9

continue: 그냥 지나가기 (5만 빠짐)