2023.12.29 TIL - JS 강의 1주차(변수, 데이터 타입, 형변환, 연산자, 함수, 스코프, 조건문, 객체, 배열)

Innes·2023년 12월 29일

TIL javascript강의 객체 내배캠 내일배움캠프 데이터 타입 데이터타입 배열 변수 본캠프 스코프 연산자 조건문 함수 형변환

TIL(Today I Learned)

목록 보기

28/147

📘 오늘의 공부

이번 주차 계획 세워보기

JS 문법 강의 1주차 1회독

간단히 세워보는 이번 주차 계획
- 12/29금 ~1/4목 : 강의 3회독 완강 (빠르면 더 좋음)
- 1/5금 ~1/7일 : 개인과제 개발 완료

🖥️ JS 문법 강의

변수, 상수

변수 ㅡ 메모리에 저장한다. 읽어들여서 재사용한다.

1. 변수의 5가지 주요 개념

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

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

var myVar = "hello world";

2) let : 같은 변수에 다른 값 할당 불가

let myLet = 'hello world1';

3) const : 같은 변수에 다른 값 할당 불가

const myConst = 'hello world2';

데이터 타입 - 숫자, 문자열, 불리언, 객체, 배열

runtime : run 하는 time
코드 작성시 X, 실제 코드가 실행될 때 데이터 타입이 결정됨
-> 옆에 터미널에 코드가 실행될 때 데이터 타입이 결정됨
java) String a = 'abc';
js) const a = 'abc';
typeof : 데이터 타입 파악 가능

console.log(typeof num1);

1. 숫자

1-1. 정수
let num1 = 10; //number

1-2. 실수(float)
let num2 = 3.14; //number

1-3. 지수형(Exp)
let num3 = 2.5e5; // 2.5 x 10^5 (10을 5번 곱함, 10의 5제곱)
//250000 number

1-4.
NaN : Not a number
let num4 = 'hello' / 2;
console.log(num4); // NaN

1-5. Infinity(무한대)
let num5 = 1 / 0;
console.log(num5); // Infinity
console.log(typeof num5);

1-6. Infinity(무한대)
let num6 = -1 / 0;
console.log(num6); // -Infinity
console.log(typeof num6);

2. 문자 : string(문자열 = 문자의 나열)
' ' = " "
let str = 'hello world!';
console.log(str);
console.log(typeof str);

2-1. 문자열 길이 확인하기 : .length

console.log(str.length);
ex)

let y = 'hello world';
console.log(y.length);
// 11

2-2. 문자열 결합하기 : .concat();
let str1 = 'hello, ';
let str2 = 'world!';
let result = str1.concat(str2);
console.log(result); // hello, world!

2-3. 문자열 자르기 - 2가지(substr, slice)

원하는 문자만 남기고 나머지는 버림
.substr(from, 길이)
.slice(from, 끝)

let str3 = 'hello, world!';
console.log(str3.substr(7, 5)); // world
console.log(str3.slice(7,12)); // world

2-4. 문자열 검색 - 몇번째부터 시작하는지 검색 .search()
let str4 = 'hello, world!;'
// console.log(str4.search('world'));

2-5. 문자열 대체 - .replace('A를', 'B로')
let str5 = 'hello world!';
let result01 = str5.replace('world', 'Javascript');
// console.log(result01);

2-6. 문자열 분할 - 한덩이를 여러개로 쪼개주는것 .split('부호')

자르기와 다름(자르기는 선택한 단어 말곤 다 버림)
let str6 = 'apple, banana, kiwi';
let result02 = str6.split(',');
console.log(result02);

3. 불리언(Boolean)- true(참), false(거짓)

4. undefined : 변수에 값이 할당되지 않음
-. ex) let x; -> 변수에 값이 할당되지 않아서 console 찍으면 undefined 뜸

5. null : 값이 존재하지 않는걸 알려주기 위해 일부러 작성했을때 표시됨

null은 일부러 준거고, undefined는 정의되지 않은 값
개발자가 의도적으로 값이 없다라는걸 명시하기 위해 넣은 값
(null != undefined)

6. object 객체 : key-value pair
let person = {
name: 'choi',
age: 20,
isMarried: true,
}
console.log(typeof person);

7. array 배열
// 여러 개의 데이터를 순서대로 저장하는 데이터 타입
let number = [1, 2, 3, 4];
//index는 0부터 시작

형변환 (데이터 타입을 바꾸는 것)

1. 명시적 형변환(개발자가 의도적으로 변환)
A(B) -> B를 A타입으로 변환함

1-1. Boolean
console.log(Boolean(0));
// false

false - 0, "", null, undefined, NaN
true - "false", {}(객체라서)

1-2. 문자열
let result5 = String(123);
console.log(typeof result5);
// string

1-3. Number
let result10 = Number('123');
// number

2. 암시적 형변환(의도치 않게 형변환 됨)
2-1. 문자열 : 문자열 + 다른 데이터 타입 -> 문자열로 변환됨
let result1 = 1 + "2";
// 12, string (자동으로 문자열로 변환됨)

let result2 = "1" + true;
// 1true, string (불리언도 문자열로 변환됨)

2-2. 숫자 : 더하기 연산자 외의 다른 연산자 -> 숫자로 변환됨
let result3 = 1 - "2";
// -1, number

let result4 = "2" * "3";
// 6, number

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

+ 더하기 연산자

문자열 + 나머지 데이터타입 : 문자열로 변환됨
(나머지 연산자는 숫자가 우선순위)

- 빼기 연산자
* 곱하기 연산자
/ 나누기 연산자
% 나머지 연산자

몫을 뺀 나머지 값만 출력
console.log(5 % 2); // 1

할당 연산자(assignment)

= 등호 연산자
+= 더하기 등호 연산자
let x = 10;
x += 5;
x = x + 5;
-= 빼기 등호 연산자
let x = 10;
x -= 20; // -10

비교 연산자 (true, false 반환)

값을 비교해서 true, false 값을 반환

일치 연산자(===)

타입까지 일치해야 true

// 숫자 2가 숫자 2랑 같니?
console.log(2 === 2); // true
console.log(2 === "2"); // false

불일치 연산자(!==) - 일치 연산자와 반대 값이 나옴!

타입까지 일치해야 false

//숫자 2가 숫자 2랑 다르니?
console.log(2 !== 2); // false
console.log(2 !== "2"); // true

작다 연산자(<)

console.log(2 < 3); // true

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

console.log(3 <= 3); // true

논리 연산자 : true, false 비교

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

⭐️삼항 연산자 : 조건에 따라 값 선택

let x = 10;
let result = (x > 5) ? "크다" : "작다";
// ( ) 조건이 true 이면 "앞"으로 결정, false 이면 "뒤"로 결정 
console.log(result);
// "크다"

let y = 20;
let result1 = (y < 10) ? "작다" : "크다";
console.log(result1);
// 크다

7. 타입연산자(typeof)

함수 function(기능)

input, output을 가지고 있는 기능의 단위
js내에서 기능의 단위로 묶은 다음 재활용을 한다!
기본 골격 : function () {}

1. 함수 선언문

input : 매개변수(매개체가 되는 변수)
return문 뒤에 오는 값 : 반환값(output)

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

// 두 개의 숫자 입력받아 덧셈 한 후 내보내는 함수
function add (x, y) {
	return x + y;
};

return : 출력은 대체로 return 키워드로 함!

2. 함수 표현식 (함수 이름이 앞에 있을 뿐, 선언문과 같은 기능)

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

3. 함수 호출하기 (=사용하기)
// 함수명() -> add(입력값)

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

스코프 - 전역변수, 지역변수, 화살표함수

스코프 scope
- 변수의 영향 범위
- 변수가 어디까지 영향을 끼칠 수 있는가

전역변수 : 스코프가 전체영역

let x = 10;

function printX() {
console.log(x);
}

console.log(x);
printX();

// 함수 안, 밖에서 모두 x 출력 가능 (10, 10)

자역변수 : 스코프가 함수 내에서만

let x = 10;

function printX() {
console.log(x);
}

console.log(x);
printX();

// 함수 밖에서는 x 출력 불가

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

기존 함수 형식

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

3-1. 기본적인 화살표 함수

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

3-2. 한 줄로 - { }안의 로직이 한줄이고 return문 일때 가능

let arrowFunc02 = (x, y) => x + y
// 매개변수가 하나이면 ( )도 빼도 됨

조건문(if, else if, else, swith)

1. if문

기본 형식

if (조건 - true, false 나올 수 있는) {
메인 로직 - true일 때 실행됨
}

예시

let y = 'hello world';

let length = y.length;

if (length >= 5) {
    console.log(length);
}

2. if - else문

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

3. if - else if - else 문

if (조건) {
// logic 1
} else if (조건) {
// logic 2
} else {
// logic 3
}

4. switch문

변수 값에 따라 여러가지 case(경우)중 하나를 선택
모든 case에 해당하지 않는 경우를 대비해 default값도 지정
모든 case의 마지막엔 break;를 걸어야 실행 후 switch문을 빠져나옴
ex)

let fruit = "apple";

switch (fruit) {
	case "apple":
    	console.log("This is apple.");
        break;
    case "banana":
    	console.log("This is banana.");
        break;
    case "kiwi":
    	console.log("This is kiwi.");
        break;
    default:
    	console.log("This is nothing.");
        break;
    }

5. 조건부 실행
5-1. and조건( && )

let x = 10;

(x > 0) && console.log('x는 양수입니다.');
// 앞의 조건 만족하면 && 뒤를 실행해줘

// 기본형은 아래
if (x > 0) {
	console.log('x는 양수입니다.');
}

5-2. or조건( || ) : 삼항 연산자와 단축평가

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

console.log(z); // 20

// y가 undefined이면 20을 기본값으로 세팅해줘
// y가 존재하지 않는 경우에는 기본값으로 우측 값(20)을 세팅해줘

falsy한 값, truty한 값

if문의 조건으로 사용될 수 있는 값 알아보기
falsy한 값
- 0, "", null, undefiend, NaN, false

객체

key-value pair
장점 : 하나의 변수에 여러개의 값을 넣을 수 있음
value에는 어떤 값이든 가능
(문자, 숫자, boolean, function, 배열[ ], 객체, ...)

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

let person = {
    name: '홍길동',
    age: 30,
    isMarried: '남자',
}

1-2. 생성자 함수를 이용한 객체 생성 방법 - 한 번에 여러 객체 생성 가능

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

let person1 = new Person('홍길동', 30, '남자');
let person2 = new Person('홍길순', 20, '여자');
...

2. 객체의 속성에 접근하는 방법

console.log(person.name);

// 1-1의 person이란 객체에서 name이란 속성에 접근하는 방법
// '홍길동' 출력 방법

3. 객체 메소드(객체가 가진 여러가지 기능 : Object.어쩌구)

// 객체 예시
let person = {
    name: '홍길동',
    age: 30,
    isMarried: '남자',
}

3-1. Object.key() : 객체의 key를 가져오는 메소드

let keys = Object.keys(person);
// ['name', 'age', 'gender'] 배열 형태로 반환

3-2. Object.values : 객체의 value들을 가져오는 메소드

let values = Object.values(person);
// ['홍길동', 30, '남자'] 배열 형태로 반환

3-3. Object.entries : key-value 묶어서 배열로 만든 배열(2차원 배열)

let entries = Object.entries(person);
// [ ['name', '홍길동'], ['age', 30], ..] 배열을 배열로 반환!

3-4. Object.assign : 객체를 복사

// assign(target: {}, source: any): any

// target : 어디에 복사할래? - newPerson에
// source : 뭘 복사할래? - person을 복사

// 기본
let newPerson = {};
Object.assign(newPerson, person);

// 중간에 value를 바꾸고 싶다면?
let newPerson = {};
Object.assign(newPerson, person, { age: 31 });

3-5. 객체 비교

같은 내용을 가진 객체일지라도, 그냥 ===로 비교하면 false 뜸
-> 객체는 크기가 커서 특정 주소에 저장됨, 그 주소가 다르기 때문!
-> 객체를 문자열화 시켜서 ===비교하면 true 나옴(JSON.stringify())

console.log(JSON.stringify(person1) === JSON.sstringify(person2));
// true

3-6. 객체 병합

... : spread operator
- 객체의 { }를 없애고 안에 있는 key: value만 나열하게 만듦

let perfectMan = {...person1, ...person2};
// 하나의 객체로 반환

배열

1. 배열 기초

나열하는 것
기본 생성

let fruits = ['apple', 'banana', 'orange'];
// index 0부터

크기 지정 : new Array( )

let number = new Array(5);
// 5개 들어있는 배열 만들어줘
console.log(number);
// [ <5 empty items> ]

길이 확인하기 : 배열이름.length

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

배열에서 요소에 접근하기 : 배열이름[index순서]

console.log(fruits[0]);
// apple

2. 배열 메소드
2-1. push : 배열이름.push('넣을 내용');

fruits.push('kiwi');

2-2. pop : pop() 마지막 요소 삭제 메소드

fruits.pop();

2-3. shift : shift() 첫번째 요소 삭제

2-4. unshift : unshift('넣을 내용') 맨 앞에 추가하기

2-5. splice : splice(시작 위치, 삭제할 개수, 넣을 내용)
위치 지정해서, 일정 부분 삭제 후, 갈아끼우기

let fruits = ['apple', 'banana', 'orange'];
fruits.splice(1, 1, "grape");
// 첫번째 요소부터, 1개를 삭제하고, "얘"를 넣어줘

// ['apple', 'grape', 'orange']

2-6. slice : slice(시작부분, 여기 전까지만 잘라)
특정 영역만 지정해서 반환하기

let fruits = ['apple', 'banana', 'orange'];
let sliced = fruits.slice(1,2);
console.log(sliced);

// 1요소부터 시작해서, 2요소 전까지 잘라서 반환해줘
// [ 'banana' ]

🐣 오늘의 느낀점

미니 프로젝트 하면서 궁금했고 팀원에게 설명도 들었지만 100% 이해하진 못했던 지식들을 기초부터 차근차근 배우는 기분이 들어서 좋았다. 아직 1주차 강의도 겨우 들은 상태이지만, 5주차까지 완강하고 3회독까지 하고 나면 지난 프로젝트때 이해하지 못했던 개념들도 다 이해도 되고 내가 직접 활용까지 할 수 있는 수준으로 올랐으면 좋겠다. 그렇게 될 수 있을 것 같다. 물론 강의 완강하면 개인프로젝트도 있지만, 그것보다도 이전 프로젝트에서 이해못했던 개념들을 다 이해하게 되는 그 순간 정말 뿌듯하고 기분이 좋을 것 같다. 스스로 이만큼 발전했다고 피부로 와닿는 순간이 될 것 같다! 그 순간을 만날때까지 강의 3회독 화이팅!

Innes

꾸준히 성장하는 우상향 개발자

이전 포스트

2023.12.28 TIL - git과 local 연동 방법 / velog 표, 글자색/ button태그 링크연결

다음 포스트

2023.12.29 TIL - JS 강의 1주차(변수, 데이터 타입, 형변환, 연산자, 함수, 스코프, 조건문, 객체, 배열)

TIL(Today I Learned)

📘 오늘의 공부

🖥️ JS 문법 강의

변수, 상수

데이터 타입 - 숫자, 문자열, 불리언, 객체, 배열

1. 숫자

형변환 (데이터 타입을 바꾸는 것)

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

할당 연산자(assignment)

비교 연산자 (true, false 반환)

논리 연산자 : true, false 비교

⭐️삼항 연산자 : 조건에 따라 값 선택

함수 function(기능)

스코프 - 전역변수, 지역변수, 화살표함수

조건문(if, else if, else, swith)

falsy한 값, truty한 값

객체

배열

🐣 오늘의 느낀점

2023.12.28 TIL - git과 local 연동 방법 / velog 표, 글자색/ button태그 링크연결

2024.01.03 TIL - 알고리즘, sort(오름차순, 내림차순)

0개의 댓글

2023.12.29 TIL - JS 강의 1주차(변수, 데이터 타입, 형변환, 연산자, 함수, 스코프, 조건문, 객체, 배열)

TIL(Today I Learned)

📘 오늘의 공부

🖥️ JS 문법 강의

변수, 상수

데이터 타입 - 숫자, 문자열, 불리언, 객체, 배열

1. 숫자

형변환 (데이터 타입을 바꾸는 것)

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

할당 연산자(assignment)

비교 연산자 (true, false 반환)

논리 연산자 : true, false 비교

⭐️삼항 연산자 : 조건에 따라 값 선택

함수 function(기능)

스코프 - 전역변수, 지역변수, 화살표함수

조건문(if, else if, else, swith)

falsy한 값, truty한 값

객체

배열

🐣 오늘의 느낀점

2023.12.28 TIL - git과 local 연동 방법 / velog 표, 글자색/ button태그 링크연결

2024.01.03 TIL - 알고리즘, sort(오름차순, 내림차순)

0개의 댓글

2023.12.29 TIL - JS 강의 1주차(변수, 데이터 타입, 형변환, 연산자, 함수, 스코프, 조건문, 객체, 배열)