인프런 커뮤니티 질문&답변

이고은님의 프로필 이미지
이고은

작성한 질문수

자바스크립트 비기너: 튼튼한 기본 만들기

Array 코딩예제 질문

작성

·

139

0

안녕하세요 선생님, 강의 잘 듣고 있습니다 :)

Array 오브젝트의 코딩예제를 풀어보았는데 이런식으로 접근하는게 맞는지 확인부탁드립니다. 감사합니다.

<script>
window.onload = function(){
// debugger;
// arr 라는 변수이름으로 Array 오브젝트 생성
// li 요소들을 join으로 넣기위한 ul 배열 생성
// for문을 이용해 li 10번 반복하여 arr에 할당
// arr 안에있는 배열 , 없앤 후 result에 할당
// result를 arr2 사이에 넣어 result2에 할당
// 브라우저에 출력하기

var arr = [];
var arr2 = ['<ul>','</ul>']
for(var i = 1; i < 11; i++){
arr.push('<li id="id'+i+'">id'+i+'</li>')
// console.log(arr)
}
var result = arr.join("")
// console.log(result)
var result2 = arr2.join(result)
// console.log(result2)
document.body.innerHTML = result2
}
</script>

답변 2

1

이고은님의 프로필 이미지
이고은
질문자

ㅎㅎ 네 당연히 실행은 해보았습니다.  실행했을때 결과는 잘 나왔으나 접근방식에 대해 혹시 잘못된 부분이 있을까해서 질문했습니다 :) 답변 감사드립니다!

0

김영보님의 프로필 이미지
김영보
지식공유자

위 코드 실행되나요? 설마 실행되지 않는 것을 확인해 달라고 하는 것은 아니겠죠^^

1. 먼저 주석으로 시나리오를 작성한 것은 매우 매우 좋은 모습입니다. 앞으로도 꼭 이렇게 하세요. 아주 내 습관으로 만드세요. 
하나 욕심이 있다면 주석을 주어, 동사, 목적어 형태의 문장으로 작성하세요. 그래야 동적인 모습이 되어 시나리오가 연결됩니다.
// Array 오브젝트를 생성하여 arr 변수에 할당한다.

2. 처음 배울 때부터 자바스크립트 코드를 별도의 js 파일에 작성하는 습관을 들이는 것이 좋습니다. 

var arr = ['<ul>'];
for(var i = 1; i < 11; i++){
  //arr.push('<li id="id'+i+'">id'+i+'</li>')
  // 가독성을 위해서 공백을 하나씩 두세요
  arr.push('<li id=id' + i + '>id' + i + '</li>');
};
arr.push('</ul>');
console.log(arr.join(""));

이고은님의 프로필 이미지
이고은

작성한 질문수

질문하기