JavaScript - 객체와 반복문 / 객체 관련 키워드

객체와 반복문

배열(Array)에 경우는 for 반복문과 for in 반복문으로 요소(element)에 쉽게 접근이 가능하다. 하지만 객체(Object)는 for 반복문의 사용이 불가능하다. 하지만 for in 반복문만 사용이 가능하다.

let product={             'Game Name':'Tom Clancy\'s The Division 2',             'Game Price':'130,000원',             'Game Language':'한국어',             'Support OS':'Win 32/64, MAC',             'Multi-Platform':'Support'  };   let AD=''; for(let key in product){       AD+='●'+key+': '+product[key]+'\n'; } alert(AD);

for in 반복문에 객체를 넣으면 객체의 요소 개수만큼 반복문을 실행하게 된다. key에 해당하는 부분이 객체 내부의 키를 의미하는 것이다.

객체와 반복문.html

0.00MB

객체 관련 키워드

객체 관련 키워드로는 in 키워드와 with 키워드가 있다. in 키워드는 for in 키워드랑 같이 사용하지않고 in 만 단독으로 사용한다면 해당하는 key가 객체의 안에 있는지 확인할 수 있다.

// 객체의 in 키워드 let student={     이름: '김철수',     국어: 92, 수학: 98,     영어: 99, 과탐: 93, }; // true 출력 console.log('이름' in student); // false 출력 console.log('성별' in student);   // 문자열이 아닌 키를 사용할때는 변수부터 선언 let 국어 = "국어"; console.log(국어 in student); // 그렇지 않은 아래는 무조건 오류발생 console.log(이름 in student);

in 키워드를 사용해 key가 객체 내부에 존재할 때 true를 출력하고 없을 때 false를 출력한다. 그리고 in 키워드를 사용할 때는 문자열로 입력을 해주어야 한다. 문자열이 아닌 단순히 키로 입력을 하고 싶다면 변수로서 키를 선언하고 선언된 변수를 in 키워드와 사용을 해야 인식을 한다. 그렇지 않으면 오류가 발생해 작동을 하지 않는다.

 

with 키워드는 객체의 속성을 출력할때 식별자를 일일히 입력을 해주어야 하는 번거로운 상황을 없애준다.

객체 games를 선언	with 키워드 미사용
let games={             MMORPG:'WoW',             MORPG:'DnD',             FPS:'Call of Duty',             TPS:'The Division 2',             RTS:'Starcraft 2',             AOS:'League of Legends',             TCG:'Hearthstone'         };	let gamemenu1='';      gamemenu1 += 'MMORPG : ' + games.MMORPG + '\n'; gamemenu1 += 'MORPG : ' + games.MORPG + '\n'; gamemenu1 += 'FPS : ' + games.FPS + '\n'; gamemenu1 += 'TPS : ' + games.TPS + '\n'; gamemenu1 += 'RTS : ' + games.RTS + '\n'; gamemenu1 += 'AOS : ' + games.AOS + '\n'; gamemenu1 += 'TCG : ' + games.TCG + '\n'; console.log(gamemenu1);

games 라는 객체를 선언하고 with 키워드를 사용하지 않고 gamemenu1을 빈 문자열 변수로 선언하고 games 객체에서 속성을 하나하나 불러와 담은후 출력하는 과정이다. with 키워드를 사용하지 않았을 때 계속 'games.키'를 입력하는 모습을 볼 수 있다.

객체 games를 선언	with 키워드 사용
let games={             MMORPG:'WoW',             MORPG:'DnD',             FPS:'Call of Duty',             TPS:'The Division 2',             RTS:'Starcraft 2',             AOS:'League of Legends',             TCG:'Hearthstone'         };	let gamemenu2=''; with(games){         gamemenu2 += 'MMORPG : ' + MMORPG + '\n';         gamemenu2 += 'MORPG : ' + MORPG + '\n';         gamemenu2 += 'FPS : ' + FPS + '\n';         gamemenu2 += 'TPS : ' + TPS + '\n';         gamemenu2 += 'RTS : ' + RTS + '\n';         gamemenu2 += 'AOS : ' + AOS + '\n';         gamemenu2 += 'TCG : ' + TCG + '\n'; } console.log(gamemenu2);

with(){}의 형태로 with의 소괄호 안에 객체의 식별자를 입력해서, 일일히 'game.키'를 입력하지 않고 키만 입력해 사용할 수 있다. 결과적으로 코드를 짧게 줄여주는 역할을 한다. with 키워드를 사용할 때의 주의할 점이 있다. 

 

만약 with 키워드를 사용하는 객체 내부의 속성 이름과 외부 변수의 이름이 같으면 충돌이 일어나게 된다.

let object={       Name:'Alan',       Math:88,       Grammar:74,       Science:99,       History:89,       result:'PASS' };          let result=''; with(object){       result += 'Name : ' + Name + '\n';       result += 'Math : ' + Math + '\n';       result += 'Grammar : ' + Grammar + '\n';       result += 'Science : ' + Science + '\n';       result += 'History : ' + History + '\n';       result += 'Total Score : ' + (Math + Grammar + Science + History) + '\n'; }; alert(result);

위의 경우에 객체 내부에 result라는 키가 존재하는데, 또 result를 빈 문자열 변수로 선언을 하고 with 키워드를 사용해 출력을 하게 되면 객체 내부의 result와 아래의 result는 충돌을 하게 된다. 이 경우에 자바스크립트에서는 '객체의 속성'을 더 우선시 하게 되기 때문에 위의 코드를 실행하면 alert에 아무것도 출력이 되지 않는다. 반드시 주의 해야 한다.

객체 관련 키워드.html

0.00MB