JS기초

Kng_db·2022년 11월 8일
js
0

JS문법 기초

변수입력

let/const

let '변수이름' = '값'

값 재할당 가능!

const '변수이름' = '값'

값 재할당 불가능!

데이터 타입

number, string, boolean, null, undefined

숫자(number)

숫자로 이루어진 데이터

문자열(string)

문자로 이루어진 데이터 (''),("")안에 입력해야함!
(숫자를 문자처럼 다루고 싶을때도 방법이 같음)

boolean

참과 거짓을 나타내는 true/false 를 표현하는 데이터

null

비어있는 값을 의미

undefined

변수를 지정만하고 값을 할당하지 않음!
null과 undefined의 차이점!

let name1 = null
console.log(name) // null을 출력
let name2
console.log(name2) // undefined를 출력

연산자

문자열 붙이기, 산술연산자, 증감연산자, 대입연산자, 비교연산자, 논리연산자, 일치연산자

문자열 붙이기

+를 이용하여 (문자열 + 문자열) / (문자열 + 숫자)를 이어붙일 수 있음

산술연산자

사칙연산(+, -, *, /)를 포함하여 (// 나머지 연산), (** 거듭제곱) 활용가능

증감연산자

자기 자신의 값을 증가,감소 시키는 연산자(++,--) 변수앞인지 뒤인지 입력 위치도 중요!

let count = 1
const preIncrement = ++count
let count = 1
const postIncrement = count++

둘 다 count = count + 1 이지만,
위의 경우 먼저 자기 자신에게 1을 더해서 재 할당 한 후 이를 preIncrement에 할당 했다는 의미!
아래의 경우 preIncrement에 자기 자신의 값을 할당 한 후에 1을 더해서 재할당 했다는 의미!

대입연산자

값을 어떤 변수에 할당한다 라는 말과 동일한 의미
(= , +=, -=)도 사용할 수 있음

const A = 10
const B = 5
let C = 0
C += A      // C = C + A 와 동일
C += B      // C = C + B 와 동일
C -= A      // C = C - A 와 동일
console.log(C)    //  5가 입력됨 (0 + 10) > (10 + 5) > (15 - 10)

비교연산자

(< , <=, >, >=)와 같이 비교하여 boolean(true,false)값을 얻음

논리연산자

||(or), &&(and), !(not)과 같은 연산자 결과로 boolean(true,false)값을 얻음

|| 는 연산 대상 중 하나만 true 여도 true 리턴
&& 는 연산 대상이 모두 true 여야만 true 리턴
! 는 true를 false로, flase를 true로 바꿔서 리턴

일치연산자

두 값이 일치하는지 비교(==, ===) boolean(true,false)값을 얻음
대소문자나 띄워쓰기도 비교대상임!
(===)비교하는 두 값의 데이터타입과 값 자체가 정확히 일치해야만 true를 리턴
(==)교하는 두 값의 데이터타입이 일치하지 않을 때 해당 값의 데이터타입을 자동으로 변환해주는 자바스크립트만의 특성이 있음

console.log(1 === "1") // false를 출력
console.log(1 == "1" // true를 출력

조건문

if, else, else if

if (조건) { 조건을 만족할 때 실행할 코드 }

조건을 만족했을 때만 코드 실행!
조건의 결과값은 boolean(true,false)값을 얻음
구문의 body부분은 들여쓰기를 이용해 가독성 높이기(필수는 아니지만 중요)

const A = 20
const B = 17
if (A < 25) {
	console.log("구매하기")           // 조건에 만족하므로 실행됨
    }
if (B <= 15) {
	console.log("구매하기")           // 조건에 만족하므로 실행됨
    }

else

if문의 조건을 만족하지 않았을 때 실행

const A = 20
const B = 17
if (A < 15) {
	console.log("구매합니다")
    } else {
    console.log("구매하지 않겠습니다")            // if 조건에 만족하지 않으므로 else 실행됨
    }

else if

if와 else 이외의 조건도 추가 가능!
'else if' 는 if처럼 조건을 작성하면 됨!

const A = 20
const B = 17
if (A < 15) {
	console.log("구매합니다")
    } else if (A <= 20){
    	console.log("고민해 보겠습니다")   // if에 부합하지 않고 else if에 부합한 값이므로 else if 출력
    } else {
    console.log("구매하지 않겠습니다")
    }

반복문

while, for

while (조건) { 조건을 만족할 때 실행할 코드 }

특정 코드를 반복해서 실행하며 조건을 설정해서 원하는 만큼 반복 가능

let temperature = 20
while (temperature < 25) {
	console.log(`${temperature}도 정도면 적당한 온도입니다.`)
    temperature++ // 증감연산자로 온도변화
}

true를 리턴하게 되면 반복해서 작동하고 false를 리턴하게 되면 빠져나옴
반복문의 조건이 계속해서 true 를 리턴한다면 무한루프에 빠져서 프로그램이 끝나지 않음
(ctrl + c) 를 눌러서 중단 시킬 수 있음

for (begin; condition; step) { 조건을 만족할 때 실행할 코드 }

while 과 같은 반복문, 좀 더 명시적으로 반복문의 조건을 표현

for (let temperature = 20; temperature < 25; temperature++) {
	console.log(`${temperature}도 정도면 적당한 온도입니다.`)
}

순서를 보면
1. begin -> temperature 변수를 선언하고 값을 할당
2. condition -> temperature가 25보다 작으면 true(계속 실행), 그렇지 않으면 false(종료)
3. 조건을 만족할 때 실행할 코드 -> 실행
4. step -> temperature에 1을 더한 값을 재할당하고 2번 과정부터 반복

반복문과 조건문 활용

반복문과 조건문은 코딩의 핵심!!

for (let number = 1; number <= 10; number++) {
	if (number % 3 === 0) {
		console.log(`${number}는 3으로 나눠서 떨어지는 숫자입니다.`)
	}
}
for (let number = 1; number <= 20; number++) {
	if (number % 2 === 0) {
		console.log(`숫자 ${number}는 짝수입니다.`)
	} else {
		console.log(`숫자 ${number}는 홀수입니다.`)
	}
}

여러 예시들을 통해서 학습, 복습해야 하는 부분!

함수

반복되는 특정 작업을 수행해야 한다면 그 코드 자체를 어딘가에 만들어서 저장해놓고 사용
함수는 특정 작업을 수행하는 코드의 집합

함수의 선언과 호출, 코드의 흐름

선언

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}입니다.`)

const priceC = 3000
const priceD = 4000
// 함수의 호출
const avg2 = calculateAvg(priceC, priceD)
console.log(`두 상품의 평균은 ${avg2}입니다.`)

코드의 흐름

  1. 함수 calculateAvg를 호출하면서 변수 priceA와 priceB를 매개변수로 전달
  2. 함수 calculateAvg의 바디 코드가 실행됨. 이 때 1번에서 전달한 매개변수의 값이 함수를 선언할 때 썼던 매개변수명인 price1, price2에 할당
  3. 함수의 바디 코드가 최종적으로 변수 avg를 리턴하고 있고, 이것이 변수 avg1에 할당

클래스와 객체

객체(Object)타입, 클래스(Class)선언, 메소드(method), 객체 리터럴(Object Literal)

객체(Object)타입

물리적으로 존재하거나 추상적으로 생각할 수 있는 것중에서 자신의 속성을 갖고 있고 다른 것과 식별 가능한 것
한마디로 자신만의 속성을 갖고 다른 것과 식별이 가능 한 것 (구체적인 표현을 위해 좀 더 공부가 필요)

클래스(Class)선언

객체를 만들때 마치 설계도처럼 사용하는 것이 클래스
클래스는 템플릿이고 객체는 이를 구체화한 것

class Notebook {
	constructor(name, price, company) {
		this.name = name
		this.price = price
		this.company = company
	}
}
  1. class 키워드와 클래스명
  2. 생성자(constructor), 객체가 '생성'이 될 때 자바스크립트 내부에서 호출이 되는 함수
  3. this와 속성(property), this는 클래스를 사용해 만들어질 객체 자기 자신을 의미하고 this 뒤에 붙는 name, price, company는 객체의 속성
    함수 호출시 전달할 매개변수 name, price, compay를 객체의 속성 name, price, company에 각각 할당

객체 만들기

const 변수명 = new 클래스명(생성자에서 정의한 매개변수들...)

const notebook1 = new Notebook('MacBook', 2000000, 'Apple')

-> 클래스를 활용해 객체를 만들 때는 new 라는 키워드를 먼저 써주고 클래스명을 마치 함수처럼 호출하면서 매개변수값을 전달
-> 해당 클래스의 생성자가 호출되면서 객체가 생성되고 객체의 속성들에 매개변수값들이 할당
-> 만들어진 객체는 변수에 할당
-> 변수에 할당하고 나면 해당 변수를 활용해 객체에 접근가능
(객체의 속성 각각에 접근해야 할 때는 'this.속성명'을 사용)

위의 객체를 만든 후 결과값

console.log(notebook)          // Notebook { name: 'Macbook', price: 2000000, company: 'Apple' } 
console.log(notebook.name)     // MacBook
consoel.log(notebook.price)    // 2000000
console.log(notebokk.company)  // Apple

메소드(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)

js에서는 객체 리터럴을 활용해서 바로 객체를 만들 수 있음
객체 리터럴은 클래스와 같은 템플릿 없이 빠르게 객체를 만들 수 있는 방법
2개 이상의 속성과 메소드가 있을 때는 쉼표로 구별, 줄바꿈으로 가독성 개선하기
const 변수명 = {
속성명: 데이터,
메소드명: function () { 메소드 호출시 실행할 코드들 }
}

const computer = {
	name: 'Apple Macbook',
	price: 20000,
	printInfo: function () {
		console.log(`상품명: ${this.name}, 가격: ${this.price}원`)
	}
}

computer.printInfo()

name, price라는 속성과 printInfo 라는 메소드를 가지고 있는 객체를 만들어서 computer라는 변수에 할당하는 코드
객체의 printInfo 메소드를 바로 호출
결과적으로는 클래스를 활용해 객체를 만든 것과 동일
but 재사용성 때문에 활용 -> 한번 클래스를 만들어두면 같은 속성과 메소드를 갖고 있는 객체를 훨씬 더 간결한 코드로 작성 가능

ex)의류 쇼핑몰로 예시

class Cloth {
	constructor(color, size, price) {
		this.color = color
		this.size = size
		this.price = price
	}

	printInfo() {
		console.log(`색깔: ${this.color}, 사이즈: ${this.size}, 가격: ${this.price}`)
	}
}

const shirts = new Cloth('white', 'M', '50000')
const coat = new Cloth('navy', 'L', '200000'

shrits.printInfo()
coat.printInfo()

배열

선언, 데이터, 길이, 요소, 활용

같은 형식의 많은 데이터를 순서대로 저장하고자 할 때 사용하는 것이 배열
같은 타입의 데이터들을 하나의 변수에 할당하여 관리하기 위해 사용하는 데이터 타입

배열의 선언

숫자 1, 2, 3, 4, 5로 이루어진 배열을 선언하는 두 가지 방법

// 1번째 방법
const arr1 = new Array(1, 2, 3, 4, 5)

// 2번째 방법
const arr2 = [1, 2, 3, 4, 5]

1번 방법
Array라는 클래스를 활용해서 객체를 만들었다고 생각하면 되며, Array라는 클래스를 선언한 적은 없지만 js 내부 기능이니 바로 사용가능
2번 방법
배열을 바로 만드는 방법. 대괄호 안에 배열로 저장할 데이터를 나열

배열을 만들때는 1번째보다는 2번째 방법을 많이 사용

배열 안의 데이터

배열에 있는 데이터 각각을 요소(element)라고 부름
배열에서는 인덱스(index)가 객체의 속성명과 같은 역할
인덱스는 배열 안의 데이터들이 자리잡은 순서 (인덱스는 0부터 시작함!!)

 const rainbowColors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']

console.log(rainbowColors[0]) // o번 인덱스를 통해서 데이터에 접근. red
console.log(rainbowColors[1]) // 1번 인덱스를 통해서 데이터에 접근. orage
console.log(rainbowColors[2]) // 2번 인덱스를 통해서 데이터에 접근. yellow
console.log(rainbowColors[3]) // 3번 인덱스를 통해서 데이터에 접근. green
console.log(rainbowColors[4]) // 4번 인덱스를 통해서 데이터에 접근. blue
console.log(rainbowColors[5]) // 5번 인덱스를 통해서 데이터에 접근. indigo
console.log(rainbowColors[6]) // 6번 인덱스를 통해서 데이터에 접근. violet

배열의 길이

length의 속성을 이용하여 확인

    const rainbowColors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']
   
    console.log(rainbowColors.length) // 7을 출력

    console.log(rainbowColors[rainbowColors.length - 1]) // length 를 응용하여 배열의 마지막 요소도 쉽게 찾아서 출력 가능! 0번째부터 시작하니 마지막은 6번째
    ```

요소 추가와 삭제

배열을 선언하고 난 이후 새로운 요소를 더하거나 빼는 방법
push 와 pop 메소드

const rainbowColors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']

rainbowColors.push('ultraviolet') // 배열의 마지막에 ultarviolet 추가
console.log(rainbowColors) // ultraviolet이 추가된 rainbowColors 출력

rainbowColors.pop() // 배열의 마지막 요소 ultraviolet을 제거
console.log(rainbowColors) // ultraviolet이 제거된 rainbowColors 출력

활용

배열의 요소들을 하나씩 꺼내서 출력해야 하는 코드를 작성해야한다고 했을 때 좀 더 간결한 방법
-> 반복문 활용

const rainbowColors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']

for (let i = 0; i < rainbowColors.length; i++) {
	console.log(rainbowColors[i])
}
  1. 배열의 인덱스는 0부터 시작이니 변수 i의 시작값도 0으로!
  2. i가 배열의 길이보다 작을 때에만 반복문 안의 코드 실행
  3. 모든 요소를 빠짐없이 다 출력해야 하므로 i는 1씩 증가

-> for문 다른 활용

const rainbowColors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']

for (const color of rainbowColors) {
	console.log(color)
}

배열에서 요소들을 차례대로 하나씩 찾아 color라는 변수에 할당
자동으로 배열의 끝까지 반복문이 실행

객체를 활용하기 위해 구체적이고 확실한 개념 정립이 필요하고, 반복문과 배열을 많이 사용해보고 익숙해지는 것이 필요!!
틈틈이 알고리즘 공부하기

profile
Kng_db
코딩 즐기는 사람
이전 포스트

미니프로젝트 종료

다음 포스트

Python기초(1)

0개의 댓글