[Javascript] 상도덕편 🚮

정신없이 인강 진도를 빼다보니, 언제나 그렇듯 내가 이걸 이해하고 있는건가 아님 진도를 빼기 위해 듣고있나 싶은 순간이 찾아왔다. 그래서 이번주는 다시 기본을 복습하는 재정비 시간을 가지기로 했다.

 

#변수 #함수 #조건문 #반복문 #비구조할당방식 #지역변수전역변수 

---

변수 선언

const로 변수를 선언한다.

Q let과 const의 차이는?
A let은 overwrite할 수 있는 변수, const는 overwrite할 수 없는 변수입니다. 보통 초심자에게는 const를 쓰는 것을 추천한다고 합니다. 아무래도 변수값이 변경되면 역추적하기 어려운 상황이 생기기 때문일겁니다. 노마드코더 니꼬쌤은 "DO NOT USE LET unless you really need it. USE CONST AS DEFAULT"라고 할 만큼, const를 쓰는 것을 (강)권합니다.

Q 그럼 var은 뭔데?
A var은 let과 const가 생기기 전에 변수를 선언하던 방식입니다. 말그대로 variable에서 이름을 따온건데, let처럼 overwrite이 가능합니다. 분명 옛것이라고 했는데도 var이 심심치않게 보여서 궁금해서 친구 개발자에게 물어봤습니다. 얼핏 듣기론, 예전 브라우저는 let과 const를 못알아듣기 때문에, 때론 마지막 시점에 var로 변환해주는게 안전하다고 합니다. 13학번이 20학번 말을 못알아듣는 것이랑 비슷하겠네요... 그 반대는 문제없겠죠 🥲

 

let v='bts'
console.log(v)
//'bts'

v=10
console.log(v)
//10

const v='bts'
console.log(v)
//'bts'

v=10
//TypeError: Assignment to constant variable.

 

🐫 camelCase로 변수이름을 쓴다 (NOT snake_case)

항상 헷갈리지만 camelCase의 첫 글자는 대문자가 아니다.

 

콘솔 열기

 opt+cmd+j  ...을 눌러 dock side를 설정하면 전체화면으로 바꿀 수도 있다.

 

[리스트]+{딕셔너리}  = JSON!

리스트에 아이템을 추가할때는 push 매소드를 사용, 리스트 맨 뒤에 아이템을 넣어줍니다 (파이썬의 append와 비슷한 기능).

리스트와 리스트를 합칠 땐 concat을 씁니다.

아, 참고로 리스트는 array라고도 부릅니다.

const bts=['V','Jin','Jimin','Jhope','JK','RM','SUGA']
console.log(bts)
//['V','Jin','Jimin','Jhope','JK','RM','SUGA']

bts.push('Army')
console.log(bts)
//['V','Jin','Jimin','Jhope','JK','RM','SUGA','Army']

bts.length
//8

bts1=['v','jin','jimin']
bts2=['jk','rm','jhope','suga']
bts1.concat(bts2)
//['v','jin','jimin','jk','rm','jhope','suga']

 

딕셔너리에 아이템을 추가할 때는 그냥 넣어주면됩니다. 아 참고로, 딕셔너리는 object라고도 부릅니다.

const bts={name:'V', role:'sub vocal', birthday:'1995-12-30'}
console.log(bts['name'])
//V

bts['height']=179
console.log(bts)
//{name:'V', role':'sub vocal', birthday:'1995-12-30', height: 179}

 

리스트와 딕셔너리를 같이 쓸 때 파워풀해집니다. 이게 바로 JSON 구조!!

딕셔너리를 리스트 안에 넣어 쓰는 것이 JSON 구조입니다.

const bts=[ {name:'V', birthday:'1995-12-30'} , {name:'Jin', birthday:'1992-12-04'} ]

bts.push( {name:'Jimin', birthday:'1995-10-13'} )
console.log(bts)
//[
//	{name:'V', birthday:'1995-12-30'},
//	{name:'Jin', birthday:'1992-12-04'},
//	{name:'Jimin', birthday:'1995-10-13'}
//]

 

JSON 데이터를 index하기 위해선, 리스트의 순서와 딕셔너리의 키값을 입력해주며 됩니다.

ex. bts 두번째 멤버의 생일을 꺼내보세요

bts[1]['birthday']
//'1992-12-04'

 

딕셔너리 값으로 리스트를 넣을수도 있고, 딕셔너리 값으로 딕셔너리를 넣을수도 있고, 딕셔너리 값으로 딕셔너리를 담은 리스트를 넣을수도있다.

const bts={

	composedSongs:['Winter Bear','Snowflower'],
	
	composedSong: {name: 'Winter Bear', released:'2019'},
    
	composedSongs: [{name: 'Winter Bear', released:'2019'},{name: 'Snowflower', released:'2020'},]
    
}

 

기본연산자 +

 +  문자열을 더할 수 있다. 문자열+숫자를 하면 문자열로 더해진다.

 - 

 * 

 / 

 %  나머지 Remainder

 **  거듭제곱 Power

 

5%2
//1

5**2
//25 (5*5)

'bts'+'army'
//btsarmy

'bts'+7
//'bts7'

7+1+'bts'
//'8bts' (not '71bts') 순차적으로 더해주기 때문에.

덧셈 연산자는, 문자열을 연결해준다.

 

알아두면 쓸모있는 기본 함수들

toUpperCase() 대문자로 바꾸기

const bts='bts'
bts.toUpperCase()
//'BTS'

 

split(기준) 문자열 쪼개기

const bts='v/jin/ji min/jk/jhope/rm/suga'
bts.split('/') 
//['v','jin','ji min','jk','jhope','rm','suga']

쪼갠 것의 아이템을 index
bts.split('/')[3]
//'ji min'

그것을 또 쪼개기
bts.split('/')[3].split(' ')
//['ji','min']

 

join(기준) 쪼개진 것을 합치기

const bts='v/jin/ji min/jk/jhope/rm/suga'
bts.split('/') 
//['v','jin','ji min','jk','jhope','rm','suga']

bts.split('/').join('/')
//'v/jin/ji min/jk/jhope/rm/suga'

 

Data Type +

boolean

number

float 소수점있는 수 (has a floating number)
Null 비어있는 값

Nan 계산중에 에러가 났을 때 표시되는 값

 

Q null과 undefined의 차이가 무엇인가요?

A null은 비어있다는 '값'이고 undefined는 값이 없는 초기값/기본값이다. 변수를 선언했지만 값이 아예 부여되지 않은 상태를 말한다. 예를 들어 어떠한 그림의 제목이 null이라면, 이건 '제목없음'이라고 이름을 붙인거다. 제목이 undefined라면 제목없음 상태인거다.

 

---

함수

니꼬의 말을 빌리자면, 함수는 "a piece of code that you can use as many times as you want", 즉 재활용할 수 있는 컴포넌트다. 개발자는 (사실 기획자, 디자이너도 코드로 로직을 짜진않지만, 한국말로 로직을 짤 수 있어야함...) 로직을 만들어야하기 때문에, 함수를 잘 만들어 써먹어야한다.

 

console.log를 예시로 살펴보자면, console은 오브젝트이고, log는 console안에 있는 (매소드) 함수이다.

console을 출력해보면, 이런 메소드 함수들을 가지고있는 것을 확인할 수 있다.

 

Q 인자와 파라미터 Arugment and Parameter의 차이는 무엇인가요?

A 인자는 함수를 호출할 때 쓰는 것이고, 파라미터는 함수를 선언할 때 쓰는 것입니다. def hello(a) 어쩌고에서 a는 파라미터이고, hello(a)해서 함수를 호출할때 쓰는 a는 인자입니다.

 

변수를 함수안에 쓸 때는, ` `백틱과 ${변수} 를 쓰면된다.  

function bts(name, age){
	return `${name} is ${age} years old`;
}

bts('V',27)
//'V is 27 years old'

 

백틱은 또 다른 용도도 있는데, 바로 줄바꿈이다. 백틱 안에 쓰는 문자는 알아서 줄바꿈이된다. 백틱 안쓰면 \n을 써야하는데 귀찮으니까.

`방탄소년단의 멤버는

7명입니다`

 

함수에서 리턴은 y=f(x)에서, 이 y를 만드는 것이다.

 

리터럴 함수 방식 Function Literal

변수=함수, 즉 함수를 변수에 담아서 변수가 함수역할을 하게끔 하는 방법을 리터럴 함수방식이라고 부른다. 함수에 이름을 굳이 안붙이고, 변수에 담아서 변수이름으로 호출해서 쓰는 함수다.

A function literal is an expression that defines an unnamed function. A function literal is much like a function statement, except that it is used as an expression rather than a statement and no function name is required.

const bts=function(){

}	

 

지역변수와 전역변수 local variable and global variable

함수 안에서 선언한 변수는 함수 안에서만 접근할 수 있다.

function bts(){
	let btsMember=7; //지역변수
}

console.log(btsMember)
//ReferenceError: btsMember is not defined

 

반면, 함수 밖에서 선언한 전역 변수는 어디에서든 접근할 수 있다.

 

만약에 내부변수와 외부변수의를 동일한 이름으로 썼다면? 외부 변수가 이긴다.

let bts='v';

function btsMember(){
    let bts='jin'
    console.log(bts)
}

btsMember()
//jin

console.log(bts)
//v

전역 변수는 되도록 사용하지 않는 것이 좋습니다. 비교적 근래에 작성된 코드들은 대부분 전역변수를 사용하지 않거나 최소한으로만 사용합니다. 다만 프로젝트 전반에서 사용되는 데이터는 전역 변수에 저장하는 것이 유용한 경우도 있으니 이 점을 알아두시기 바랍니다.

 

---

조건문

기본적인 골조는 아래와 같다.

function bts(a){
	if(조건){
    
    }else if(조건){
    
    }else{
    
    }
}

 

물음표 question mark 연산자 (aka 조건부 conditional 연산자/삼항 tenary 연산자) 

기본 골조

let 변수 = 조건 ? 참일때값:거짓일때값

let bts=['v','jin','jk','jimin','jhope','rm','suga']

let army = bts.length == 7 ? true:false
console.log(army)
//true

기본적으로 true, false값이 들어가기 설정값이 따로 없을땐 아래와 같이 생략해도 동일하게 실행된다.

let bts=['v','jin','jk','jimin','jhope','rm','suga']

let army = bts.length == 7
console.log(army)
//true

 

주의할 점:

물음표 남발 ㄴㄴ
개발자 입장에선 if문을 사용할 때 보다 코드 길이가 짧아진다는 점 때문에 물음표?를 if 대용으로 쓰는 게 매력적일 순 있습니다. 하지만 이렇게 코드를 작성하면 가독성이 떨어집니다.

 

반복문

파이썬에서 map으로 반복문을 확 줄여 쓸 수 있듯이, 자바스크립트에서도 map을 활용해 반복문을 쓰면 좋다.

일단 map없이 쌩으로 쓰는 반복문을 알고 넘어가자.

 

i=0 부터, i<10 까지, i++ 1씩증가시키겠다는 설정이 필요하다.

for(let i=0; i<10; i++){
	console.log(i)
}
//0 1 2 3 4 5 6 7 8 9

bts.length는 파이썬에서 for in range(len())와 같다. 즉, 리스트의 길이만큼 반복문을 돌리겠다는 뜻이다.

let bts=['v','jin','jk','jimin','jhope','rm','suga']

for (let i=0; i<bts.length; i++){
	console.log(bts[i])
}
//v jin jk jimin jhope rm suga

 

조건문과 반복문을 섞은 예시

let bts=[
	{name:'V', role:'dance'},
	{name:'JK', role:'sing'},
	{name:'Jin', role:'sing'} 
]

//여기서 보컬 포지션 멤버만 보고싶다면?

for (let i=0; i<bts.length; i++){
	if(bts[i]['role']=='sing'){
    	console.log(bts[i])
    }
}
//{name:'JK', role:'sing'}
//{name:'Jin', role:'sing'}

 

Map함수 +

map은 함수를 실행시키는 함수다. 무슨 말장난같지만..

let bts=['v','jin','jk','jimin','jhope','rm','suga']

bts.map(함수){

}
//bts의 모든 아이템에 대해서 함수를 실행시킨다.

 

그래서, 만약에 이 리스트를, 이렇게 바꾸고싶다고치자.

['v','jin','jk','jimin','jhope','rm','suga'] -> ['v💜','jin💜','jk💜','jimin💜','jhope💜','rm💜','suga💜']

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

//map 안에 실행할 함수를 정의해준다.
const bts2=bts.map(x=>x+'💜')

bts2
//['v💜','jin💜','jk💜','jimin💜','jhope💜','rm💜','suga💜']

//물론, 함수를 밖에서 먼저 선언해주고 map에다 넣어도 된다.

let bts2=(x) =>x+'💜'

bts.map(bts2)

 

화살표 함수 arrow function

기본 골조. 함수를 더 간편하게 쓸 수 있다.

//화살표 함수는,
let bts=(a,b,c) => a+b+c

//아래 함수를 축약한 것이다
let bts=function(a,b,c){
	return a+b+c
}

---

 

실제 앱개발에서 많이 쓰이는 함수

비구조 할당 방식 (별도 변수선언 없이, 키값을 바로 변수로 써먹는 방식)

리액트에서 가장 많이 사용되는 방식임

 

딕셔너리의 키값을 변수로 선언해서 쓰고 싶을때, 그걸 일일이 한다면..?

//예시로 아래와 같은 딕셔너리가 있다고 치자.
let bts={
	name:'v',
	role:'dance',
	song(){
    	console.log('snowflower');
    }
}

//일일이 키값을 변수로 선언해줘야한다면
let name=bts.name
let role=bts.role
let song=bts.song()
.
.
.

 

Ta-Da. 비구조 할당 방식으로 한꺼번에 키값들을 변수로 선언해줄 수 있다. 🧙‍♀️마법의 코드는 아래와 같다.

let{name,role,song}=bts;

name
//'v'

role
//'dance'

song()
//'snowflower'

 

이게 언제 유용히 쓰이냐면!!!

애초에 함수를 만들때, 바-로 비구조를 써서 변수를 선언해버릴 수 있다.

let bts=({name,role,song}) => {
    console.log(name)
    console.log(role)
    console.log(song)
}

bts({name:'v', role:'dance', song:'snowflower'})
//v
//dance
//snowflower

비구조 할당 방식이 없었다면 아래 처럼 코드를 작성해햐했을 것이다.

//딕셔너리를 변수로 선언한다.
let a={name:'v', role:'dance', song:'snowflower'}

let bts=(a) => {
	//키값들을 변수로 선언해주고
    let name=a.name
    let role.a.role
    let song.a.song
    
    //선언한 변수를 출력해주는 함수를 완성시킨다
    console.log(name)
    console.log(role)
    console.log(song)
}

bts({name:'v', role:'dance', song:'snowflower'})
//v
//dance
//snowflower

 

참고로(?) 딕셔너리에서 키값으로 값을 불러오는 방법은 두가지다.

let bts={name:'v'}

//키값 꺼내기1
bts['name']

//키값 꺼내기2
bts.name

//두 경우 모두 'v'를 리턴함

 

딕셔너리 더 간편하게 짜기 (키값과 변수이름이 같을때)

let name='v'
let role='dance'

let bts={
	name:name,
	role:role
}

bts
//{name:'v',role:'dance'}

//변수와 키값 이름이 같으면, 한번만 써도 알아먹음
let bts={
	name,
	role
}
//{name:'v',role:'dance'}

---

모르겠으면 검색해라, 그리고 공식 문서를 찾아봐라. 만든 사람 문서가 가장 정확하니까.

 

자바스크립트가 사람이었다면?

javascript let you do bad stuff. like a father who doesn't discipline his childeren.

he won't judge you, try hard to love you and try hardest to execute... so you gta learn how to make good code by yourself lol.

재연되진 않지만... a=100=5 이런식으로 써도 a=5로 실행될때가있다고 한다.

 

레퍼런스

스파르타코딩클럽 앱개발종합반 강의

노마드코더 바닐라 JS 강의

모던 JavaScript 튜토리얼