[JS] iOS 개발자가 이해하는 JavaScript 기초문법 (feat. Swift)

안녕하세요 Foma 💻 입니다!

얼마 전에 리액트 네이티브로 새로운 프로젝트를 맡게 되었습니다.

JavaScript를 공부하다보니 Swift랑 비슷한 것도 있고 아닌 부분도 많더라구요.

그래서 원래 익숙했던 Swift를 기준으로 JavaScript와 다른 점에 대해서만 정리해 보려고 합니다!

바로 시작할게요~

---

변수와 상수

Swift에선 상수를 let,변수를 var로 쓴다.

 

let name = "Fomagran" //상수
var name = "Fomagran" //변수

JavaScript는 상수를 const,변수를 let이라고 쓴다.

이미 상수 let에 익숙해 있는 상태라서.. 실수를 많이 할 것 같다.

 

const name = "Fomagran" //상수 
let name = "Fomagran" //변수

---

출력

Swift는 간단하게 print, 안에 변수가 있으면 \(변수)로 쓴다.

 

print("안녕하세요. 저는 \(name) 입니다."

JavaScript는 console.log를 이용하고 변수를 출력할 땐 `(백틱)을 사용해야 하고 ${변수}로 쓴다.

 

console.log(`안녕하세요. 저는 ${name} 입니다.`)

---

자료형

Swift는 자료형을 변수나 반환값 등에 명시할 수 있고, 해당 자료형이 아닐 경우 에러가 난다.

 

var number:Int = 9 
number = "9" //에러

JavaScript는 자료형을 명시할 수 없고, 다른 자료형을 넣어도 괜찮다.

또한 숫자가 문자로 되어있으면 자동으로 바뀌고 숫자와 문자를 더하는 등 엄청 자유로운 편이다.

 

let number = 9 number = "9" //OK "3"/"6" = 2 //OK "3" + 1 = 31 //OK

---

증가 감소

Swift는 ++, -- 가 없고 += 기호를 써야한다.

 

var number = 1
number += 1

JavaScript는 ++ -- 모두 가능하다.

뒤에 앞에 모두 가능하지만 앞에 쓸 경우 값이 바로 할당되는 반면에 뒤에 쓰면 값은 바뀌지만 기존값을 반환한다.

 

let number1 = 1 
let newNumber1 = number1++ //2 
let number2 = 1 
let newNumber2 = ++number //1

---

조건

Swift는 조건문이나 for,while 루프에서 ()안에 조건을 넣지 않아도 된다.

 

if n > 0 { ... }

JavaScript는 반드시 ()안에 조건을 넣어야 한다.

 

if (n > 0) { ... }

---

함수

Swift는 함수를 작성할 때 func로 시작하고, 파라미터에 자료형을 반드시 명시해야 하며, 반환값이 있느지 없는지,있다면 반환값에 대한 자료형도 반드시 명시해야 한다.

 

func add(_ n1:Int,_ n2:Int) -> Int { ... }

JavaScript는 function으로 시작하고, 파라미터나 반환값에 자료형을 명시하지 않고 반환값이 있는지 없는지도 작성하지 않아도 된다.

 

function add(n1,n2) { ... }

---

숫자형

Swift는 소수점이 있냐 없냐에 따라 Int,Float,Double등으로 작성한다.

 

let n1:Int = 1 
let n2:Float = 1.1 
let n3:Double = 1.11 
let n4:Int = 1.1 //에러

JavaScript는 그냥 쓰면됨.

 

const n1 = 1 
const n2 = 1.1
const n3 = 1.11

---

문자형

Swift는 문자열의 인덱스를 가져오는 방법이 startIndex,offsetBy 등을 사용하는 등 꽤 복잡하다.

이를 이용해서 부분 문자도 추출할 수 있다.

 

let str = "abcdefg" 
//첫 글자에서 2번째 글자 알아내는 법 
print(str[str.index(str.startIndex, offsetBy: 2)]) //c 
//2번째부터 끝까지 추출하는 법 
let startIndex:String.Index = str.index(str.startIndex, offsetBy: 2) 
print(str[startIndex...]) //cdefg

JavaScript는 원하는 인덱스를 대괄호로 가져오면 되고 slice를 이용해서 부분 문자를 추출할 수 있다.

 

const str = "abcdefg" 
//첫 글자에서 2번째 글자 가져오는 방법
print(str[2]) //c 
print(str.slice(2)) //cdefg

---

배열

 

Swift는 배열 선언시 배열 안에 어떤 자료형을 담는지, 몇 차원 배열인지을 반드시 명시해야 한다.

값을 추가할 때는 append나 insert를 이용해야 한다.

또한 배열의 길이보다 적거나 큰 값에 접근하게 되면 에러가 난다.

 

배열을 복사하면 값이 복사된다.

 

var array:[Int] = [] 
//추가 
array.append(10) //[10] 
print(array[1]) //에러 
print(array.remove(at:2)) //에러 
var array2 = array //값 복사(참조X)

JavaScript는 자료형,길이에 상관없이 넣거나 삭제해도 괜찮다.

값을 추가할 때는 대괄호 안에 원하는 인덱스를 넣고 값을 넣어주면 된다.

배열을 복사하면 참조가 된다.

 

let array = new Array() 
//or 
let array = [] 
//추가
array[0] = 10 //[1] 
//자동으로 빈 공간이 생김
array[3] = 30 //[ 1, <2 empty items>, 30 ] 
delete array[5] //범위를 넘어가도 에러가 발생하지 않음
let array2 = array //참조가 됨

---

객체

Swift는 객체를 만들기 위해서 Struct로 프로퍼티와 메소드를 미리 만들어 주어야 한다.

 

프로퍼티와 메소드를 추가하거나 삭제는 불가능하다.

 

struct User { 
	let name:String 
    let age:Int 
    let isMan:Bool 
    func introduce() {
    	print("안녕하세요 저는 \(name)이고, 나이는 \(age)살 입니다.")
    } 
} 

let user = User(name:"Foma",age:27,isMan:true)
print(user.name) // Foma

JavaScript는 변수처럼 객체를 만들 수 있고 프로퍼티와 메소드를 언제든 추가할 수도 있고 삭제할 수도 있다.

또한 커스텀 객체를 만들 때는 함수와 같이 만들어준다.

 

let user = new Object() 
//or 
let user = {} 
//or 
let user = {
	name:"Foma",
    age:27,
    isMan:true,
    introduce() {
    	console.log(`안녕하세요 저는 ${name}이고,나이는 ${age}살 입니다.`) 
    } 
} 
//프로퍼티 추가 가능 
user.country = "Korea" 
//프로퍼티 삭제 가능 
delete user.country 
//메서드 추가 가능 
user.sayHi = function() {
	console.log("Hi") 
} 
console.log(user.name) //Foma 
//커스텀 객체
function User(name,age,isMan) {
	this.name = name 
    this.age = age
    this.isMan = isMan 
} 
let user = new User("Foma",27,true) 
console.log(user.name) //Foma

---

옵셔널 체이닝

 

Swift는 해당 값이 없을 수도 있고 있을 수도 있다는 것을 미리 '?'를 이용해 명시하면 자동으로 옵셔널 체이닝이 타이핑시 적용됩니다.

 

let user:User? 
print(user?.name) //Optional("Foma")

JavaScript는 미리 명시하지 않아도 되며, 값이 있을 수도 있고 없을 수도 있는 변수나 메서드에 '?'를 직접 적용하면 됩니다.

 

let user = new User() 
user?.name //있으면 Foma 없으면 undefinded 
//메서드는 '?' 붙이고 나중에 ()를 타이핑함 
user?.syaHi?.() //있으면 Hi 없으면 아무것도 실행안됨.

---

맵

Swift에서 Dictionary로 반드시 키와 밸류의 자료형을 명시해야 한다.

 

값을 넣어주거나 가져올 땐 대괄호를 사용하고, nil을 이용하여 삭제를 한다.

 

만약 키값이 유효하지 않는 값에 접근하면 에러가 발생한다.

 

var dic:[Int:String] = [:]
//or
var dic:[Int:String] = [1:"abc"]
//값 추가
dic[2] = "def"
//값 삭제
dic[2] = nil
print(dic[3]) //에러

 

JavaScript는 Map으로 값을 넣어줄 땐 set, 값을 읽을 땐 get 메서드를 이용하며 삭제할 땐 delete를 이용한다.

 

//맵 초기화
let map = new Map()
//값 넣어주기 (key,value)
map.set(1,"one") 
//값 가져오기
map.get(1)
//값 삭제하기
map.delete(1)

---

셋

 

Swift에서 Set은 <자료형> 과 같이 명시해야 하며 값을 넣을 땐 insert를 값을 삭제할 땐 remove를 메서드를 이용한다.

 

없는 값을 삭제할 시 에러가 난다.

 

var set:Set<Int> = Set()
//값 넣어주기
set.insert(1)
//값 삭제하기
set.remove(1)
//없는 값
set.remove(2) //에러

 

JavaScript는 add를 이용해서 값을 넣어주고 delete를 이용해서 값을 삭제하며 없는 값을 삭제하더라도 에러가 나지 않고 자료형에 상관없이 값을 넣을 수 있다.

 

let set = new Set()
//값 넣어주기
set.add(1)
set.add("a")
//값 삭제하기
set.delete(1)
set.delete(2) //OK

---

오늘은 이렇게 간단하게 Swift와 JavaScript의 기초문법의 차이점에 대해 알아보았습니다.

대체적으로 Swift가 조금 더 엄격하고 JavaScript가 조금 더 자유롭다고 느꼈습니다.

혹시라도 틀린 점이 있다면 댓글로 알려주세요!

---

Reference

모든 JS 지식은 모던 JavaScript 튜토리얼을 통해 학습하였습니다.

 

모던 JavaScript 튜토리얼