[JavaScript] 기초문법(1)

김헤일리·2022년 10월 8일

JavaScript prestudy 항해99

JavaScript

목록 보기

2/20

데이터는 숫자와 문자열로 구분할 수 있다.

ex. 숫자 표시 alert(3);
ex. 문자 표시 alert("3");

똑같이 숫자를 사용했다고 하더라도 따옴표의 존재가 해당 데이터가 숫자인지 문자인지 구분한다.

다만 자바스크립트는 숫자가 문자열 사이에 있다면 숫자도 문자열로 인식한다.

ex. document.write('coding everybody' + i + j + < br / >)
이 상황에선 i와 j가 숫자를 정의해도 문자열처럼 표현이 된다.
- i + j 가 2 + 3 = 5 같은 느낌이 아니라:
- i + j = 23 과 같이 표현된다는 의미다.

문자열 표시 1

문자는 문자가 아닌 "문자열"이라는 단어로 표현된다. (string)
문자는 한 글자 한 글자가 하나의 데이터로 표현되기 때문이다.

ex. "coding" = c,o,d,i,n,g 라는 데이터가 모여서 문자열을 구성한다.

따옴표의 존재는 해당 데이터가 문자인 것을 의미한다.
따옴표의 시작점부터 끝점 사이에 들어간 데이터는 문자로 인식한다.
그렇다면 글 중간에 따옴표를 써야하면 어떻게 되는가?

역슬래시("\")를 사용한다.
"everyone's coding club" = 이렇게 표시한 경우, 문자 데이터를 인식하는 시작점이 "기 때문에 중간에 들어간 '는 문제가 안된다.
(시작점은 큰 따옴표, 작은 따옴표 둘 다 가능)

'everyone's coding club'이라고 할 경우 's에 붙은 작은 따옴표에서 데이터가 끝난다.
이런 경우에 역슬래시를 사용한다.
'everyone\'s coding club'

문자열 표시 2

줄바꿈은 "\n"으로 표시된다.
"everyone's coding club"에서

"everyone's\n coding club"이라고 표현할 경우,

"everyone's
coding club"
으로 표시된다.

자바스크립트 문법 기호 모음

// 한줄 주석
/* 여러줄 주석 (8/), (/8)로 사용
; 명령이 끝났다는 것을 명시
= 대입한다는 것을 의미
== 대체로 같다 (1 == "1" true)
=== 엄밀히 같다 (1 == "1" false)
!= 같지 않음을 의미

반복문

반복문을 사용할 경우, 특정 조건을 설정하여 그 조건을 만족시키는 동안 해당 코드가 반복하여 실행된다.

while

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

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

for
- while보다 더 명시적인 조건의 반복문
- for (begin; condition; step) { 조건을 만족할 때 실행할 코드 }
```
for (let temperature = 20; temperature < 25; temperature++) {
	console.log(`${temperature}도 정도면 적당한 온도입니다.`)
}
```
- for문이 실행되는 순서:
  - 현재 temperature는 20이다, temperature가 25이하여야 한다, temperature의 값은 1씩 증가한다.
    1. temperature라는 변수를 선언하고 값을 할당함. (begin)
    2. temperature가 25보다 작은지 연산. 결과값이 true라면 계속 실행. false라면 for 문 종료 (condition)0
    3. 중괄호 안의 코드 실행.
    4. temperature에 1을 더해서 재할당하고 2번 과정부터 다시 반복. (step)
  - 첫번째 실행 시, temperature의 값이 20부터 시작해서 21, 22, 23, 24까지 진행됐을 때 해당 코드는 종료된다.

변수의 i++, ++i
- (i++)는 정의된 i의 값부터 시작해서 1씩 증가시킨다.
  - for ( i = 0 ; i < 5 ; i++ )
    - 이 경우에 i는 "0"부터 시작해서 i의 값이 5보다 작을때까지 i의 값이 1씩 증가하는 조건이 된다.
    - 0, 1, 2, 3, 4.
- (++i)는 i의 값을 1씩 증가시키지만, 정의된 값에 미리 1을 증가시킨다.
  - for ( i = 0 ; i < 5 ; ++i )
    - 이 경우에 i는 "1"부터 시작해서 i의 값이 5보다 작을때까지 i의 값이 1씩 증가하는 조건이 된다.
    - 1, 2, 3, 4.

배열 (Array)

1. 하나의 데이터 안에 여러개의 원소(element)를 갖고 있는 데이터 형식

ex. member = [kim, hailey, hyeonbin]
각 원소는 인덱스(색인)를 갖게 된다. = 순서대로 0, 1, 2

인덱스는 각 원소가 배열 안에 자리 잡은 순서대로 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

rainbowColor라는 변수를 배열로서 정의 ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']
rainbowColors라는 배열의 특정 인덱스 번호[n]를 대입하여 해당 인덱스 번호에 해당하는 데이터 출력

2. 배열의 길이를 구하는 방식 = length라는 속성 사용

console.log(rainbowColors.length) : 호출 시 숫자 "7" 출력

rainbowColors.length-1 : 6번 인덱스를 의미
- console.log(rainbowColors[rainbowColors.length-1]) : violet을 의미

3. 배열의 요소 추가와 삭제

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 출력

4. 배열과 반복문

배열의 요소를 하나씩 출력하는 경우, 모든 인덱스 번호를 따로 작성할 필요없이 반복문을 통해 한번에 출력할 수 있음.

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

for (let i = 0; i < rainbowColors.length; i++) {
	console.log(rainbowColors[i])
}

배열은 인덱스 번호 0부터 시작하기 때문에 변수(i)를 0으로 설정한다. : "let i = 0"
해당 반복문은 배열의 길이만큼 반복 되어야 하기 때문에 배열의 전체길이에 닿았을 때 반복문의 값이 false가 되도록 설정한다. : "i < rainbowColors.length"
배열의 모든 값이 출력되어야 하기 때문에 빠짐 없이 0부터 하나씩 출력되어야 한다. : "i++" (i = 인덱스 번호)

객체 (Object)

배열에선 원소(사용자가 지정한 값)에 대한 식별자(index)로 숫자가 배정되었다.
객체는 이런 배열을 새로 지정하는 방식이다.
배열과 객체의 다른 점은, 배열은 데이터가 추가된 순서가 있기에 순서대로 원소를 호출할 때, 객체는 순서로 지정되지 않고 사용자가 특정 인덱스 값을 지정하기 때문에 호출할때 순서대로 호출하지 않아도 된다.
배열과 객체는 함수, 반복문, 조건문 등에 데이터를 1개 이상 넣고 싶을때 사용한다.
- ex. height = ['kim':158 , 'hailey':170 , 'hyeonbin':165]
- ' ' 안에 들어간 값이 인덱스 또는 key 값이고, 값(value)를 호출하기 위해 지정해야하는 특정 값이다.

1. 클래스 선언

객체를 만들고 싶은경우, 기본적으로 "class"를 선행해서 선언한다.
- 기본적으로 클래스명은 해당 객체의 특징을 잘 표현하는 명칭을 사용한다. (함수 선언처럼)

class Notebook {
	constructor(name, price, company) {
		this.name = name
		this.price = price
		this.company = company
	}
}

클래스로 객체 선언 후, {}안에 변수를 지정하는 것을 생성자(constructor)이라고 한다.
객체 생성 후 해당 객체를 사용할때 필요한 생성자의 매개변수(ex. name, price, company)를 지정한다.
해당 예시는 Notebook이라는 클래스에 생성자를 이용하려 name, price, company라는 매개변수를 정의하고, 이 매개변수에 각각 this.name, this.price, this.company라는 속성을 할당한다.
생성자의 바디에 this키워드. this는 클래스를 사용해 만들어질 객체 자기 자신을 의미.
this 뒤에 붙는 name, price, company = 객체의 속성.
생성자의 바디는 함수 호출시 해당 함수에게 전달할 매개변수 name, price, compay를 객체의 속성 name, price, company에 각각 할당하고 있는 것.

2. 객체 생성

const 변수명 = new 클래스명(생성자에서 정의한 매개변수들...)
- 클래스를 활용해 객체를 만들 때는 "new" 라는 키워드를 먼저 써주고 클래스명을 마치 함수처럼 호출하면서 매개변수값을 전달한다.
  - ex. const notebook1 = new Notebook('MacBook', 2000000, 'Apple')

객체를 생성하여 클래스 선언을 통해 만든 변수에 특정 값 (notebook1의 값)을 추가했다.
- 변수를 이용해 객체에 저장한 데이터를 확인할 수 있다.

 	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

3. Method

클래스 내부에 함수처럼 매개변수에 대입된 데이터를 표시할때 실행할 수 있는 메소드를 정의할 수 있다.
객체 생성 후 객체의 변수 이름(notebook)에 만들었던 메소드(printInfo)를 결합하여 메소드를 호출하면 메소드에 정의했던 모양대로 객체의 값이 표시된다.

// 클래스 선언
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원

4. 객체의 리터럴(Object Literal)

클래스 없이 빠르게 객체와 메소드를 생성할 수 있음.

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

computer.printInfo()

computer라는 변수를 정의하고 {} 안에 name, price라는 속성과 해당 속성의 값을 정의
printInfo라는 메소드도 해당 변수(computer)안에 함수로서 정의
변수와 메소드를 결합하여 바로 메소드에 정의했던 데이터의 형식으로 computer라는 객체의 속성값을 조회

클래스를 사용하는 이유는 재사용성: 한번 클래스를 만들어두면 같은 속성과 메소드를 갖고 있는 객체를 훨씬 더 간결한 코드로 만들 수 있음 (new.클래스명(개체 속성 A, 개체 속성 B))

김헤일리

공부하느라 녹는 중... 밖에 안 나가서 버섯 피는 중... 🍄

이전 포스트

[HTML, CSS, JavaScript] 기본 개념 정리

다음 포스트