자바스크립트 개념편 Part 1 (반복문, Array 변형, 데이터타입, 조건문)

 

이 글은 Asabeneh의 30 Days of Javascript를 따라 공부하면서 작성했습니다.

덕질코딩: Basic Javascript with BTS (Part 1 of 2)

방탄을 좋아하고 자바스크립트를 배워보고 싶으면 잘 오셨습니다.

방탄 맥락에서 자바스크립트의 기초를 배워봅니다. 이 코스를 한바퀴 돌고나면 자바스크립트 허-접 수준은 벗어날 수 있을거예요.

 

 

준비물:
방탄 기본 상식 (없어도 알아보고자 하는 관심만 있어도 충분합니다), 인터넷에 연결된 컴퓨터, 손가락 (혹은 키보드를 누를 수 있는 무언가)

수업방식:
자바스크립트도 결국 언어의 하나일 뿐이에요. 방탄에 대한 어느 한 문장을 자바스크립트로 번역해볼겁니다.

 

이번편 Takeaway:

1. 기본적인 반복문 쓰기
2. 기본적인 메소드를 써서 Array를 변형하는 방법
3. 기본적인 데이터타입
4. 기본적인 조건문 쓰는 방법 

준비됐니

 

---

1. 방탄소년단 멤버는 누구인가요?

방탄에는 진, 뷔, 정국, 슈가, 제이홉, RM, 지민이 있습니다.

In [1]:

const bts=['진','뷔','정국','슈가','제이홉','RM','지민']

Out[1]:

undefined

 

해설:

변수를 선언할 건데, 그 변수 이름을 bts라고 할 거고, 그 안에는 진, 뷔, 정국... 등이 있습니다.

const로 선언하는 이유는, bts 멤버가 바뀌지 않기 때문이에요. 만약에 방탄 멤버가 바뀔 여지가 있다면 let으로 선언해주면 됩니다.

bts 멤버가 여러명이기 때문에 [] 요 안에 넣어주는데, 자바스크립트에선 이 리스트를 Array라고 부릅니다.

In [2]:

console.log(bts)

 

[
  '진',     '뷔',
  '정국',   '슈가',
  '제이홉', 'RM',
  '지민'
]

 

 

변수에 대해선 우선 요정도 성질을 알아두면 좋아요.

1. let으로 변수를 선언하면 값을 overwrite할 수 있습니다.
2. 서로 다른 변수는, 같은 값을 가지고 있어도 서로 다릅니다.

In [3]:

let bts2=['진','뷔','정국','슈가','제이홉','RM','지민']
bts2[0]='탄이'
//bts 첫번째 멤버를 '탄이'로 교차합니다.
console.log(bts2)

 

[
  '탄이',   '뷔',
  '정국',   '슈가',
  '제이홉', 'RM',
  '지민'
]

 

In [4]:

//여러 변수를 한꺼번에 선언할 땐 콤마로 이어줘도 괜찮아요.
const bts3=['진','뷔','정국','슈가','제이홉','RM','지민'],
      bts4=['진','뷔','정국','슈가','제이홉','RM','지민']
console.log(bts3==bts4)

 

false

 

 

2. 방탄은 몇명인가요?

방탄은 7명이에요.

 

Array에 들어있는 아이템의 개수를 세기 위해선 length를 쓰면 됩니다. 이런식으로, 어떤 변수 (bts)에 무언가 명령어를 붙여 이 변수에 대한 뭔가를 알아낼 수 있는데, 이런 명령어를 method 메소드라고 불러요. length는 메소드인거죠.

In [5]:

console.log(bts.length)

 

7

 

 

3. 방탄 멤버를 한명 한명씩 알려줄 수 있나요?

진, 뷔, 정국, 슈가, 제이홉, RM, 지민

 

Array안에 들어있는 아이템들의 순서는 [] 안에 숫자를 넣어 표시합니다. 컴퓨터는 첫번째를 1이 아니라 0으로 생각한다는 것을 잊지마세요!

In [6]:

console.log(bts[0])
console.log(bts[1])
console.log(bts[2])
console.log(bts[3])
console.log(bts[4])
console.log(bts[5])
console.log(bts[6])

 

진
뷔
정국
슈가
제이홉
RM
지민

 

 

(번외) 그럼 이것도 알아낼 수 있을까요? 방탄소년단의 마지막 멤버는 누구인가요?

In [7]:

console.log(bts[bts.length-1])

 

지민

 

 

잠시만요. 뭔가 반복되고 있지 않나요? console.log(bts[*]) 여기만 바꿔서 쓰면 간단할 것 같네요. 이렇게 반복되는 것을 내가 일일이 쓰지 않고, 컴퓨터에게 시킬 수 있는 방법이 있어요.
loop라고 하는데요. loop를 쓰면 위에 길게 쓴 코드를 줄여 동일한 값을 얻을 수 있어요. 일종의 paraphrasing!?인거죠.

In [8]:

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

 

진
뷔
정국
슈가
제이홉
RM
지민

 

 

해설:

어떤 루프를 만들거고, {} 안에 있는 내용을 반복할겁니다. 반복문에선 크게 3가지를 설정해줘야하는데요

1. 시작점: 0부터 시작해서,
2. 끝점: bts라는 array의 길이인 7 미만까지
3. 얼만큼: 순서는 1씩 증가하면서

반복된다고 알려줘야합니다.

이걸 실제 시뮬레이션을 돌려보면 이렇게 작동해요.

1. 처음엔 i가 0이고,
2. 그 다음엔 1씩 증가하니까 2, 3 ..
3. Array가 7이니까 6까지 반복돼서 bts[6]인 지민까지 출력해줍니다.

 

 

while loop

같은 반복문을 while loop으로 다르게 쓸 수도 있어요. while이라는 단어에서 알 수 있듯이 끝점을 기준으로 작성하는 반복문이에요.

In [9]:

i=0

while (i<bts.length){
    console.log(bts[i])
    i++
}

 

진
뷔
정국
슈가
제이홉
RM
지민

Out[9]:

6

 

 

do while loop

In [10]:

i=0

do{
    console.log(bts[i])
    i++
} while (i<bts.length)

 

진
뷔
정국
슈가
제이홉
RM
지민

Out[10]:

6

 

 

break

반복문을 다 돌리기 전에 어떤 조건을 만족하면 멈추게 하는 방법이 있어요. 예를 들어 모든 방탄 멤버가 아니라, '뷔'가 나올때 호명을 멈추고 싶다면 조건문을 추가해서 반복문을 깨면 됩니다.

In [11]:

for(let i=0; i<bts.length; i++){
    console.log(bts[i])
        if(bts[i]=='뷔'){
            break
    }
}

 

진
뷔

 

 

 

반복문 안의 반복문 nested loop

1. 영어이름을 모두 대문자로 바꾼 후,
2. 1을 한번 더 반복하세요.

In [12]:

const btsEng=['jin','v','jk','rm','suga','jhope','jimin']

 

In [13]:

for(i=0; i<2; i++){
    console.log(i+'번째')
    for(j=0; j<btsEng.length; j++){
        console.log(btsEng[j].toUpperCase())
    }
}

 

0번째
JIN
V
JK
RM
SUGA
JHOPE
JIMIN
1번째
JIN
V
JK
RM
SUGA
JHOPE
JIMIN

 

 

설명:

실제로 반복문은 이 순서로 돌고 있습니다.

0번째: i=0, j=0, j=1, j=2, j=3, j=4, j=5, j=6

1번째: i=1, j=0, j=1, j=2, j=3, j=4, j=5, j=6

...

 

---

Array 변형하기

Array를 변형할 일이 종종 생깁니다. 예를 들어, 방탄소년단 멤버가 처음부터 7명이진 않았겠죠? 몇명씩 추가됐을거고, 또 몇명씩 제외되면서 지금의 7명이 만들어졌을거에요. 또 공개 순서도 계속 바뀌었을 수 있구요. 이렇게 필요에 따라 Array를 변형하기 위해 필요한 주요 명령어를 알아볼게요.

 

 

4. 방탄소년단 멤버 순서를 바꿔서 알려주세요.

Array안 아이템들의 순서는 가장 간단하게는 두가지 방법으로 바꿀 수 있습니다.

1. 역순으로 바꾸거나
2. 알파벳 (가나다)순으로 바꿀 수 있어요.

이 메소드는 한번 테스트해보고 마는게 아니라, 원래 있던 Array의 순서 자체를 업데이트하는 것이니 유의하세요.

In [14]:

console.log(bts.reverse())

 

[
  '지민',   'RM',
  '제이홉', '슈가',
  '정국',   '뷔',
  '진'
]

 

In [15]:

bts.sort()

Out[15]:

[
  'RM',     '뷔',
  '슈가',   '정국',
  '제이홉', '지민',
  '진'
]

 

 

5. 방탄소년단 멤버를 Array에 한명씩 추려주세요.

누군가 '진,뷔,정국,슈가,제이홉,RM,지민' 이라고만 적어줬다고 가정해봅시다. 이걸 '진', '뷔', '정국', '슈가', '제이홉', 'RM', '지민' 이렇게 한 명씩 Array에 넣어주기 위해선 어떻게 하면 좋을까요?

In [16]:

let words='진,뷔,정국,슈가,제이홉,RM,지민'
const bts6=words.split(',')
console.log(bts6)

 

[
  '진',     '뷔',
  '정국',   '슈가',
  '제이홉', 'RM',
  '지민'
]

 

 

In [17]:

//반대로 array를 string으로 돌리는 방법도 있습니다.
bts6.toString()

Out[17]:

'진,뷔,정국,슈가,제이홉,RM,지민'

In [18]:

bts6.join(',')

Out[18]:

'진,뷔,정국,슈가,제이홉,RM,지민'

 

 

6. 방탄소년단의 마지막 공개멤버를 추가해주세요.

뷔는 가장 마지막으로 공개된 멤버라고 하는데요. 방탄 버전1이 뷔를 제외한 6명이라면, 여기에 뷔를 추가해서 방탄을 완성해볼 수 있을까요?

[뷔밀병기] 데뷔 11일 전인 2013년 6월 2일 첫 티저 사진 공개. 어린 나이 + 잘생긴 얼굴 + 좋은 목소리를 가진 탓에 대형 기획사에서 채갈까 봐 염려되어 소속사에서 마지막까지 공개하지 않았다고 한다 -나무위키 전문

In [19]:

//방탄소년단 멤버 발표 순서
const bts01=['RM','슈가','제이홉','진','정국','지민']

 

In [20]:

//가장 뒤에 아이템을 추가합니다.
bts01.push('뷔')

Out[20]:

7

In [21]:

console.log(bts01)
console.log(bts01.length)

 

[
  'RM',     '슈가',
  '제이홉', '진',
  '정국',   '지민',
  '뷔'
]
7

 

 

7. 방탄소년단 멤버 3명만 추려서 말해주세요.

진, 뷔, 정국

In [22]:

//0이상, 3미만 즉 0,1,2번을 알려줘
console.log(bts.slice(0,3))

 

[ 'RM', '뷔', '슈가' ]

 

 

방탄소년단 멤버에서 반려동물은 빼주세요.

누군가 방탄 반려동물까지 방탄 멤버에 추가해놓았다. 다시 반려동물을 제외시킬 수 있을까?

In [23]:

const bts02=['밤이','RM','슈가','제이홉','진','정국','지민','뷔','탄이']

 

In [24]:

//마지막 아이템을 제외시킵니다.
bts02.pop()

Out[24]:

'탄이'

In [25]:

//가장 첫 아이템을 제외시킵니다.
bts02.shift()
//unshift는 반대로 가장 첫 아이템을 추가합니다.

Out[25]:

'밤이'

In [26]:

console.log(bts02)

 

[
  'RM',     '슈가',
  '제이홉', '진',
  '정국',   '지민',
  '뷔'
]

 

 

 

8. 추가하고 빼주세요.

추가하고 제거하는 것을 한꺼번에 하고 싶으면 splice를 쓰면됩니다.

In [27]:

const bts03=['밤이','RM','슈가','제이홉','진','정국','지민','탄이']

 

In [28]:

//(시작점, 몇번 지울 것인지-옵셔널, 추가할 아이템-옵셔널)
//추가할 아이템은 가장 첫 순서에 추가됩니다.
bts03.splice(0,1,'뷔')

Out[28]:

[ '밤이' ]

In [29]:

console.log(bts03)

 

[
  '뷔',   'RM',
  '슈가', '제이홉',
  '진',   '정국',
  '지민', '탄이'
]

 

In [30]:

//연속으로 지울 땐 이렇게 활용하면 좋겠지요.
const bts04=['RM','슈가','제이홉','진','정국','지민','탄이','밤이']

 

In [31]:

bts04.splice(bts04.length-2,2,'뷔')

Out[31]:

[ '탄이', '밤이' ]

In [32]:

bts04

Out[32]:

[
  'RM',     '슈가',
  '제이홉', '진',
  '정국',   '지민',
  '뷔'
]

 

---

Function

function은 재활용할 수 있는 코드 블록입니다.

function을 만들 때는, function functionName(parameter){}

function을 실행할 때는, functionName(argument)

 

인삿말을 완성하는 함수를 만들어주세요.

진 -> 안녕하세요, 방탄소년단 진입니다.

In [33]:

function btsHello(name){
    console.log('안녕하세요, 방탄소년단 '+name+'입니다.')
}

Out[33]:

undefined

In [34]:

btsHello('진')

 

안녕하세요, 방탄소년단 진입니다.

Out[34]:

undefined

In [35]:

//parameter가 2개인 함수를 만들어볼게요.
function btsPosition(name,position){
    return '안녕하세요, 방탄소년단 '+position+' '+name+'입니다.'
}

Out[35]:

undefined

In [36]:

btsPosition('진','월드와이드핸섬')

Out[36]:

'안녕하세요, 방탄소년단 월드와이드핸섬 진입니다.'

 

 

화살표 함수로 함수를 좀 더 짧게 씀과 동시에 변수에 저장할 수 있습니다. 보통은 이렇게 함수를 많이 쓰는 듯해요.

In [37]:

const btsPosition2=(name,position)=>{
    return '안녕하세요, 방탄소년단 '+position+' '+name+'입니다.'
}

Out[37]:

undefined

In [38]:

btsPosition2('진','월드와이드핸섬')

Out[38]:

'안녕하세요, 방탄소년단 월드와이드핸섬 진입니다.'

In [39]:

//함수 안에 함수를 넣을 수도 있는데, 이런걸 nested function이라고 한대요.
const btsPosition3=(name,position)=>{
    return btsPosition(name,position)
}

Out[39]:

undefined

In [40]:

btsPosition3('진','월드와이드핸섬')

Out[40]:

'안녕하세요, 방탄소년단 월드와이드핸섬 진입니다.'

 

---

Object

 

진이라는 Object

 

이제 멤버 한명에 대해 좀 더 깊게 알아볼까합니다 (고백할게요.. 제 최애는 진..) 진의 나무위키 한번 볼까요? 본명, 출생, 국적, 종교 등 여러 정보가 있어요. 이런식으로 작성된 폼을 자바스크립트에서는 Object라고 부릅니다. 이 Object라는 서식에서 카테고리에 해당되는 것 (본명, 출생, 국적..)들은 Key라고 하고, 그 값(김석진, 1992년 12월 4일, 대한민국..)들은 Value라고 합니다.

In [41]:

let jin={
    name: 'jin',
    position: ['vocal','visual'],
    age:30,
    isMarried: false
}

 

---

 

Data Type

여기서 이 value들의 타입이 다릅니다. 이걸 데이터 타입이라 부르고 대표적인 데이터 타입으로는

1. string
2. number
3. boolean
4. undefined
5. null 이 있습니다.

In [42]:

//만약 어떤 값의 데이터타입이 궁금하면 typeof라는 명령어를 써서 알아낼 수 있습니다.
console.log(typeof(jin))
console.log(typeof(jin.name))
console.log(typeof(jin.position))
console.log(typeof(jin.age))
console.log(typeof(jin.isMarried))

 

object
string
object
number
boolean

 

 

 

방탄의 인삿말을 완성시켜주세요.

안녕하세요, 방탄소년단 ㅇㅇ입니다.

 

데이터타입마다 성질이 있는데, 그중 string은 +로 이어 붙일 수 있습니다.

In [43]:

console.log('방탄소년단 '+bts[0])

 

방탄소년단 RM

 

 

In [44]:

bts.forEach(i=>console.log('안녕하세요, 방탄소년단 '+i+'입니다.'))

 

안녕하세요, 방탄소년단 RM입니다.
안녕하세요, 방탄소년단 뷔입니다.
안녕하세요, 방탄소년단 슈가입니다.
안녕하세요, 방탄소년단 정국입니다.
안녕하세요, 방탄소년단 제이홉입니다.
안녕하세요, 방탄소년단 지민입니다.
안녕하세요, 방탄소년단 진입니다.

 

---

 

조건문 Conditionals

만약 '진'이 방탄소년단 멤버가 맞으면 맞다고 해줘.

'진'은 방탄소년단 멤버가 맞아.

In [45]:

if (bts.includes('진')){
    console.log('방탄소년단 멤버가 맞아')
}

 

방탄소년단 멤버가 맞아

Out[45]:

undefined

In [46]:

if (bts.includes('민호')){
    console.log('방탄소년단 멤버가 맞아')
} else{
    console.log('방탄소년단 멤버가 아니야')
}

 

방탄소년단 멤버가 아니야

Out[46]:

undefined

 

else if

In [47]:

const btsPets=['탄이','밤이','초코','뽀삐','콩이']

Out[47]:

undefined

In [48]:

if (btsPets.includes('탄이')){
    console.log('방탄소년단 뷔의 반려동물이야')
} else if(bts5.includes('밤이')){
    console.log('방탄소년단 정국의 반려동물이야')
} else{
    console.log('방탄소년단 멤버의 반려동물이 아니야')
}

 

방탄소년단 뷔의 반려동물이야

Out[48]:

undefined

 

switch

In [49]:

//조건이 많은 if else if else같은건 switch로도 쓸 수 있습니다.
switch(btsPets[btsPets.length-1]){
    case '탄이':
        console.log('방탄소년단 뷔의 반려동물이야')
    break
    case '밤이':
        console.log('방탄소년단 정국의 반려동물이야')
    break
    default:
        console.log('방탄소년단 멤버의 반려동물이 아니야')
}

 

방탄소년단 멤버의 반려동물이 아니야

 

 

Ternary Operators

In [50]:

//이렇게도 쓸 수 있습니다. 앞에는 true일때의 값, 뒤에는 false일때의 값을 써줍니다.
bts.includes('진') ? console.log('방탄소년단 멤버가 맞아') : console.log('방탄소년단 멤버가 아니야')

 

방탄소년단 멤버가 맞아

 

 

---

Basic Javascript with BTS

이번편 Takeaway:

1. 기본적인 반복문 쓰기
2. 기본적인 메소드를 써서 Array를 변형하는 방법
3. 기본적인 데이터타입
4. 기본적인 조건문 쓰는 방법