[JavaScript] 기초문법(1)

김헤일리·2022년 10월 8일
JavaScriptprestudy항해99
0

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"
으로 표시된다.

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

  1. // 한줄 주석

  2. /* 여러줄 주석 (8/), (/8)로 사용

  3. ; 명령이 끝났다는 것을 명시

  4. = 대입한다는 것을 의미

  5. == 대체로 같다 (1 == "1" true)

  6. === 엄밀히 같다 (1 == "1" false)

  7. != 같지 않음을 의미

반복문

  • 반복문을 사용할 경우, 특정 조건을 설정하여 그 조건을 만족시키는 동안 해당 코드가 반복하여 실행된다.
  1. while
    • (조건) { 조건을 만족할 때 실행할 코드 }
    let temperature = 20
while (temperature < 25) {
	console.log(`${temperature}도 정도면 적당한 온도입니다.`)
	temperature++ // 증감연산자를 활용해서 온도를 변화시킵니다.
   }

  1. 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까지 진행됐을 때 해당 코드는 종료된다.


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

객체 (Object)

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

1. 클래스 선언

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

  1. 클래스로 객체 선언 후, {}안에 변수를 지정하는 것을 생성자(constructor)이라고 한다.

  2. 객체 생성 후 해당 객체를 사용할때 필요한 생성자의 매개변수(ex. name, price, company)를 지정한다.

  3. 해당 예시는 Notebook이라는 클래스에 생성자를 이용하려 name, price, company라는 매개변수를 정의하고, 이 매개변수에 각각 this.name, this.price, this.company라는 속성을 할당한다.

  4. 생성자의 바디에 this키워드. this는 클래스를 사용해 만들어질 객체 자기 자신을 의미.
    this 뒤에 붙는 name, price, company = 객체의 속성.

  5. 생성자의 바디는 함수 호출시 해당 함수에게 전달할 매개변수 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()
  1. computer라는 변수를 정의하고 {} 안에 name, price라는 속성과 해당 속성의 값을 정의
  2. printInfo라는 메소드도 해당 변수(computer)안에 함수로서 정의
  3. 변수와 메소드를 결합하여 바로 메소드에 정의했던 데이터의 형식으로 computer라는 객체의 속성값을 조회
  • 클래스를 사용하는 이유는 재사용성: 한번 클래스를 만들어두면 같은 속성과 메소드를 갖고 있는 객체를 훨씬 더 간결한 코드로 만들 수 있음 (new.클래스명(개체 속성 A, 개체 속성 B))
profile
김헤일리
공부하느라 녹는 중... 밖에 안 나가서 버섯 피는 중... 🍄
이전 포스트

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

다음 포스트

[Javascript 2] 기초문법(2)

0개의 댓글