Javascript 기초문법

자바스크립트란?

자바스크립트는 프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어이다.

바닐라 자바스크립트란?

바닐라 자바스크립트(Vanilla JS)란 프레임워크 또는 라이브러리가 적용되지 않은 순수한 자바스크립트를 뜻한다.

자바스크립트의 기초문법 중 함수, 조건문, 반복문 을 알아보자.

함수(function)

함수(function)란 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록을 의미한다.

이러한 함수는 필요할 때마다 호출하여 해당 작업을 반복해서 수행할 수 있다.

function addNum(x, y) {

    return x + y;

}

document.write(addNum(2, 3));

자바스크립트에서 블록이란 함수나 실행문의 중괄호({})로 묶여진 부분을 가리킵니다.

JS 속 함수의 정의

자바스크립트에서 함수의 정의는 function 키워드로 시작되며, 다음과 같은 구성요소를 가진다.

1. 함수의 이름
2. 괄호 안에 쉼표(,)로 구분되는 함수의 매개변수(parameter)
3. 중괄호({})로 둘러싸인 자바스크립트 실행문

문법

function 함수이름(매개변수1, 매개변수2,...) {
    함수가 호출되었을 때 실행하고자 하는 실행문;
}

두 숫자를 입력받으면 더한 결과를 돌려주는 함수

function sum(num1, num2) {
	console.log('숫자', num1, num2);
	return num1 + num2;
}
sum(3, 5); // 8
sum(4, -1); // 3

조건문(condition)

조건문이란 특정한 조건 아래서만 코드가 실행되게 하는 구문이다.

조건문에는 if가 대표적.

20 보다 작으면 작다고, 크면 크다고 알려주는 함수

<script>
function is_adult(age){
	if(age > 20){
		alert('성인이에요')
	} else {
		alert('청소년이에요')
	}
}
is_adult(25)
</script>

위 예시에서는 '성인이에요' 로 반응

if, else if, else if, else if else

<script>
function is_adult(age){
	if(age > 20){
		alert('성인이에요')
	} else if (age > 10) {
		alert('청소년이에요')
	} else {
		alert('10살 이하!')
	}
}
is_adult(13)
</script>

위 예시에서는 '청소년이에요' 로 반응

홀수짝수

<script>
    let count = 1;
    function hey() {
        if (count % 2 == 0) {
            alert('짝짝짝👏');
        } else {
            alert('홀홀홀🎅');
        }
					count += 1;
    }
</script>

반복문(iteration statements)

반복문이란 프로그램 내에서 똑같은 명령을 일정 횟수만큼 반복하여 수행하도록 제어하는 실행문이다.

프로그램이 처리하는 대부분의 코드는 반복적인 형태가 많으므로, 가장 많이 사용되는 실행문 중 하나.

자바스크립트에서 사용할 수 있는 반복문의 형태는 다음과 같다.

1. while 문
2. do / while 문
3. for 문
4. for / in 문
5. for / of 문

for문

대표적인 반복문인 for문의 구조

for문을 사용하기 위해서는 조건이 3개 필요하다.

for(변수 초기화(시작점); 조건식(도착점 및 반복 횟수); 증감식(보폭)) {
	조건식이 true일 때 실행되는 구현부
}

순서대로 변수 초기화, 조건식, 증감식이 들어가는데 이 식들은 세미콜론(;)으로 구분지어서 사용한다.

예시

<script>
for(int i = 0; i < 5; i++) {
	num++;
    System.out.println(num);
}
</script>

결과) 1, 2, 3, 4, 5
num이라는 변수를 1씩 증가시켜서 출력한다.

예를 들어 0부터 99까지 출력해야 하는 상황이라면!



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

*70점 이상인 이름 찍기

<script>
let scores = [
    {'name': '철수', 'score': 90},
    {'name': '영희', 'score': 85},
    {'name': '민수', 'score': 70},
    {'name': '형준', 'score': 50},
    {'name': '기남', 'score': 68},
    {'name': '동희', 'score': 30},
]
for (let i = 0; i < scores.length; i++) {
    if (scores[i]['score'] > 70) {
        console.log(scores[i]['name'])
    }
</script>