Notice
Recent Posts
Recent Comments
«   2024/07   »
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

HYEWON JUNG의 개발일지

2023102nd WIL 데이터 타입, 연산자, 변수, 배열, 조건문, 반복문, 함수기초 본문

개발일지

2023102nd WIL 데이터 타입, 연산자, 변수, 배열, 조건문, 반복문, 함수기초

혜won 2023. 10. 17. 02:19

하루종일 적은 걸 날렸다.

1데이터 타입

1-1 숫자

정수형 10 실수형 3.14 지수형 2.5e5
NaN "hello"/2 Infinity 1/0 -infinity -1/0

(1)숫자 변환

+를 제외한 연산자

Number(); 를 이용한 변환

 

1-2 String

 

ex)

let str = "hello";

let str2 ="world";

길이 확인 length str.length 자르기 substr str.substr(2,3)
//"llo" > (n번째 부터, m개)
결합 concat let result = str.concat(str2); 자르기 slice str.slice(2,3)
//"l" > (n번째 부터, m번째까지)
대체 replace let result = str.replace("e","a")
//"hallo"
검색 search str.search("e")
//2 > e가 시작되는 시점
분할 split let result = str.split("e")
//["h" , "llo"] >기준 삼은 건 사라짐
타입 (연산자) typeof typeof (값)
공백제거 trim() str.trim();      

(1)이스케이프 문자

표현 결과 표현 결과
"This is \"string\""  This is "string" "This\t is\t string" "This (tab) is (tab) string"
"This is \n string" "This is
string" 
"This\\ is\\ string" "This\ is \string"

(2)문자열의 인덱스

"hello"

h e l l o
[0] [1] [2] [3] [4]

ex) 'hello'[2] //"l"

(3)문자열 변환

+ 연산자를 이용해 결합 시

String();을 이용한 변환

 

1-3 Boolean

true와 false를 나타냄

(1)불리언 변환

bollean(); //  !!

->false값 0,"",null, undefined,NaN

->true값 나머지

 

1-4undefined

값이 할당되지 않은 변수 (비의도적)

 

1-5null

값이 존재하지 않음 (의도적)

 

1-6객체(obj)

key - value pair

{}를 사용하여 객체 생성

속성과 메소드를 가짐

 

2 .연산자

- 산술 연산자 = 숫자 계산 

- 할당 연산자 = 변수 계산 

- 비교 연산자 = 값을 비교 

- 논리 연산자 = 주어진 논리식을 판단하여, 참(true)과 거짓(false)을 결정

산술연산자 할당연산자 비교연산자 논리연산자
빼기  - 등호 = 일치 === 논리곱 (2true) &&
더하기  + 더하기등호 += 불일치 !== 논리합(1true) ||
곱하기  * 빼기 등호 -= 작다 < 논리부정 !
나누기  / 곱하기 등호 *= 크다 >    
나머지  % 나누기 등호 /= 작거나 같다 <=    
제곱 ** 나머지 등호 %= 크거나 같다 >=    

- 삼한 연산자

let 이름 = 값;
let result = (조건) ? " true일경우":"false일경우";

- 증감 연산자 

변수 ++ 기존 변수의 값에서 1을 더하기
//기존 먼저 불러오고 +1
변수 -- 기존 변수의 값에서 1을 빼기
//기존 먼저 불러오고 -1
++변수 기존 변수의 값에서 1을 더하기
//바로 +1 값 호출
--변수 기존 변수의 값에서 1을 빼기
//바로 -1 값 호출

헷갈릴만한 것

let number = 10

alert(number++)
alert(++number)
alert(number--)
alert(--number)

호출값
//10
//12
//12
//10
let number = 10

console.log(number)
number++
number++
console.log(number)
console.log(number)
number--
number--
console.log(number)

//10
//12
//12
//10

 

3. 식별자 

구분 단독으로 사용 다른 식별자와 사용
식별자 뒤에 괄호 없음 변수 ex) input 속성 ex)Array.length
식별자 뒤에 괄호 있음 함수 ex) alert() 메소드 ex)math.abs()

4. 변수 

4-1 변수 선언 

var var myVar = "hello";
var myVar = "world";
//"world"
같은 이름의 변수 덮어쓰기 가능
let let myLet = "hello";
myLet = "world";
//"world"
선언되어있는 값에 덮어쓰기
const const myConst = "hello world" 값 변경 X

5. 조건문

5-1  if 조건문

let X=10;
if (x>0){					//여기가 if문
	console.log('x는 양수입니다.')
} else if (x<0){				//여기가 if-else-if-else문
	console.log('x는 음수입니다.')
} else{						//여기가 if-else문
	console.log('x는 0입니다')
}

5-2 중첩 조건문 

let age = 20;
let gender = "여성";

if (age >= 18) {
  if (gender === "남성") {
    console.log("성인 남성입니다.");
  } else {
    console.log("성인 여성입니다.");
  }
} else {
  console.log("미성년자입니다.");
}

5-3 switch 문

switch(변수 이름){
	case 조건1 :
     break
    case 조건2 :
     break
    default: ---->생략 가능
     break
}

6. 배열 Array

배열은 여러개의 변수를 한번에 선언해 다루는 자료형, []를 사용해 생성, 배열 안에 있는 값은 요소라고 함.

요소의 순서인 인덱스를 가짐 0부터 시작

const str = '안녕하세요'

str[2]
-> 하
str[str.length-1]
->요

6-1 배열 요소 추가하기

//기본형//
배열이름.push(추가 할 요소)

//emtpy요소//
//배열의 요소가 3개인데 추가할 요소를 10번째에 넣고 싶을 때//

배열이름[10] = '추가할 요소'

(11)[요소1, 요소2, 요소3, empty x 7, '추가한 요소']

6-2 배열 메소드

push() 배열이름. push(요소) 배열의 맨 뒤에 요소 추가
pop() 배열이름. pop(요소) 배열의 맨 뒤 요소 삭제
shift() 배열이름. shift(요소) 배열의 맨 앞 요소 삭제
unshift() 배열이름. unshift(요소) 배열의 맨 앞에 요소 추가
splice() 배열이름. splice(n ,m, 요소) n번인덱스부터 m개의 요소 지우고 요소 추가
splice()//제거 배열이름. splice(n ,m) n번인덱스부터 m개의 요소 지우기
slice() 배열이름. slice(n ,m) n번 인덱스부터 m개로 새로운 배열 만들기
forEach() let 배열이름 = [ ]
배열이름.forEach(function(매개변수){
  
})
콘솔 상에 배열의 index가 반복되며 출력
map() let arrayName = [ ];
 let newArray =  arrayName.map(function(매개변수){
  return 새로운 배열을 만들 식 Ex) 매개변수*매개변수
})
기존 배열을 가공해 새로운 배열을 생산 

// 항상 원본의 길이 만큼 return 된다
filter() let arrayName = [ ];
 let newArray =  arrayName.filter(function(매개변수){
  return 해당해야하는 조건 
})
해당하는 조건만 호출해 새로운 배열 생성
reduce() let sum= 
numbers.reduce(function(accumulator,currentValue){
    return accumulator + currentValue;
},0);
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

하나의 결과값을 반환
reduce의 콜백함수는 4개의 인수를 가진다.
accumulator, currentValue, currentIndex, array

//콜백함수 공부 후 추가
find() let 배열이름 = [ ]
배열이름.find(function(매개변수){
   return 찾는 요소 조건
})
찾는 요소 조건에 맞는 첫번째 요소를 반환
some() let 배열이름 = [ ]
배열이름.some(function(매개변수){
   return 찾는 요소 조건
})
찾는 요소 조건에 true인게 하나라도 있는지 확인
every() let 배열이름 = [ ]
배열이름.every(function(매개변수){
   return 찾는 요소 조건
})
배열의 요소가 모두  찾는 요소 조건에 true인지
sort() 배열이름.sort();

let 배열이름 = [ ]
배열이름.sort(function(a, b){
   return b-a;

배열을 오름차순으로 정렬

         ↓
내림차순으로 정렬
reverse() 배열이름.reverse(); 배열의 순서를 역순으로 
indexOf() 배열이름.indexOf("찾을 요소") 요소의 인덱스 출력

7. 반복문

7-1 for 반복문

for (초기값;조건식;증감식){}

for(let i = 0; i <반복횟수; i++){
문장 
}

// with 배열
for(let i = 0; i <배열.length; i++){
 *문장* 배열[i]
}

//배열을 반대로 하고 싶을 땐 
for(let i = 배열.length -1; i>=0; i--){
*문장* 배열[i]
}

7-2 for in 반복문

for (let 반복 변수 in 배열 또는 객체 ){
문장
}

// 객체의 경우

let person = { name: "John", age: 30, gender: "male" };

for (let key in person) {
  console.log(key + ": " + person[key]);		<--- 객체 value 접근법
}

// 배열의 경우
let todos = ['우유사기','업무메일확인'. '필라테스수업']

for (let i in todos){
	console.log(`${i}번째 할일 : ${todos[i]}`)
}

7-3 while 반복문

//while 의 기본 형식//

while(bool 표현식/조건){
문장
}
// while문은 조건이 변하지 않는다면 무한 반복함. 
//고로 문장에 조건을 거짓으로 만드는 내용이 있어야함

7-4 break 키워드

// break는 반복문을 종료합니다.
for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break;
  }
  console.log(i);
}

7-5 continue문

// 기준만 제외하고 그대로 출력 지금 예제에선 5만 제외
for (let i = 0; i < 10; i++) {
  if (i === 5) {
    continue;
  }
  console.log(i);
}

 

 

8.함수 

8-1 함수의 장점

1. 반복되는 코드를 한번 정의 해놓고 필요할 때마다 호출해 반복 작업을 피함

2. 가독성이 좋아진다.

3. 기능별로 수정이 가능하므로 유지보수가 쉽다. 

 

8-2  함수 정의 하기

(1) 함수 선언문 

function 함수(){}

(2)함수 표현식

let 함수 = function(){};

8-3 함수의 매개변수와 리턴값

 

함수에 넣는 input  = 매개변수

결과로 나오는 output  = 리턴값

 

8-4 기본 매개변수

함수이름 (매개변수, 매개변수 = 기본값, 매개변수 = 기본값)

매개변수의 값이 주어지지 않으면 기본값을 적용

8-5 화살표 함수

 

 

강의 듣고 정리한 거 날리고 책이랑 같이 보면서 정리하니가 이해가 더 잘된다. 시간이 좀 걸리긴 하지만.. 근데 이제 1주차 정리 다 한건데.. 나머지 주차도 정리하려면 정말.. 시간이 부족하겠다. 주말이 놀지 말걸~~~ 조금더 할 걸~!~  

 

메소드들은 발견할 때 마다 추가할 예정이다. 사전처럼..  그리고 예제들은 따로따로 풀이섹션을 만들어서 많이 해야겠다. 알고리즘을 들어도 잘 안떠올라. ㅜ