본문 바로가기
카테고리 없음

자바 스크립트 기본 강의

by 혀닙 2021. 12. 30.

 

 

자바스크립트?

  • API를 통하여 HTML과 CSS를 동적으로 수정하기 위해(자바스크립트의 흔한 사용 이유)
  • 느슨한 타입 언어(loosely typed)언어 or 동적(dynamic)언어
  • 변수의 data type을 미리 선언할 필요가 없음

 > 타입은 프로그램이 처리되는 과정에서 자동으로 파악됨(=같은 변수에 여러 타입의 값 넣을 수 있음)

var myName = "kim";
var myName = `jihyeon`;
var myName = 'Ivy';
var myName = "Abeera";

#주석 넣기 ( Comment) -2가지 방식

#Multi-line comments

/*
	주석
    		*/

#Single-line comments

// 줄바꿈이 필요 없는 주석

 

 

-데이터 및 구조 유형

1. type of 연산자로 확인되는 6가지 기본 데이터 유형

undefined

boolean

number

string

bigint

symbol

 

Data type 설명 예시
Strings 문자열은 인용부호 '' "" ``로 감싸진다  
Numbers 소수점을 가지거나 소수점을 가지지 않거나 하나의 유형만 가짐  
Booleans true / false의 두 값만을 가짐
조건 확인에 주로 사용		  
Undefined 변수값이 없는 변수  
     
     

 

 

 

변수(Variable)이란?

  • '데이터 값을 저장'할 수 있는 '컨테이너' ( =값 그 자체가 아니다)
  • 변수 선언 시, var 또는 let 키워드 뒤에 원하는 변수 이름 붙이면 됨
  • 변수 저장 공간은 메모리(RAM) / 다만 HTML파일은 하드에 저장
  • >따라서 코드가 실행되어야만 개발자 도구에서 확인 가능하다!
  • 운영체재가 OS인 경우 콘솔창 단축키 : 브라우저 열고 Ctrl + Shift + I

 

#1 선언 (Declarations)

#1-1 let: 블록 범위(block-scope)의 '지역 변수(=국부적 변수, local variable) 선언' 시 사용 
/*	선언예약자 변수명;	의 형태	*/
let myName;

 

 

#1-2 var: 블록을 고려하지 않고 현재 함수(또는 전역) 어디에서나 접근할 수 있는 '변수 선언 
var myName = "jihyeon";

 

#1-3 const: 읽기 전용으로 이름 붙여진 '블록 범위'의 '상수' 선언 시 사용 
const myName;

 

  • 자바스크립트에서 변수를 만드는 것은 변수 선언이라 말한다
  • 같은 범위의 상수 또는 변수의 이름 공유 불가
  • 상수 선언에는 대소문자 모두 사용할 수 있지만 관례적으로 모두 대문자로 사용 함*tip

 

 

#비교

  let var const
  ES6(2015) -  1995 - 2015 ES6(2015) - 
구분 국부적 변수(local variable) 변수(variable) 상수(fixed)
범위(scope) 블록(block-scope) 전 범위(Global scope) 블록(block-scope)
let으로 선언한 변수는 자신을 선언한 블록과 모든 하위 블록을 스스로의 범위로 가짐 let의 범위 + 자신의 선언을 포함하는 함수 상수초기자(initializer) 필요
=선언되는 같은 statement에 값 지정
끌어올리기(Hoisting) 전역 범위 선언에 사용(최상위 범위 선언) 시에도 window 객체에 새로운 속성 추가 X
>선언 전 사용하게 되면 참조 에러(Reference error) 발생		 프로그램 최상위에서 사용할 경우 전역 객체에 속성 추가
>선언 전 변수 사용 가능		 전역 범위 선언에 사용(최상위 범위 선언) 시에도 window 객체에 새로운 속성 추가 X
>선언 전 사용하게 되면 참조 에러(Reference error) 발생
변수
재선언(Re-declaration)		 불가능 가능 / 단 let과 같은 블록 내에서는 불가능 불가능
변수값
재할당(Reassign)		 가능 가능 불가능
초기화 전에 접근 시 일시적 사각지대(TDZ) 적용 Undefined 일시적 사각지대(TDZ) 적용

 

cf) 시간상 사각지대(TDZl Temporal Dead Zone)

  • 초기화 하기 전에는 읽거나 쓸 수 없음
  • 선언 구문에 초기 값을 지정하지 않은 경우 Undefined로 초기화함
  • 초기화 전에 접근 시도 시 Reference Error 발생 

 

그렇다면, 언제 let을 쓰고 언제 const를 써야 할까?

  • const를 써라, 새로운 Array / Object / Function / RegExp를 선언할 때
  • let을 써라, 써야 할 때!

 

#2 할당(Assign)

  • 선언 후, 그러나 할당 전의 변수는 undefined 값을 가진다.
  • 값을 할당하기 위하여 대입 연산자 '='를 사용한다.

 

#2-1. 값 할당(Assign)

myName = 'jihyeon';

 

#2-2. 변수 선언과 값 할당을 한꺼번에 하는 것도 가능하다.

let myName = 'jihyeon';

#2-3. 값 재할당(Reassign)

let myName = "jihyeon";
myName = 'kim';

 

# 식별자(Identifiers) / Names

# 식별자란? variables, keywords, 그리고 functions을 명명하기 위해 사용 되는 자바스크립트 이름

식별자에는 거의 제한이 없지만, 그래도 몇가지 제한이 있다!
한번 알아보자.
  • 이름의 앞에 와야만 하는 것들
    • 영문자 (A-Z or a-z)
    • 달러 표시 ($)
    • 언더바(underscore)
    이름의 앞에 오면 안 되는 것
    • 숫자
    이름으로 사용할 수 없는 것
    • 예약어(reserved word = actual syntax of JavaScript)

 

※ 참고

식별자를 명명할 때 사용할 수 있기는 하지만, 달러표시와 밑줄을 사용하는 경우는 흔치않다.
하지만 프로 프로그래머들 사이에서는,
달러 표시는 자바스크립트 라이브러리의 주요함수에서 가명으로,
밑줄은 프라이빗 변수(private-hidden variables)의 가명으로 관례적으로 쓰인다고 한다

 

 

 

 

 

# 변수값

변수 값에 들어갈 수 있는 데이터 타입? 크게 2가지로 나뉨

유형 변수 값의 데이터 타입 변수값
단일형 단일 변수 단일 데이터 number(숫자형태) / boolean(불리언) / string(문자형)
군집형 단일 변수 여러개 데이터 array(배열)-인덱스 개념
object(객체)-키:밸류 개념

 

좀 더 자세하게 알아보자,

 

data
type		 변수값 설명 예시
단일형

 문자열
(String)		 텍스트.
값이 문자열임을 나타내기 위해 '' "" ``(인용부호) 사용		 let myName = 'jihyeon';
숫자
(Number)		 소수점 있거나 없거나 하나의 유형만 가짐 let myBirthday = 19910506;
불리언
(Boolean)		 True/False 의 두 값만을 가짐 let myVariable = true;
군집형 배열
(Array)		 -여러 값을 하나의 단일 참조(single reference)에 저장할 수 있도록 해주는 구조

-square brackets 사용하여 배열 선언하며 각각의 배열 아이템들(elements)들은 콤마로 구분됨

-배열 안에는 어떠한 값도 들어갈 수 있으나 문자열의 경우 인용부호 별도 작성 필요

-index: 숫자 0부터 시작(zero-based)

-배열에는 값만 저장		 let flowers = ['rose', 'peony', 'tulip', 'lily']; ///index number 0 1 2 3 /* 출력해보자 */ console.log(flowers[2]) >tulip
객체
(Object)		 기본적으로 자바스크립트의 모든 것은 객체.

curly brackets 사용하여 객체선언

기본적으로 key: value(name-value pairs)의 형태이며 각각의 poperties는 콤마로 구분됨.

마찬가지로 value에 문자열 들어갈 경우 인용부호 별도 작성

-객체는 값도 저장하지만 값 안에 이름(color1/color2/color3/)도 정해주는 형태

-객체는 .를 통해 key 식별		 let rose = { color1: 'red', color2: 'yellow', color3: 'pink', } /* 출력해보자 */ console.log(rose.color2); >yellow

 

#출력문 console.log()

 

 

#세미콜론의 사용?

  • 세미콜론은 statement의 끝을 나타냄.
  • 한 줄에 있는 여러 statement를 분리할 필요가 있을 때 반드시 필요.

 

 

 

1-3. 출력문 console.log()

>>console.log() 알기 위해서는객체와 함수라는 개념 이해 필요

()안에 내가 출력하고 싶은 내용 또는 출력하고 싶은 변수 넣음

//브라우저가 만든 모듈이라고 보면 됨(자바스크립트 기본 문법 아님)

 

개발자 도구 콘솔에서 연습 가능

 

 

 

자바 스크립트 잘 하고 싶으면 콘솔로그 눈 감고 칠 정도로 연습해야 함

오른손으로 쉬프트 누르고 9번 0번 누르는 습관

코딩을 잘 하려면  /문법을 잘 해야 하고 / 안 보고 칠 수 있어야 함 /타이핑 빨라야 함

 

 

 

---------------

 

#예약어 (Reserved words)

 

 

 

*자바스크립트 시작

1. 예약어(Reserved words)

 

  • 컴퓨터 프로그래밍 언어에서 이미 문법적인 용도로 사용되고 있기 때문에 식별자로 사용할 수 없는 단어들
  • 프로그래밍 언어 중 의미가 고정되어 있고, 사용자가 작성하는 프로그램 상태에 따라서 의미를 변경할 수 없는 단어.

 

  • 그 언어 특유의 규칙에 따라 의미가 고정되어 있어 프로그램에 사용하는 변수, 상수, 함수명 등으로 쓸 수 없는 명칭.  (만일 이들 예약어를 사용하면 변수와 명령이 구별되지 않기 때문에 프로그램은 제대로 실행되지 않는다.)

 

  • 예약어가 지정 되어 있다는 것은?
  • 그 밖의 명칭을 프로그래머가 자유롭게 사용해도 된다는 뜻이다.

 

 # 자바스크립트 예약어(Reserved words)

abstract arguments await* boolean
break byte case catch
char class* const continue
debugger default delete do
double else enum* eval
export* extends* false final
finally float for function
goto if implements import*
in instanceof int interface
let* long native new
null package private protected
public return short static
super* switch synchronized this
throw throws transient true
try typeof var void
volatile while with yield

*표가 표시된 단어들은 ECMAScript5와 6에서 추가된 예약어들

굵은 글씨로 표시된 단어들은 수업 때 배운 예약어들

연한색상으로 표시된 단어들은 ECMAScript 5/6에서 제거된 예약어들

(그렇다고 해도 변수명으로 쓰지말자. 모든 부라우저에서 ECMAScript 5/6을 완전히 지원하지는 않는다)

--------------

 

 

#자바스크립트 연산자(JavaScript Operators)

  연산자    
대입연산자
(Assignment operator)		 = 변수 값 설정  
산술연산자
(arithmetic operators)		 +    -    *    /    % 값 연산  
연결 연산자(String operator) + 문자열 더하기  
비교 연산자(Comparison operatosr) ==  >  <  >=  <= 두 값을 비교 값을 boolean타입(true/false)으로 반환
논리 연산자 (Logical operators) &&    ||    ! 두 boolean의 확인해서 반환  
Type operators   변수의 유형 확인  
Bitwise operators      

 

1-2. 대입 연산자 (=) : 수학적 의미와 별개

cf) 1=1

수학: 1과 1은 같다

프로그래밍: 1이라는 곳에 1을 집어넣겠다.

 

cf2) x=1 x=2

수학: 거짓이다,

프로그래밍: 인풋이 1이었다가 인풋이 2가 되었다.

 

***연산자(Operators)

1) 대입 연산자

연산자 이름 예시
= Assign operator 
let greeting;
greeting = "hi";
+= Addition assign operator 
let x = 10;
x += 5 ;

console.log(x)
//15출력
-= Subtraction assign operator  
*= Multiplication assign operator  
/= Division assign operator 
let x = 10;
x/= 5 ;

console.log(x)
//2 출력
 
%= Remainder assign operator 
let x = 10;
x % = 5;

console.log(x)
//0 출력
 
**= Exponentiation assign operator  

 

 

2) 산술 연산자 + - * / %

: 앞에 있는 데이터 타입에 따라 연산자 역할이 달라짐(데이터 타입에 자유롭다)

cf) %(나눗셈에서 나머지값 출력)

연산자 이름 예시
+ 더하기(Addition operator)  
- 빼기(Subtraction operator)  
* 곱하기(Multiplication operator)  
** 제곱(Exponentiation operator)  
/ 나누기(Division operator)  
% 나머지(Remainder operator)  
++ 증가(Increment)  
-- 감소(Decrement)  

 

 

3) 연결 연산자

산술연산자 중 + 연산자 를 문자(string)에 사용하는 경우 +연산자가 연결연산자로 사용됨

참고로, 문자열과 숫자를 연결할 경우 데이터 유형은 문자열이 됨

연산자 이름 예시
+ Join 
let greeting = "안녕하세요";
console.log(greeting + '!');     // 안녕하세요! 산출
+=   
let greeting = "안녕하세요"
greeting += "!"

console.log(greeting)
//안녕하세요! 출력
*주의!
자바스크립트는 식을 왼쪽에서 오른쪽으로 구한다.
다른 순서는 다른 결과를 불러 일으킬 수도 있다.

다음의 결과를 비교해보라.

CASE 1. 숫자가 문자의 왼쪽에 오는 경우
let x = 20 + 22 +" HELLO"
console.log(x)

//42 HELLO 출력


CASE 2. 문자가 숫자의 왼쪽에 오는 경우
let x = "HELLO "+ 20 + 22;
console.log(x)

//HELLO 2022 출력​

 

 

 

 

4) 비교 연산자: 두 값을 비교하여 boolean타입(true/false)으로 반환 

연산자 이름 예시 (x = 5 일 때)
=== Strict equality
데이터 값과 유형까지 같아야 함		 
x === 5   //true
x === "5" //false

/*데이터 형식까지 같아야 함*/
== equality 
x == 8   //false
x == 5   //true
x == "5" //true
< Less than 
x < 8 //true
> Greater than 
x > 8 //false
>= greater than or equal   
<= less than or equal  

 

cf) 비교연산자에서 문자열과 숫자를 비교하게 된다면 어떻게 될까?

>자바스크립트는 문자열을 자동으로 치환한다
  • 빈 문자열은 0

  • "숫자"는 숫자

  • "문자"는 NaN
 
//빈 문자열을 0으로 치환
2 == ""		//false
0 == ""		//true

//"숫자" 문자열을 숫자로 치환
2 == "2"  //true
2 > "5" //false

//"문자" 문자열을 NaN으로 치환 > 값이 언제나 false로 산출 // error 아님!
2 == "hi" //false
2 > "good morning" //false

 

 

5) 논리 연산자 ( boolean && boolean) : 두 boolean 값의 확인해서 반환해주는 연산

 

연산자 설명 예시( x =6, y=3일 때)
&& logical AND
두 값모두 true 여야 true		 
(x < 10 && y > 1) //true
(x < 10 && y = 1) //false
|| logical OR
하나가 true이면 true		 
(x == 5 || y == 5) // false
(x == 5 || y == 3) // true
(x == 5 || y === "3") // false
! logical NOT operator 
!(x == y) //true
console.log(true) //true
console.log(!true) //false

 

**if문(조건문)

: 다른 조건(True/False)에는 다르게 처리하고 싶을 때 사용

if( /*불리언*/ ){ /*불리언이 true 일 때 실행*/}
else{ /*불리언이 false일 때 실행*/ }

 

 - 코드 블럭 ? 중괄호 안에 있는 내용

:코드 블럭 안에 있는 내용은 실행될 수도 있고 실행 안 될 수도 있음

;코드 개발자의 설정에 의존

 

따라서,

 

if(1 > 2) {
	console.log('참');	//true일 때만 실행되는 영역
    }					//false일 때 실행될 영역 미작성
    
    //작성 시 콘솔창에 아무것도 나오지 않음

 

 

즉, 조건문에서 조건 부합하지 않을 경우 실행 X

if (1 > 2){
	console.log('참');
    } else	{
    console.log('거짓');
    }
    
    //작성 시 콘솔창에 거짓 산출

 

 

 

for

Creates a loop that consists of three optional expressions, enclosed in parentheses and separated by semicolons, followed by a statement executed in the loop.

 

*for문(반복문)

하기 위해서:변수선언 할 줄 알아야 함/boolean 개념 숙지/비교연산자숙지/산술연산자

 

for(변수 선언; boolean; 산술연산자){}

for(let i =0; i<10; i++){console.log(i)}

 

 

 

배열 객체 가장 많이 쓰임

let, const

연산자

데이터타입

예약어

조건문

조건문

반복문

 

 

 

댓글

티스토리툴바