*코드스테이츠 프리코스 33기를 수강하면서 2019년 5월 2일(목)에 학습한 내용을 정리한 포스팅입니다.
*https://soldonii.github.io에서 작성한 글을 티스토리로 옮겨온 포스팅입니다.
*자바스크립트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다. :)
1. 배열(Array)
코드 스테이츠 Pre course 33기 1주차 목요일(2019-05-02)에는 배열, 반복문, 객체에 대해서 배웠다.
- 배열은 자료형 데이터 타입 중 하나로, 여러 개의 값을 배열이라는 하나의 그릇에 담을 때 사용한다.
- 기본적인 형식은 let fruits = ['apple', 'banana', 'grape', 'strawberry'];와 같이 []을 이용한다.
- 즉, 배열의 순서에 따라 index가 자동적으로 부여되며, index는 0부터 시작된다.(ex. fruits[2];는 'grape'가 조회된다.)
- 4번째 index의 값을 변경하고 싶으면, fruits[3] = 'pineapple';으로 선언하면, 'strawberry'가 'pinapple'로 변경된다.
- 배열 안의 값이 또 배열이 될 수도 있다. let myNumber = [[13, 20], [22, 8], [44, 17]];과 같은 형태를 띈다.
- myNumber의 두번째 index의 첫번째 index를 불러오고 싶다면? ➙ myNumber[1][0]로 불러오고, 결과는 22이다.
- 온점(.)을 이용하여 변수가 가지고 있는 속성(property)에 접근할 수 있다. 아주 기초적인 method 3개로 예시를 든다.
- .length : 배열의 길이(배열이 가지고 있는 element의 개수)를 return
- .push : 배열의 끝에 원하는 element를 추가
- .pop : 배열의 가장 끝에 있는 1개의 element를 삭제
- 이 외에도 배열과 관련된 method는 수 없이 많으며, 나중에 따로 정리할 예정이다.
- 배열 관련 method는 다음 링크에서 찾아볼 수 있다.
- Array MDN 문서
let myNumber = [73, 98, 86, 61];
myNumber.length; // 4가 출력
myNumber.push(102); // myNumber = [73, 98, 86, 61, 102] (배열 맨 끝에 102라는 값이 추가)
myNumber.pop(); // myNumber = [73, 98, 86, 61] (맨 끝에 추가됐던 102가 다시 삭제됨)
2. 반복문(Iteration)
- 같거나 비슷한 코드를 여러번 실행시켜야 할 때, 코드를 복붙하는게 아니라 반복문을 활용한다.
- for 구문 : 반복할 조건을 초기화, 조건식, 증감문 순으로 넣어준다.
- while 구문 : 반복할 조건 중 초기화, 증감문은 따로, 조건식만 괄호에 넣어준다.
// 1. for문을 이용할 경우
let sum = 1; for (let n = 2; n <= 4, n++) {
sum = sum + n;
}
// 2. while문을 이용할 경우
let sum = 1;
let n = 2;
while (n <= 4;) {
sum = sum + n; n++;
}
3. 객체(Object)
객체도 마찬가지로 자료형 데이터 타입 중 하나이다. 배열과 다른 점은, 데이터가 key-value(키-값) 쌍으로 이루어져 있다는 점이다.
let user = {
firstName : 'Hyunsol',
lastName : 'Do',
email : 'dhs0113@gmail.com',
city : 'Seoul'
};
- (중요) 객체의 값을 사용하는 방법에는 Dot notation, Bracket notation이 있다.
// 1. Dot notation
user.firstname; // 결과값은 'Hyunsol'
user.city; // 결과값은 'Seoul'
// 2. Bracket notation
user["firstName"]; // 결과값은 'Hyunsol'
user["city"]; // 결과값은 'Seoul'
- Bracket notation 사용 시 주의사항이 있다. 어떤 객체의 특정 key값을 통해 해당 key의 value를 알고 싶을 때, []안에 반드시 ""를 사용해야 한다.
- user[lastName]이라고 할 경우, lastName을 객체의 key가 아니라 하나의 변수로 인식하기 때문에 'Do'라는 결과값을 얻을 수 없다.
- user["lastName"]과 같이 ""를 사용하여 호출해야 원하는 결과값 'Do'를 얻을 수 있다.
- Dot/Bracket notation을 이용하여 값을 추가할 수도 있다.
let tweet = {
writer : 'hyunsol',
createdAt : '2019-09-10 12:03:33',
content : '프리코스 재밌당!'
};
tweet.isPublic = true;
twet.tags = ['#코드스테이츠', '#프리코스'];
tweet['category'] = '잡담';
// 위와 같이 dot notation, bracket notation을 활용하여 tweet이라는 객체의 값을 추가할 수 있다.
- delete 키워드로 값을 삭제하는 것도 가능하다.
- delete tweet.createdAt;을 입력하면, tweet의 결과물은 {writer : 'hyunsol', content : '프리코스 재밌당!'}이다.
- in 연산자로 특정 키가 객체 안에 포함되어 있는지 확인할 수 있다.
- 'content' in tweet;은 true를 return하고, 'updatedAt' in tweet;은 false를 return한다.
'Javascript 공부 > 코드스테이츠(-)' 카테고리의 다른 글
코드스테이츠 프리코스 3주차 후기(2) (0) | 2019.08.26 |
---|---|
코드스테이츠 프리코스 3주차 후기(1) (0) | 2019.08.26 |
코드스테이츠 프리코스 2주차 후기(2) (0) | 2019.08.26 |
코드스테이츠 프리코스 2주차 후기(1) (0) | 2019.08.26 |
코드스테이츠 프리코스 1주차 후기(1) (0) | 2019.08.26 |
댓글