Javascript 기초 문법 2 (feat. 함수, 조건문, 반복문)

변수, 자료형은 한번 다뤄보았고! 이제 함수, 조건문, 반복문이 남았다.

오늘도 여전히 개발자 도구의 console창을 띄운 뒤에 시작할꺼다.

 

함수

함수부터 다뤄보자.

내가 아는 함수는 값을 넣으면 값이 나오는 것. 프로그래밍에서의 함수는 정해진 동작을 입력하면 그 동작을 하는 것이다.

 

console창에 입력해보자.

function sum(num1, num2){
    return num1+num2
}

sum은 함수의 이름이다. 임의로 정한 이름.

풀이해 보자면 num1, num2라는 변수를 받아서 그것을 더한 값을 return해라.

함수에서의 return은 작업을 긑내고 나를 변신시켜줘! 라는 말이다.

 

어떻게 활용을 하는 것인가?

let result = sum(2,3)

해당 문구를 입력하면 다음 화면이 나온다. (추가로 result라는 값도 재차 확인해봤다)

어떻게 동작하는지 차근차근 풀이해보자.

result에 sum(2,3)을 담았는데, 그 전에 sum이라는 함수를 만들었다.

그럼 우리가 입력한

let result = sum(2,3)

에서 2가 num1에 들어가고, 3이 num2에 들어간다.

 

그러면 sum(num1, num2)라는 함수는 return num1+num2, 즉 num1+num2값으로 변신시켜줘!

라는 말이 되겠지? num1이 2였고, num2가 3으로 입력했으니, 2+3라는 값으로 변신시켜줘!

그러므로 5라는 값이 도출되는 것읻다.

 

이번에는

function mysum(num1, num2){
    alert('Hello!')
    return num1+num2
}

위와 같이 입력했다.

 

이어서

let result2 = mysum(2,3)

라고 입력한 뒤 살펴보자.

 

아무런 값이 없다? 아니다. 우린 위에 추가로 mysum이란 함수에 alert를 사용했꼬, 이것은 경고창을 띄우는 명령이라고 앞서 배운적 있다. 그럼 해당 페이지로 가보면?

이렇게 alert('Hello!')라고 입력한 동작인 Hello!가 포함된 경고창이 나오게 된다.

 

풀이를 해보자.

result2에 mysum(2,3)을 담았고, mysum(num1, num2)이라는 함수를 만들었었다.

mysum(num1, num2)이라는 함수는 alert('Hello!')라는 명령으로 'Hello!'라는 경고창을 띄운 뒤 num1+num2의 값으로 변신시켜준다.

 

즉, 경고창이 뜨고나서 num1 = 2, num = 3이니까 2+3인 5로 변신시켜준다. 그렇게 경고창 이후에 result2 = 5가 된다.

 

mysum함수를 변형시켜서 조금 더 살펴보자.

return을 지워버린 뒤 실행해보자.

function mysum(num1, num2){
    alert('Hello!')
}

mysum(4,5)라고 입력하니 경고창이 뜬다. 위에 우리는 함수에 어떤 숫자를 넣든 경고창이 뜨도록 만든 것이다.

명령이 경고창만 띄우라는 내용만 포함하고 있어서 경고창을 띄운 뒤 끝이다.

 

한번 더 해보자. 다음처럼 함수를 변경해 볼꺼다.

function mysum(num1, num2){
    alert('first!'+num1)
    alert('second!'+num2)
}

이후 특정 숫자를 넣어 함수를 실행해보자.

10, 15를 입력해서 실행했다. 여기서 확인을 누르면?

경고창을 2번 띄우라고 했고, 첫번째 경고창에는 'first!'+num1 이라는 메세지를, 두번째 경고창에는 'second!'+num2라는 메세지를 띄워 달라고 명령을 내렸다. 그렇게 mysum(10,15)라고 입력하자?

첫번째 경고창에는 "first!10"

두번째 경고창에는 "second!15"

이렇게 나타나는 것이다.

 

이것이 함수다!

 

---

조건문

이제 조건문! If문! 을 학습할꺼다.

age라는 값에 90을 담아보자

let age = 90

그리고 다음과 같이 입력하자.

if (age > 20) {
    console.log('성인')
} else {
    console.log('미성년')
}

 

풀이는 만약 age가 20보다 크면? '성인'이고. else, 즉 아니면? 미성년이다.

근데 우리는 age에 90을 넣어놨다. 90은 20보타 크니까 성인이라고 뜨겠지?

 

성별도 넣어보자.

let sex = ‘남성’

 

그리고 다음처럼 입력한다.

if (age > 20 && sex == '남성') {
    console.log('성인 남성')
} else {
    console.log('미성년')
}

&&는 이건 and라는 뜻이며, ==는 같다면 이라는 뜻이다.

그러므로 풀이는 만약~ age가 20보다 크고, 성별이 남성이면! '성인 남성'이고. 그게 아니라면 미성년이다.

결과값을 볼까?

&& 가 and라고 배웠다. 그럼 or 는?

|| 이다. (Shift를 누른상태로 backslash 2번)

버티컬 바(Vertical Bar)라고 부른다.

보통 back-space밑에 원(￦)모양 자판을 누르면 나오는게 백슬래쉬, 역슬래쉬인데, 이를 shift를 누르고 입력하면 된다.

 

하나 더 해보자.

if (age > 20) {
    console.log('성인')
} else if (age > 7){
    console.log('미성년')
} else {
    console.log('아동')
}

우리는 age = 90 이라는 값을 넣었끼에 당연히 성인이라고 뜨겠지만.. 풀이를 해보자.

만약 age가 20보다 크면 '성인'인데, 그렇지 않고 만약 7보다 클 경우엔 '미성년'이다 (20보다 작지만 7부터 크면이라고 해석 할 수 있겠다). 그것도 아니라면 '아동'이다.

 

---

반복문

이제 반복문이다. 예를 먼저 들어보자.

 

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

우리는 어떻게 입력해야 할까?

console.log(0)
console.log(1)
console.log(2)
console.log(3)
console.log(4)
console.log(5)
console.log(6)
…
console.log(99)

위처럼 100줄을 적어 내려가야 한다. 얼마나 비효율적인가?

 

이럴 때 반복문을 쓰면 편하다.

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

라고 입력하고 화면을 살펴보자.

 

무슨 말이냐? i는 0부터, i가 10보다 작을때는, i가 하나씩 높아진다. 이런 의미다.

 

좀 더 자세히 적어보자면

for (시작조건; 반복조건; 더하기) {
    매번실행
}

이런 형태라고 볼 수 있다. 시작 조건을 1, 반복조건을 2, 더하기를 3, 매번실행을 4라고 명명한다면.

1 -> 2를 체크 -> (괜찮다면) -> 4 -> 3
-> 2를 체크 -> (괜찮다면) -> 4 -> 3
-> 2를 체크 -> (괜찮다면) -> 4 -> 3
-> 2를 체크 -> (괜찮다면) -> 4 -> 3

이런 순서로 반복되어 실행된다.

 

i가 1개씩 더해지니 계속 진행하다 반복조건에 맞지 않으면, 반복을 종료하고 빠져나온다.

즉, 반복조건이 i < 10; 이기에 9까지만 실행되고 종료되는 것이다.

 

프로그래밍 언어에서 반복문을 배울때 변수명을 보통 i나 j, k 등으로 사용한다.
그 이유는 포트란(Fortran)의 영향을 받아서 생긴 관습이다. Fortran은 공학용 수치 계산에 많이 사용된 아주 인기있는 언어였다. (1950년대에 개발되서 1980년대까지 많이 쓰였다고 한다)
이 Fortran에서 변수를 선언할 때, I부터 N까지의 변수는 따로 선언을 하지 않아도 정수(integer)로 취급하는 특징을 갖고 있다고 한다. I부터 N은 interger의 맨앞 2글자를 따온 것이다.
그 이후로, 많은 프로그램에서, loop에 index로 사용하는 변수는 그냥 i부터 시작하는 관행이 생겼다고 한다.

 

그러나 이런 예시처럼 숫자를 출력하는 경우보다는, 반복문은 주로 리스트와 함께 쓰인다.

다음을 입력해보자.

let people = ['희원','혁이','토마스','마이클','대희','매튜']

people에 list값을 담았다.

 

여기서 다음과 같이 입력하면 해당 리스트의 길이가 나온다.

People.length

6이군.

 

그리고 다음을 입력한다.

for (let i = 0; i < people.length; i++) {
    console.log(people[i])
}

짜잔! 풀이를 해보자.

반복조건이 i < people.length; 로 바뀌었다. 즉 i < 6 이라는 말이 된다.

이후 출력을 console.log(people[i]) 로 바꿔서 people에 담겨져있는 값을 실행하도록 했다.

그러니 list에 담겨져 있는 이름이 순서대로 나온다.

 

다른 예시를 한번 더 해보자. 더 자주 쓰는 패턴이다.

let scores = [
	{'name':'희원', 'score':95},
	{'name':'혁이', 'score':80},
	{'name':'토마스', 'score':77},
	{'name':'마이클', 'score':45},
  	{'name':'대희', 'score':55},
  	{'name':'매튜', 'score':20},
]

이렇게 내용을 담았을 때

 

scores[0]은 무엇일까? 즉 scores의 처음은 뭐라고 도출될까?

희원의 95점이라는 점수가 출력된다.

 

scores[3]은 무엇일까? 즉 scores의 네번째는 뭐라고 도출되나?

마이클과 마이클의 점수!

 

그렇다면 scores[2]['score'] 는?

세번째인 토마스의 score이니까 77!

 

이걸 반복문으로 응용해보자.

for (let i = 0; i < scores.length; i++) {
    console.log(scores[i])
}

이렇게 입력하면? 딕셔너리가 하나씩 나오겠지?

 

name을 순서대로 반복되게 하고 싶다면?

console.log(score[i])를 console.log(scores[i]['name'])로 바꿔주면 되겠다.

for (let i = 0; i < scores.length; i++) {
    console.log(scores[i]['name'])
}

 

다음과 같이도 가능하다.

for (let i = 0; i < scores.length; i++) {
    let name = scores[i]['name']
    let score = scores[i]['score']
    console.log(name,score)
}

name에 scores[i]['name']을 담았고

score에 scores[i]['score']를 담았다.

이후 name,score라고 출력하게 되면?

짜잔, 보기 한결 더 편해졌다.

 

여기에 조건문(if)를 넣고 싶다면?

만약 score가 70점 미만인 친구들을 name,score라고 출력되게 하려면?

for (let i = 0; i < scores.length; i++) {
    let name = scores[i]['name']
    let score = scores[i]['score']
    if (score < 70) {
        console.log(name,score)
    }
}

성공!

 

마지막에 해본것이 가장 많이 등장하는 패턴의 형식이라고 한다. 저 모양을 기억해보도록 하자!

 

---

 

---