Javascript : 기초 문법

2021. 12. 29. 04:16Front-end

반응형

태어나서 처음으로 코딩을 배운지 2~3일이 지났다.

스파르타코딩클럽에서 항해99를 하고있는데

음... 쉽지않다.

아니 처음에는 쉬운줄 알았다. 

html과 css까지는 괜찮았다.

하지만

자바스크립트를 시작하자마자 갑자기 머리가 띵했다.

함수, 변수, 조건문, 반복문...

음 잘 모르겠다. 

강의를 들어도 잘 모르겠다.

나... 어떡하지...?

나중에 혹시 필요할까봐 밑에 적어놓는다. 나를 힘들게 만들었떤 1주차 14강의시간...

일단! 넘어가보자~

함수

기본 생김새

// 만들기

function 함수이름(필요한 변수들) {

내릴 명령들을 순차적으로 작성

}

// 사용하기

함수이름(필요한 변수들);

 

예시

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

function sum(num1, num2) {

console.log('num1: ', num1, ', num2: ', num2);

return num1 + num2;

}

 

sum(3, 5); // 8

sum(4, -1); // 3

   

조건문

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

function is_adult(age){

if(age > 20){

alert('성인이에요')

} else {

alert('청소년이에요')

}

}

 

is_adult(25)

 

if, else if, else if, else if else

function is_adult(age){

if(age > 20){

alert('성인이에요')

} else if (age > 10) {

alert('청소년이에요')

} else {

alert('10살 이하!')

}

}

 

is_adult(12)

 

AND 조건과 OR 조건!

// AND 조건은 이렇게

function is_adult(age, sex){

if(age > 20 && sex == '여'){

alert('성인 여성')

} else if (age > 20 && sex == '남') {

alert('성인 남성')

} else {

alert('청소년이에요')

}

}

 

// 참고: OR 조건은 이렇게

function is_adult(age, sex){

if (age > 65 || age < 10) {

alert('탑승하실 수 없습니다')

} else if(age > 20 && sex == '여'){

alert('성인 여성')

} else if (age > 20 && sex == '남') {

alert('성인 남성')

} else {

alert('청소년이에요')

}

}

 

is_adult(25,'남')

 

반복문

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

console.log(0)

console.log(1)

console.log(2)

console.log(3)

console.log(4)

console.log(5)

...

console.log(99)

 

// 이렇게 쓰기엔 무리가 있겠죠? 그래서, 반복문이라는 것이 존재합니다!

 

반복문을 이용하면 아래와 같이 단 세줄로, 출력할 수 있습니다.

for (let i = 0; i < 100; i++) {

console.log(i);

}

 

for (1. 시작조건; 2. 반복조건; 3. 더하기) {

4. 매번실행

}

 

1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3

-> 2체크하고 -> (괜찮으면) -> 4 -> 3

-> 2체크하고 -> (괜찮으면) -> 4 -> 3

-> 2체크하고 -> (괜찮으면) -> 4 -> 3

 

와 같은 순서로 실행됩니다.

i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옵니다.

 

그러나 위처럼 숫자를 출력하는 경우보다는, 반복문은 주로 리스트와 함께 쓰입니다.아래 예시를 볼까요? 일단 아래를 복사 붙여넣기 하고, 함께 코딩해볼게요

[코드스니펫] 반복문 예제1

let people = ['철수','영희','민수','형준','기남','동희']

 

let people = ['철수','영희','민수','형준','기남','동희']

 

// 이렇게 하면 리스트의 모든 원소를 한번에 출력할 수 있겠죠?

// i가 1씩 증가하면서, people의 원소를 차례대로 불러올 수 있게 됩니다.

for (let i = 0 ; i < people.length ; i++) {

console.log(people[i])

}

 

리스트도 그냥 리스트가 아닙니다! 딕셔너리가 들어간 리스트와 찰떡이죠다시 아래를 복사 붙여넣기 해볼까요?

[코드스니펫] 반복문 예제2

let scores = [

{'name':'철수', 'score':90},

{'name':'영희', 'score':85},

{'name':'민수', 'score':70},

{'name':'형준', 'score':50},

{'name':'기남', 'score':68},

{'name':'동희', 'score':30},

]

 

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++) {

console.log(scores[i]);

}

 

// 이렇게 하면 리스트 내의 딕셔너리를 하나씩 출력할 수 있고,

 

for (let i = 0 ; i < scores.length ; i++) {

if (scores[i]['score'] < 70) {

console.log(scores[i]['name']);

}

}

 

// 이렇게 하면 점수가 70점 미만인 사람들의 이름만 출력할 수도 있습니다.

 

 

반응형