//Node.js : Javascript 언어의 문법에 맞게 코딩을 했을 때 컴퓨터가 이를 해석해서 처리할 수 있도록 해주는
일종의 전용 번역기.//
변수
// 예전에는 var 라는 키워드를 사용했지만 최근에는 let과 const를 씀
let 변수이름 = 값
: 변수이름 이라는 변수를 선언하고 여기에 값을 할당한다. 재할당 가능함
let name = 'jieun' // name 이라는 변수에 jieun 이라는 값을 할당
console.log(name) // 변수 name이 가리키고 있는 값 jieun 출력const 변수이름 = 값
: const는 let과 달리 재할당할 필요가 없을 때, 변수가 고정된 값을 가지고 있을 때 사용
데이터 타입
기본 또는 원시형(primitive) 타입
- 숫자 (Number) : 말 그대로 숫자 데이터! 나이, 거리, 무게, 가격 등등 무수히 많은 종류의 데이터를 숫자로 표현
const age = 20
console.log(age) // 20을 출력- 문자열 (String) : 말 그대로 문자열 데이터! 큰 따옴표("")나 작은따옴표('')로 데이터를 감싸야함
const firstName = 'Jieun'
const lastName = 'Han'
console.log(firstName) // Jieun 출력
console.log(lastName) // Han 출력- Boolean : 참과 거짓을 나타내는 true / false를 표현하는 데이터. 비교 연산자에서 많이 활용됨
- null, undefined : null은 텅텅 비어 있는 값, undefined은 변수를 선언만 하고 값이 할당되어 있지 않은 것
let name = null
console.log(name) // null을 출력
let age
console.log(age) // undefined를 출력연산자(1)
<문자열 붙이기>
- +를 사용하여 문자열을 이어 붙일 수 있음. 문자열과 숫자를 이어 붙이면 숫자가 문자로 인식된다!!
console.log('My' + ' car') // My car를 출력
console.log('1' + 2) // 12를 출력- 템플릿 리터럴 (Template literals) : 백틱(``)을 사용하여 문자열 데이터를 표현. 간결하게 붙이기가 가능함
const shoesPrice = 200000
console.log(`이 신발의 가격은 ${shoesPrice}원입니다`)
// console.log('이 신발의 가격은 ' + shoesPrice + '원입니다') 와 동일<산술 연산자>
: 숫자 데이터에 대한 여러 연산들 가능. 사칙연산(+, -, *, /)
console.log(2 + 1) // 3을 출력
console.log(2 - 1) // 1을 출력
console.log(4 / 2) // 2를 출력
console.log(2 * 3) // 6을 출력
console.log(10 % 3) // 나머지(remainder) 연산자. 1을 출력
console.log(10 ** 2) // exponentiation. 10의 2승인 100을 출력<증감 연산자>
: 자기 자신의 값을 증가시키거나 감소시키는 연산자 (++, --)
증감연산자를 변수 앞에 놓느냐, 변수 뒤에 놓느냐에 따라 차이 있음
let count = 1
const preIncrement = ++count
// 먼저 자기 자신에게 1을 더해서 재할당 한 후, 이를 preIncrement 에 할당했다는 의미입니다.
// count = count + 1
// const preIncrement = count
console.log(`count: ${count}, preIncrement: ${preIncrement}`) // count: 2, preIncrement: 2let count = 1
const postIncrement = count++
// postIncrement에 자기 자신의 값을 먼저 할당하고, 이후에 1을 더해서 재할당합니다.
// const postIncrement = count
// count = count + 1
console.log(`count: ${count}, postIncrement: ${postIncrement}`) // count: 2, postIncrement: 1<대입 연산자>
: 어떤 값을 어떤 변수에 할당한다는 표현이 대입 연산자를 사용한다는 의미.
const shirt = 10000
const pants = 20000
let total = 0
total += shirt // total = total + shirt 와 동일
total += pants // total = total + pante 와 동일
total -= shirt // total = total - shirt 와 동일+= // 기존 변수 값에 값을 더함
-+ // 기존 변수 값에 값을 뺌
*= // 기존 변수 값에 값을 곱함
/= // 기존 변수 값에 값을 나눔
%= // 기존 변수 값에 나머지를 구함연산자(2)
<비교 연산자>
: 숫자 값을 비교하는 연산자. 이러한 비교 연산자를 통해서 얻는 값이 바로 Boolean!
조건문과 같이 많이 활용함
console.log(1 < 2) // 1이 2보다 작다 true
console.log(2 <= 2) // 2가 2보다 작거나 같다 true
console.log(1 > 2) // 1이 2보다 크다 false
console.log(1 >= 2) // 1이 2보다 크거나 같다 false<논리 연산자>
: or( || ), and( && ), not ( ! ) 과 같은 연산자. 조건문과 쓰임
|| 는 연산 대상 중 하나만 true 여도 true 리턴
&& 는 연산 대상 모두 true 여야만 true 리턴
! 는 true는 false로 , false는 true로 바꿔서 리턴
<일치 연산자>
: 두 값이 일치하는지 비교.
console.log(1 === 1) // true
console.log(1 === 2) // false
console.log('Javascript' === 'Javascript') // true
console.log('Javascript' === 'javascript') // false 대소문자나 띄워쓰기도 일치해야함// ==도 있는데 ==는 비교하는 두 값의 데이터 타입이 일치하지 않을 때 해당 값의 데이터 타입을 자동으로 변환해주는
자바스크립트만의 특성이 있어 정확히 일치해야만 true를 리턴하는 === 을 씀
조건문(1)
< if >
: if구문을 활용해 조건을 만족했을 때만 코드를 실행. 이 조건의 결괏값이 Boolean이다.
Boolean을 리턴하는 연산자는 비교 연산자, 논리 연산자, 일치 연산자가 있다.
const shoes = 4000
if (shoes < 5000) {
console.log('신발을 사겠습니다.')
} // shoes가 5000원 보다 작으므로 해당 코드 실행
const cap = 50000
if (cap < 50000) {
console.log('모자를 사지 않겠습니다.')
} // cap이 50000원 보다 작지 않으므로 해당 코드 실행 안함// if 구문의 body(중괄호 안)코드를 작성할 때 들여쓰기 신경쓰기
조건문(2)
<else, else if>
- if 구문의 조건을 만족하지 않았을 때 실행하고 싶은 코드를 else 구문화 함께 작성함
const shoes = 50000
if (shoes < 40000) {
console.log('신발을 사겠습니다.')
} else {
console.log('너무 비싸요. 신발을 사지 않겠습니다.')
} // shoes가 40000원보다 작지 않으므로 해당 코드가 실행됨- else if 구문을 활용하면 더 많은 조건을 판단하고 코드를 실행할 수 있음
const shoes = 50000
if (shoes < 40000) {
console.log('신발을 사겠습니다.')
} else if (shoese <= 50000) {
console.log('고민 해볼게요') // shoes가 50000원보다 작거나 같으므로 않으므로 해당 코드가 실행됨
} else {
console.log('너무 비싸요. 신발을 사지 않겠습니다.')
}반복문(1)
<while>
: 반복문을 활용해 특정 코드를 반복해서 실행할 수 있음. 조건을 설정해 우리가 원하는 만큼 가능함
let temp = 20
while (temp < 23) {
console.log(`${temp}도 정도면 적당한 온도입니다.`)
temp++ // 증감연산자를 활용해서 온도를 변화시킴.
}// 언젠가는 반복문이 끝날 수 있도록 해줘야 함. 실수로 무한루프에 빠졌다면 ctrl + c를 눌러 강제 중단시키기
반복문(2)
<for>
: for (begin; condition; step) {조건을 만족할 때 실행할 코드}
for (let temp = 20; temp < 25; temp++) {
console.log(`${temp}도 정도면 적당한 옵도입니다.`
}for문이 실행되는 순서
- temp라는 변수를 선언하고 값을 할당함 (begin)
- temp가 25다 작은지 연산. 결괏값이 true면 계속 실행, false라면 종료 (condition)
- 중괄호{} 안의 코드 실행
- temp에 1을 더해서 재할당하고 2번부터 다시 반복 (step)
반복문과 조건문 활용
반복문과 조건문은 같이 잘 사용되기 때문에 같이 익숙해져 나가야 한다.
Q. 1부터 20까지의 숫자중 홀수인 경우는 '숫자 ...은 홀수입니다.'를
짝수인 경우는 '숫자 ...은 짝수입니다' 를 출력
for (let num = 1; num < 20; num++) {
if(num % 2 === 0) {
console.log(`숫자 ${num}는 짝수입니다.`)
} else {
console.log(`숫자 ${num}는 홀수입니다.`)
}
}함수(1)
: 특정 작업을 수행하는 코드의 집합. 미리 변수에 데이터를 할당해놓고 계속 사용!
<함수의 선언>
: 해당 함수가 실행할 코드의 집합을 만들어서 저장함
function 함수명(매개변수) {
이 함수에서 실행할 코드들
return 반환값
}function calculateAvg(price1, price2) {
const sum = price1 + price2 // 매개변수인 price1, price2을 변수처럼 활용!
console.log(`두 상품의 합계는 ${sum}입니다.`)
const avg = sum / 2
return avg // 평균가격을 리턴!
}const 변수명 = 선언한 함수명(매개변수)
const priceA = 1000
const priceB = 2000
// 함수의 호출
const avg1 = calculateAvg(priceA, priceB)
console.log(`두 상품의 평균은 ${avg1}입니다.`)함수(2)
<함수 호출 시 코드 흐름>
- 함수 calculateAvg를 호출하면서 변수 priceA와 priceB를 매개변수로 전달
- 함수 calculateAvg의 바디 코드가 실행됨. 이때 1번에서 전달한 매개변수의 값이 함수를 선언할 때 썼던 매개변수 명인 price1, price2에 할당됨
- 함수의 바디 코드가 최종적으로 변수 avg를 리턴하고 있고, 이것이 변수 avg1에 할당됨.
클래스와 객체(1)
<객체(Object) 타입>
: 관련 있는 데이터들을 묶어서 한 번에 잘 나타낼 수 있는 데이터 타입
. 물리적으로 존재하거나 추상적으로 생각할 수 있는 것 중에서 자신의 속성을 갖고 있고 다른 것과 식별 가능한 것
<클래스(Class) 선언>
: 객체를 만들 때 마치 설계도처럼 사용하는 것. 클래스는 템플릿이고 객체는 이를 구체화한 것이라고도 함.
클래스를 미리 정의해놓으면 필요할 때마다 그 클래스를 사용해서 동일한 모양을 가진 객체를 만들 수 있음
class Cloth {
constructor(color, size, price) {
this.color = color
this.size = size
this.price = price
}
}1. class 키워드와 클래스명
: class는 클래스를 선언하는 문구 , 그 뒤에 바로 클래스 명.
클래스 명도 마치 변수명처럼 내가 표현하고자 하는 데이터를 나타낼 수 있는 이름으로 하기.
2. 생성자 (constructor)
: 중괄호 안에는 '생성자'라는 것을 적어줌. 나중에 객체가 '생성'이 될 때 자바스크립트 내부에서 호출이 되는 함수라고 생각하면 된다. 코드를 보면 3개의 매개변수를 정의했고 각각의 이름은 color, size, price이다.
3. this와 속성(property)
: this는 클래스를 사용해 만들어질 객체 자기 자신을 의미하고. 뒤에 붙는 color, size, price는 객체의 속성이다.
생성자의 바디에서 함수 호출 시 전달할 매개변수 color, size, price를 객체의 속성 color, size, price에 각각 할당.
<객체 만들기>
: const 변수명 = new 클래스명 (생성자에서 정의한 매개변수)
const coat = new Cloth('navy', 'L', 200000)-> 클래스를 활용해 객체를 만들 때는 new라는 키워드를 먼저 써주고 클래스명을 마치 함수처럼 호출해 매개변수 값을
전달해준다. 그러면 해당 클래스의 생성자가 호출되면서 객체가 생성되고 객체의 속성들에게 매개 변숫값들이 할당됨.
만들어진 객체는 변수에 할당해준다. 변수에 할당하고 나면 해당 변수를 활용해 객체에 접근할 수 있음.
객체의 속성 하나하나에 접근해 데이터를 갖고 와야 할 때 this. 속성명을 사용한다.
console.log(Cloth) // Cloth{color:'navy', size:'L', price:200000}
console.log(Cloth.color) // navy
console.log(Cloth.size) // L
console.log(Cloth.price) // 200000클래스와 객체(2)
<메소드 (method)>
: 클래스에는 데이터(값)를 나타내는 속성뿐만 아니라 함수와 같이 특정 코드를 실행할 수 있는 메소드도 정의함.
객체를 생성한 후 만들어진 객체의 메소드를 호출하면 된다.
// 클래스 선언
class Product {
constructor(name, price) {
this.name = name
this.price = price
}
printInfo(){
console.log(`상품명: ${this.name}, 가격: ${this.price}원`)
}
}
//객체 생성 밎 메소드 호출
const notebook = new Product('Apple Macbook', 2000000)
notebook.printInfo() // 상품명: Apple Macbook, 가격: 2000000원 출력<객체 리터럴 (Object Literal)>
: 객체 리터럴을 활용해서 바로 객체를 만들 수 있음.
클래스와 같은 템플릿 없이 빠르게 객체를 만들 수 있는 방법.
2개 이상의 속성과 메소드가 있을 때는 쉼표로 구별해주고 가독성을 위해서 줄 바꿈도 해주는 게 좋다.
const 변수명 = {
속성명 : 데이터,
메소드명 : function() {메소드 호출시 실행할 코드들}
}const computer = {
name: 'Apple Macbook',
price: 2000000,
printInfo: function(){
console.log(`상품명: ${this.name}, 가격: ${this.price}원`)
}
}
computer.printInfo()-> name, price라는 속성과 printInfo라는 메소드를 가지고 있는 객체를 만들어서 computer라는 변수에 할당.
해당 객체의 printInfo 메소드를 바로 호출까지 실행.
결과는 클래스를 활용해 객체를 만드는 것과 동일하나 클래스를 정의하는 이유는 재사용성 때문이다.
한번 클래스를 만들어두면 같은 속성과 메소드를 갖고 있는 객체를 훨씬 더 간결한 코드로 만들 수 있다.
배열(1)
: 배열(Array)이란 같은 타입의 데이터들을 하나의 변수에 할당하여 관리하기 위해 사용하는 데이터 타입.
<배열의 선언>
const arr1 = new Array(1, 2, 3, 4, 5)
// Array라는 클래스를 활용해서 객체를 만듦
// Array라는 클래스를 선언한 적은 없지만 자바스크립트 내부적으로 이미 가지고 있음
const arr2 = [1, 2, 3, 4, 5]
// 배열을 바로 만듦.
// 대괄호 안에 우리가 배열로 저장할 데이터를 나열해주면 된다.
<배열 안의 데이터>
: 배열에 있는 데이터 각각을 요소(element)라고 부른다.
객체도 속성명을 통해 해당 데이터에 쉽게 접근할 수 있었던 것처럼 배열에서는 인덱스(index)가 객체의 속성명과 같은 역할을 함. 인덱스는 배열 안의 데이터들이 자리 잡은 순서! 특이한 점은 0부터 시작한다는 사실!
const color = ['red', 'yellow', 'pink', 'blue']
console.log(color[0]) // 0번 인덱스를 통해 데이터에 접근. red
console.log(color[1]) // 1번 인덱스를 통해 데이터에 접근. yellow
console.log(color[2]) // 2번 인덱스를 통해 데이터에 접근. pink
console.log(color[3]) // 3번 인덱스를 통해 데이터에 접근. blue
<배열의 길이>
: 배열의 요소가 많을 때 하나하나 셀 수 없으니 length라는 속성을 사용!
const color = ['red', 'yellow', 'pink', 'blue']
console.log(color.length) // 4를 출력
console.log(color[color.length -1]) // length를 응용하여 마지막 요소 찾기배열(2)
<요소 추가와 삭제>
: push 추가, pop 삭제
const color = ['red', 'yellow', 'pink', 'blue']
color.push('navy') // 배열 마지막에 navy 추가
console.log(color) // navy가 추가된 color 출력
color.pop() // 배열 마지막 요소 navy 제거
console.log(color) // navy가 제거된 color 출력<배열과 반복문>
: 배열의 요소들을 하나씩 꺼내서 출력해야 하는 코드를 작성해야 할 때 반복문 활용.
const color = ['red', 'yellow', 'pink', 'blue']
for (let i = 0; i < color.length; i++) {
console.log(color[i])
}- 배열의 인덱스는 0부터 시작이니 변수 i의 시작 값도 0
- i가 배열의 길이보다 작을 때에만 반복문 안의 코드가 실행
- 모든 요소를 빠짐없이 다 출력해야 하므로 i는 1씩 증가
- 간단한 형식의 for문
const color = ['red', 'yellow', 'pink', 'blue']
for (const c of color) {
console.log(c)
}-> 배열의 요소들을 차례대로 하나씩 찾아 c라는 변수에 할당. 자동으로 배열의 끝까지 반복문이 실행되기 때문에
위의 방법보다 쓰기 편하다.
'내배캠 4기 React - TIL' 카테고리의 다른 글
| 221109 TIL - Python (0) | 2022.11.09 |
|---|---|
| 221108 TIL (0) | 2022.11.08 |
| 221107 TIL - Git Hub (0) | 2022.11.07 |
| 221104 TIL - 미니 프로젝프 발표 (0) | 2022.11.04 |
| 221103 TIL - 미니프로젝트 4일 차 (0) | 2022.11.03 |
