자바스크립트1 - 개념과 기초 문법(변수 & 함수)

이번 포스팅에서는 자바스크립트의 개념과 기초 문법에 대해 다루어보고자 한다.

자바스크립트란 무엇일까?

 

 

 

자바스크립트(JS)

• 프론트엔드 개발 언어 중 하나로, 스크립트 언어(스크립트 언어에 대해서는 아래에서 설명-)
• 웹 브라우저에서 사용하기 위해 만들어진 언어
• 정적인 웹 문서에 동작을 부여하는 역할
• 객체 기반 언어
• 읽히는 순서대로 작동

네이버를 예로 들어보자면, 네이버 메인 페이지에서 발생하는 모든 동작들을 처리하기 위해 사용되는 언어이다.

뉴스를 보거나,,, 광고 위에 마우스를 올려두면 광고가 재생된다거나,,, 검색 버튼을 누른다거나,, 등등

 

자바스크립트는 말 그대로 스크립트 언어이다.

그렇다면, 스크립트 언어가 무엇인지에 대해 알고 넘어갈 필요가 있다.

 

스크립트 언어

•  프로그래밍 언어의 한 종류로, 기존에 이미 존재하는 sw를 제어하기 위한 용도로 쓰이는 언어
• 인터프리터 방식에 유용
• 컴파일 과정을 거치지 않고 실시간으로 분석하며 실행
• 문법 오류가 있으면, 실행 시점에서 발견됨
• 컴파일 언어보다 실행 속도가 느림
• https://namu.wiki/w/%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%20%EC%96%B8%EC%96%B4

스크립트 언어 - 나무위키

 

자바스크립트는 정적인 웹 문서(html)에 연결되어 동작을 부여한다.

연결 방식에는 3가지가 있는데 간단히 설명하자면 다음과 같다.

 

3가지 CSS 참조 방식

1. 인라인 방식
2. 내장 방식
3. 링크 방식

인라인 방식은 잘 안 쓰이는걸로 알고 있다.

 

내장 방식은 <script></ script> 태그를 사용해 html 문서의 어디에서나 작성이 가능하다.

head 태그 내부, body 태그 내부, head와 body 사이, body 아래 등.. 위치는 상관x

간단하게 구현 가능하다는 장점이 있다.

 

링크 방식은 CSS처럼 Java Script 파일을 따로 만들어서 링크(연결)하는 방식이다.

<script src="./index.js"></script>

src에 파일 경로만 제대로 지정하고 html 문서의 어디에서나 작성하면 된다.

내장 방식에 비해 유지 보수 용이성이 편리하다는 장점이 있다.

 

---

 

그럼, 이제부터는 자바스크립트의 기초 문법에 대해 본격적으로 공부해보자.

 

 

• 데이터의 종류(자료형)
  • String - 문자열
  • Number - 숫자
  • Boolean - 참, 거짓 논리
  • Undefined - 미할당 데이터(선언만 하고 값 할당x)
  • Null - 빈 데이터(의도적으로 비어있음)
  • Array - 배열 → 순서 O
  • Object - 객체(데이터 꾸러미) → 순서 X
    
    • 키(key) - 값(value) 형태로 저장 {키: 값} 
    • 데이터에 접근시, key 이름을 이용해서 접근
    • 접근 방법 - 점 표기법, 대괄호 표기법이 있음 (아래 코 참고)
• 자료형을 알려주는 함수: typeof
  • typeof "abc" // string
• 형 변환
  • 자동 형변환: JS의 특징 → error 가 뜨지 않고 구동이 되는 편이기 때문에 검토 필수 → 명시적 형변환 필요
  • 명시적 형변환: 자동 형변환에 의존하지 않고 개발자가 직접 형 변환을 시키는 것
  • String() - 문자로 변환해주는 함수
  • Number() - 숫자로 변환해주는 함수
  • parseInt() - 정수로 변환해주는 함수(소수점 버림)
• 변수: 데이터를 저장하고 참조(사용)하는 데이터의 이름
  • 변수 선언 방법: var, let, const
  • var - 재선언O, 재할당O → 의도치 않은 오류가 많이 발생하게 되므로 사용 권장X
  • let - 재선언X, 재할당O, 초기화 필수X  → 주로 많이 사용됨
  • const - 재선언X, 재할당X, 초기화 필수O → 주로 상수와 같이 변하지 않는 데이터를 넣을 때 사용
  • 변수 기본 규칙
    • 1. 변수 이름으로는 문자, 숫자, $, _ 만 사용 가능 O
    •  2. 첫 글자는 숫자 불가 XXX
    • 3. 예약어 사용 불가 XXX (this, if, break 등 ...)
    • 4. 싱수는 대문자로 선언할 것(약속)
  • 문자와 변수를 동시에 쓰는 방법
    • `(백틱)안에 ${변수이름} 넣으면 됨
• 연산자
  • 비교 연산자
    • == : 값만 비교하는 연산자
    • ===: 값과 데이터 타입까지 비교하는 연산
    • 크기 비교: >, >=, <. <=
  • 산술 연산자
    • +, -, *, /, %, **, ++, --
  • 논리 연산자
    • !, &&, ||

 

 

// object 예제
let cat = {
    name:'나비',
    age:2,
    isCute:true,
    mew: function(){
        return '냐옹'
    }
}

// 점 표기법 
console.log(cat.name)
console.log(cat.age)
console.log(cat.isCute)
console.log(cat.mew())
cat.like = 'tuna'
cat.age = 3


// 대괄호 표기법
let dog = {
    name:'coco',
    isPoodle:true,
    age:3,
    sibling:['max', 'lucy']
}

console.log(dog.name)
console.log(dog["name"]) // 반드시 키가 따옴표 안에 들어가야 함
console.log(dog['age'])
console.log(dog["sibling"][1])

// 문자와 변수를 같이 쓰는 방법
const str1 = 'tory'
const str2 = '간식'
//tory는 간식을 좋아해
console.log(`${str1}는 ${str2}을 좋아해`)

.

// ==: 값만 비교
console.log(''=='0') // false
console.log(false == '0') //true
console.log('0' == 0) //true
console.log('' == 0) //true
console.log(false == '0') //true
console.log(undefined == null) //true

/* ===: 값과 data type까지 모두 비교*/
console.log('=== 연산자')
console.log('1'===1) // false
console.log(undefined ===null) // false
console.log(''===0) // false
console.log(1==1) // true

 

 

 

 

자바스크립트의 함수 선언 방식은엔 3가지가 있다.

• 1. 함수 선언문
  • 선언 후, 어디에서나 호출 가능
  • 함수가 선언되기 전에 호출하여 사용 가능(자바스크립트가 로드될 때 함수를 적재해놓기 때문에 선언되는 곳보다 위에서 호출하여 사용해도 오류가 나지 x)
• 2. 함수 표현식
  • 선언 이후에만 사용 가능
  • 변수에 함수를 담아둔 형태
• 3. 화살표 함수
  • 함수 표현식의 축약 형태
  • 함수 표현식과 동일하기 때문에, 마찬가지로 선언 이후에만 사용이 가능함

 

// 1. 함수 선언문
helloWorld1();

function helloWorld1(){
    console.log('hello world1!!');
}

// 2. 함수 표현식
// helloWorld2(); 오류 발생!
const helloWorld2 = function(){
    console.log('hello world2!!');
}

helloWorld2();

// 3. 화살표 함수
// helloWorld3();=> 오류 발생!
const sayHello3 = (text, name)=>{
    return `${text} ${name}`;
}