알고리즘 문제를 풀다가, 가독성이 좋게 String에 반복문으로 접근하는 방법을 찾고 싶었다. 카카오톡 javascript 오픈 채팅방에서 고수님들과 이야기를 통해 아래의 방법들을 알게 되었다.
let test = 'test'
// 방법 1
Array.from(test).forEach(() => {
// console.log(c)
})
// 방법 2
for(let c in test) {
// console.log(c)
}
// 방법 3
[...test].forEach((c) => {
// console.log(c)
})
방법 3가 제일 마음에 들어서 따라해봤는데, 실행되지않아서 당황했었다. 처음에는 고수님께서 실수로 잘못 알려주신게 아닐까 하고 생각했었다. (원숭이도 나무에서 떨어질 떄가 있으니까!!)
그래서 다른 시도로 test를 바로 접근하지 않고, arr에 한번 저장을 한 뒤에 forEach로 접근을 시도해보았다. 그런데 이는 문제 없이 실행되는 것이었다. 그래서 알려주신 고수님께 혹시 아래의 코드를 말씀하신게 아니냐고 여쭤보았다. 그러나 고수님들께서는 위의 코드는 자기들 개발 환경에서 문제 없이 잘 돌아간다고 했었다. 그럼 내 개발환경의 문제인가??하고 있었다. 그렇게 멘붕에 빠질랑 말랑 하고 있을 때, 어떤 초고수님께서 답변을 주셨다.
그렇다. 지금까지 코드를 작성할 때 별 생각 안하고 세미콜론을 안붙히고 있었는데, 그 방심이 코드에 영향이 미친것이다!! 이는 생각치도 못한 중요한 개념의 발견이었다. 중요한 순간에 이러한 사건이 일어났다면 어떡할 뻔 했는가. 정말 큰일날뻔 했다. 그래서 세미콜론을 왜 작성하지 않아도 에러가 생기지 않는지, 하지만 내 코드는 왜 에러가 났는지에 대해서 바로 찾아보았다.
blog.hanaoto.me/semicolon_javascript/
자바스크립트에서의 세미콜론
자바스크립트에서의 세미콜론은 사용자들이 잘 모르고 생략하거나, 어째서 이게 생략이 가능한지 등에 대해 잘 모르고 쓰는 경우가 있다. 나도 어째서 이게 생략이 가능한 지 잘 몰랐고, 늘 붙��
blog.hanaoto.me
bakyeono.net/post/2018-01-19-javascript-use-semicolon-or-not.html
자바스크립트, 세미콜론을 써야 하나 말아야 하나 | 박연오
bakyeono.net
그 결과로 좋은 글들을 발견해서 공유하고자 한다. 어려운 내용이 아니기 설명이 없어도 충분히 이해할 수 있을 것이다. 꼭 읽어보기를 바란다. 그럼 위에서 이해한 내용을 바탕으로 생각했을 때 내 코드는 무엇이 문제였던 것일까?
// 작성한 코드
let test = 'test'
[...test].forEach((c) => {
console.log(c)
})
// 개발자가 의도한 코드
let test = 'test';
[...test].forEach((c) => {
console.log(c)
});
// 인터프리터가 해석한 코드
// => 'test'에 ...test라는 속성값은 존재하지 않으므로 에러!!
let test = 'test'[...test].forEach((c) => {
console.log(c)
})
바로 '['로 줄을 시작했기 때문이다. 첨부한 글들을 따르면 인터프리터는 괄호로 시작하는 경우 윗 줄과 연결을 하여 해석한다고 한다. 'test'에게 ...test라는 속성은 존재하지 않기 때문에 해석하는 과정에서 에러가 나오게 됐던 것이다. 즉 세미콜론을 붙여주지 않았기 때문에 의도했던 코드와 다르게 해석이 됐다는 것이다.
오픈 채팅방에서도 세미콜론에 대한 토론이 시작 됐었다. 결국 세미콜론을 꼭 붙여라는 것이 대다수의 고수님들의 결론이 됐다. 뿐만 아니라 첨부한 두 글에서도 세미콜론을 붙여 코드를 작성하라고 강조하고 있다. 나는 이 경험으로 인해서 앞으로 세미콜론을 붙이는 습관을 들여야겠다고 느끼게 되었다. 좋은 경험이었기 때문에 공유하고자 글을 작성하게 되었다.
'javascript' 카테고리의 다른 글
XMLHttpRequest (0) | 2020.11.10 |
---|---|
Promise (0) | 2020.11.03 |
정리할 web api 목록 (0) | 2020.09.16 |
javascript의 선택적 인수 위험 (0) | 2020.07.30 |
반복 메서드 정리 (0) | 2020.07.30 |