JavaScript 자바스크립트 기본 문법 및 핵심 개념정리

세미콜론

자동으로 세미콜론이 붙여짐.

다만 한줄로 console.log 를 출력하고자 할때는 ' ; '를 사용해야 한다.

 

주석 (코멘트)

JS에는 // 를 사용하여 주석처리를 한다.

 

① 어떤 의도로 코드가 작성 되었는지 설명

② 코드가 어떤 동작을 하는지 작성할때

// console.log(1 + 1);             1. 주석 처리된 모습

/* 안녕하세요
	저는 hyogi 입니다. */      // 2. 주석 처리된 모습

 

자료형 (Data type)

숫자 (Number) 

    정수 (integer) : -1 -3 0 1 5

    소수 (floating point) : 5.1, -4.3, 2.2

 

 문자열 (String)

    "Hello", 'Helloworld'

 

불린 (Boolean)

    True, False

 

추상화

여러가지 사물이나 개념에서 공통되는 특성이나 속성 따위를 추출하여 파악하는 작용

복잡한 것들을 목적에 맞게 단순화하는 것

  ▶ 구체적 정보 → 꼭 필요한 핵심

 

변수

값을 담기위한 상자

// 변수 선언 
let applePrice;   // 변수 이름 applePrice
applePrice = 3000;

// let applePriice = 3000; 이렇게도 가능

console.log(applePrice);

 

작명 가이드

ⓛ 문자 (a-z, A-Z), 밑줄(_), 달러 기호($) 로 시작해야 함.

두 번째 글자부터 숫자(0-9) 가능

 

② 대문자, 소문자 구분

 

③ 예약어 불가능

 

④ camelCase 사용하면 좋음

(변수명은 띄어쓰기가 불가능하므로 첫 번째 글자는 소문자하고 띄어쓰기 부분을 대문자로 표기)

 

함수

// 함수 선언
function startWorld() {
    console.log('Helloworld');
    
};

//함수 호출
startWorld()   // Hellowolrd

 

매개변수 (Parameter)

// 함수 선언
function startWorld(sayHello) {
    console.log(sayHello)  // hola
};

//함수 호출
startWorld('hola')



// 함수 선언
function startWorld(sayHello) {
    console.log('안녕! ' + sayHello)  // 안녕! hola
};

//함수 호출
startWorld('hola')



// 여러개의 파라미터

// 함수 선언
function multi(a, b) {
    console.log(a * b)  // 6
};

//함수 호출
multi(2, 3)

 

return 문

return 이 나오면 함수가 중단된다.

function loveMe() {
  return 'Love';  // Love 반환
}

console.log(loveMe())

 

숫자형

// 나머지
console.log(1 % 2);  // 1
// 더하기
console.log(1 + 2);  // 3
// 빼기
console.log(1 - 2);  // -1
// 곱하기
console.log(1 * 2);  // 2
// 나누기
console.log(1 / 2);  // 0.5
// 제곱
console.log(1 ** 2);  // 1

// 기본적인 사칙연산의 규칙을 적용함
console.log(( 1 + 2 ) / 1);  // 3

 

문자열 기본

// 문자열 형태
console.log('hyogi');  // hyogi

 

문자열 활용

// 문자열 활용
console.log('I\'m hyogi');  // I'm hyogi
console.log("I'm hyogi");  // I'm hyogi
console.log('\"I\'m hyogi\"');  // "I'm hyogi"
console.log(`"I'm hyogi"`);   // "I'm hyogi"

console.log('hello' + 'hyogi');   // hellohyogi
console.log('5' + '1');   // 51

 

불 대수

일상적인 논리를 수학적으로 표현한 것 ( True, False )

불 대수의 연산 : AND, OR, NOT

 

AND : X와 Y가 모두 참일 때만 참

OR : X와 Y중 하나라도 참이면 참

NOT : 반대로 뒤집어 줌

 

명제 : 참과 거짓이 확실한 문장

console.log(1 > 4);   // false
console.log(4 > 1);   // true
console.log(4 === 4);  // true
console.log(2 !== 2);   // false (같지 않으면 참)
console.log(true && true);  // true
console.log(true || true);  // true
console.log(!true);  // false

 

typeof 연산자

내가 사용하는 값이 어떤 자료형인지 확인

// typeof 연산자
console.log(typeof 'hyogi');  // string
console.log(typeof 1);   // number (★ JS에서는 정수와 소수 구분이 없음)
console.log(typeof 1.0);  // number (★ JS에서는 정수와 소수 구분이 없음)

console.log(typeof 'hyogi' + 'name');    // stringname
console.log(typeof 1 + 2);  // number2
console.log(typeof (1 + 2));  // number (연산의 우선순위를 고려해야함)

 

연산자 우선순위

NOT → typeof → 사칙연산 → 부등호 → 일치 ==, 불일치 !== → AND → OR → =

 

형 변환

console.log('2' + '1'); // 21
console.log(2 + 1);   // 3

// String, Number, Boolean
console.log(Number('2') + Number('1'));  //3
console.log(String(1) + String(2));  // 12

// 숫자가 아닌값은 NaN으로 표시된다.
// 불린은 '' 와 NaN 같은 빈 문자나 숫자의 경우 0인 경우 false 반환한다.



// JS은 자동 형변환이 되어 유연하다.
console.log('1' - true);   // 0
console.log(1 + '2');  // 12 ★ 1이 '1'문자열로 변환
console.log(2 / '2');  // 1
console.log(1 - true);  // 0
console.log('1' ** true);  // 1
console.log(3 % 'one');  // NaN


// 관계 비교 연산은 대부분 숫자형으로 바뀐다.
console.log('two' >= 1);  // ★ false 비교가 불가능하면 false가 나옴


// 같음 비교 연산 (===, !==, ==, !=)
// 일치, 불일치(!==) ★ 형변환이 일어나지 않음(일치, 불일치를 쓰는게 안전함)
console.log(2 === '2');   // false

// 동등, 부등(!=) ★ 형변환이 일어남
console.log(2 == '2');    // true

 

템플릿 문자열

일정한 틀, 형식

let name = 'hyogi';
let age = 25;

console.log('이름은' + name + '나이는' + age);   // 이름은hyogi나이는25

// 템플릿 문자열 사용
console.log(`이름은 ${name} 나이는 ${age}`);    // 이름은 hyogi 나이는 25
// 변수 뿐만 아니라 '함수'도 받아와서 활용 가능

 

null과 undefined

null : 의도적으로 표현할 때 사용하는 값

undefined : 값이 없다는 것을 확인하는 값

// undefined
let hyogi;  // 변수에 값이 없음
console.log(hyogi);

hyogi = null; // 의도적으로 없다는 걸 알려줄때
console.log(hyogi);

console.log(null == undefined);  // true
console.log(null === undefined);  // false 

// null대신에 undefined 쓸수도 있지만 안쓰는것이 좋다.

 

할당 연산자 (Assignment operators)

let name = 'hyogi';
let num = 1;
num = num - 1;   // 할당 연산자(오른쪽 식을 왼쪽에 대입했다)
console.log(num);  // 0

 

복합 연산자

할당 연산자를 더 간단하게 쓸 수 있게 해줌

// 같음
num = num + 2;
num += 2;

// 같음
num = num + 1;
num += 1;
num ++;

 

return과 console.log의 차이

function printNum(x){
	console.log(x + x);    // return을 안쓰면 undefined가 출력함
}

function getprintNum(x){
	return x + x;  // 함수를 실행하고 값을 출력
}

console.log(printNum(3));   //undefined

 

옵셔널 파라미터

파라미터가 있는 함수값에 아무것도 호출하지 않으면 undefined 값을 호출함

function nameIntro(name, age = 3){  // 파라미터에 값을 넣은 경우 = 옵셔널 파라미터
	console.log(`제 이름은 ${name}`);
    console.log(`나이는 ${age}`);
}

nameIntro('hyogi', 4);    // 제 이름은 hyogi 나이는 4  (값을 모두 전달)
nameIntro('hyogi');      // 제 이름은 hyogi 나이는 3  (파라미터 값을 생략)

// ★ 옵셔널 파라미터는 가장 뒷쪽으로 선언을 해줘야 한다.

 

변수의 scope

변수는 유효한 볌위가 있는데 볌위를 벗어나면 오류가 발생함

function myName() {  // 블록문
	let x = 200;
    console.log(x);     // 지역변수 (local)변수
}

myName();
console.log(x);  // 오류 (함수안에 x가 선언되어있기 때문에)



let x = 200;    // 전역변수 (global)변수

function myName() {   // 블록문
    console.log(x);
}

myName();
console.log(x);  // 200 오류 없이 출력이 잘됨

 

상수 (Constant)

변하지 않고 일정한 값

 

① 변수를 선언하는 let 대신에 const를 사용.

② 한번 const로 상수를 선언하면 변경할 수 없음.

③ 상수는 모든 단어를 대문자로 쓰는 규칙이 있음.

const PI = 3.14;    // 3.14는 원주율 이기때문에 변하지 않음
let radius = 5;

console.log(PI * radius);   // 15.700000000000001

 

if 문

let num = 1;

if (num <= 3){   // 조건이 맞으면
	console.log("확인")   // 확인 출력

}else {  // if 조건이 틀리면 else
	console.log("비확인")
}

 

else if

let num = 5;

if (num <= 3) {
	console.log("확인")

} else if (num <= 5) {     // 가독성이 좋아짐
	console.log("비확인")     // 비확인 출력
} else if ( ... )   // 계속하여 조건 적용 가능

 

스위치(Switch) 문

어떤 값을 입력하는지에 따라 다르게 동작함

 

스위치문과 if문의 차이

▶ 넓은 범위를 만족하는 조건식을 만들때 if

▶ 특정 값을 일치하는 조건을 만들때 switch

 

스위치문 주의점

▶ switch문은 암시적 형 변환을 허용하지 않는다. (자료형을 엄격하게 구분)

let x = 2  // case 숫자를 뜻함

switch ( x ){    // 비교할 값
	case 1:
    	console.log('o');
        break; // 나감 ( 꿀팁 : 한번에 같은 단어 선택할때 ctrl + d )
        
    case 2:
    	console.log('x');    // x 출력
        break;
        
    default:   // 위 조건에 아무것도 해당하지 않을 때 (생략가능)
    	break;
        
}

 

for 문

반복문 (loop statement)

 

▶ 초기화부분 i = 0, 동작부분 i++ 생략 가능하지만 세미콜론은 생략 불가능

for (i = 0; i <= 10; i++) {  // 변수 i는 로컬변수이다. 외부에서 사용불가능
	console.log(`${i} hyogi`);    // 0 ~ 10 hyogi가 10번 반복됨

}

 

while 문

반복문 (loop statement)

 

▶ 전역변수를 사용하고 반복문이 종료된 다음에도 변수를 사용해야 할때는 while문을 활용하는것이 좋다.

let i = 1;

while (i <= 10) {
	
    console.log('hyogi');   // hyogi * 11 출력
	
    i++;
}

 

break와 continue

break

▶ 코드의 흐름에서 빠져나온다.

 

continue

▶ 실행중인 부분을 건너뛰고 다음동작을 실행

// break 문

let i = 1;

while (i <= 10) {
	
    console.log('hyogi');    // hyogi가 3번 반복함.
    
	if (i === 3) {  // i가 3이면 코드흐름에서 빠져나옴
    	break;
    }
    
    i++;
}




// continue

let i = 1;

while (i <= 10) {
	
	if (i % 2 === 0) {  // i가 2로 나눠떨어질때
    i++;	
    continue;
    }
    
    console.log(i);    // 1, 3, 5, 7, 9 출력 (홀수)
    i++;
  }

 

본 포스팅은 codeit; 스터디를 하며 요약했으며
강의에 있는 예제를 저자가 알아보기 쉽도록 변경하여 포스팅 했습니다.